Web & Frontend
Web development agent skills handle frontend and full-stack work: component patterns, CSS and accessibility fixes, performance budgets, and framework conventions. Install a skill once and your AI agent follows the same playbook in every project, from quick prototypes to production apps.
-
h-mmer Skill Poc Builder 2Bug bounty PoC and report builder. Use after confirming a vulnerability to create minimal reproduction steps, self-contained HTML demonstration pages, curl-based reproduction scripts, and platform-ready report drafts for HackerOne/Bugcrowd/Intigriti.
-
h-mmer Bundle Hunt Xss 2Hunting skill for Cross-Site Scripting (XSS) — DOM-based, stored, reflected, mutation-based (mXSS), and modern variants. Built from public bug bounty reports across HackerOne, Intigriti, Bugcrowd, Huntr, and GitHub Security Advisories, plus 2024-2026 meta verified against NVD — DOMPurify nesting mXSS (CVE-2024-47875, GHSA-gx9m-whjm-85jf), DOMPurify depth-bypass family (CVE-2024-45801, GHSA-mmhx-hmjr-r674), DOMPurify mXSS via Re-Contextualization (GHSA-h8r8-wccr-v5f2), Auth0 nextjs-auth0 returnTo (CVE-2025-67716, GHSA-mr6f-h57v-rpj5), React Server Components DoS family (CVE-2025-67779/55184, GHSA-5j59-xgg2-r9c4), markdown-to-jsx iframe XSS (CVE-2024-21535), listmonk stored XSS → Admin ATO (GHSA-jmr4-p576-v565, CVSS 8.0). Use when hunting DOM XSS, stored XSS, reflected XSS, postMessage XSS, mXSS, sanitizer bypass (DOMPurify / sanitize-html / bleach), OAuth redirect_uri XSS, prototype pollution → XSS gadgets, markdown renderer XSS, Server Components content injection, agentic LLM output injection.
-
francostino Skill Context7 Auto Research 2Automatically fetch latest library/framework documentation for Claude Code via Context7 API. Use when you need up-to-date documentation for libraries and frameworks or asking about React, Next.js, Prisma, or any other popular library.
63 -
tody-agent Skill Cm Safe I18N 2Use when translating, extracting, or mass-converting hardcoded strings to i18n t() calls. Enforces multi-pass batching, parallel-per-language dispatch, 8 audit gates, and HTML integrity checks. Battle-tested through 21+ batches and 12 bug categories from the March 2026 incidents.
-
tody-agent Skill Cm Safe Deploy 4Use when setting up deployment infrastructure for any project - establishes multi-gate deploy pipeline with test gates, build verification, frontend safety checks, and rollback strategy before code reaches production
-
tody-agent Skill Cm Quality Gate 3Use before any deployment or completion claim. Enforces test gates, evidence-based verification, and frontend safety checks. No deploy without passing. No claims without evidence.
-
tody-agent Skill Cm Quality Gate 4Use before any deployment or completion claim. Enforces test gates, evidence-based verification, and frontend safety checks. No deploy without passing. No claims without evidence.
-
tody-agent Skill Cm Auto Publisher 2Comprehensive publishing automation skill bridging AI agents (OpenClaw, Manus, Claude) to the Content Factory Router. Uses the Router API to publish markdown articles with rich media to any connected Astro site natively.
-
tody-agent Bundle Cm Video Factory 2Private Code-to-Video Engine using Remotion React, TTS (ElevenLabs/OpenAI), and Content Mastery. Creates pure VibeCoding-style animations for TikTok/Shorts/Reels automatically.
-
apache Skill Magpie Issue Triage 2For each open `<issue-tracker>` issue in the configured candidate pool, read the issue body and comments and classify the candidate disposition. On user confirmation, posts a triage-proposal comment that invites the project team to react. Read-only on tracker state — no workflow transitions, closures, or label changes. Six classes in the body.
-
apache Skill Magpie Security Issue Triage 2For each open `<tracker>` issue carrying the `needs triage` label, read body + comments and classify the candidate disposition into one of six classes: VALID / DEFENSE-IN-DEPTH / INFO-ONLY / INVALID / PROBABLE-DUP / FIX-ALREADY-PUBLIC. On user confirmation, posts a triage-proposal comment that invites the security team to react. Read-only on tracker state — no label flips, closes, or CVE allocations. Supports `--retriage` for re-litigating passed-triage decisions when substantive new activity lands.
-
apache Skill Magpie Security Model Prepare 2Front door for a project that has no published security model yet. Opens the conversation with `<governance-body>` on the private list, drives production of a first draft — delegating the model-writing itself to the Alpha-Omega threat-model skill set — in **draft-first** mode so maintainers react to concrete prose instead of composing from a blank page, then lands the model and its `AGENTS.md` → `SECURITY.md` discoverability chain as one reviewable PR per repository. Every claim carries a provenance tag; every inferred claim carries a matching open question. Drafts and proposes; the maintainers decide.
-
jmagar Bundle Claude In Mobile 2This skill is the RAW claude-in-mobile MCP/CLI driver — use it to issue individual device-automation calls: drive an iOS Simulator, tap/swipe/type on an Android device or emulator, capture or diff screenshots, inspect the UI tree, audit accessibility, fan out across multiple devices, or run guarded Play Store release operations. Triggers: "drive my emulator", "tap this element", "screenshot the simulator", "call a claude-in-mobile tool", "run an autopilot flow". Does NOT produce a structured works/doesn't-work test report — for an end-to-end APK test run with a written report, use android-app-testing (or desktop-app-testing); this skill is the low-level driver those harnesses sit on top of.
-
jmagar Bundle Claude Android Ninja 2Use when building Android apps with Kotlin, Jetpack Compose, MVVM, Hilt, Room 3 (KSP, SQLiteDriver, Flow/suspend DAOs), and multi-module architecture. Triggers on requests to create Android projects, modules, screens, ViewModels, repositories, or Android architecture questions. Not for iOS, Flutter, React Native, KMP-only shared code without an Android app module, or backend-only APIs with no Android client.
-
jmagar Bundle Android App Testing 2Use when the user wants to live-test an Android APK end-to-end on an emulator/device and get a works/doesn't-work + UI/UX report — driving the real app, not writing test code. Triggers: "test my Android app", "QA this APK", "run the app on the emulator and tell me what breaks", "click through every screen", "review the app's UX", "does my APK work", "test the built APK". Installs/launches the APK, enumerates screens from the accessibility tree, exercises each feature via adb (tap/type/swipe/launch), watches logcat for crashes/ANRs, captures screenshots + UI dumps, and emits a structured report. Primary path is direct local adb; optional richer path via claude-in-mobile. Sibling of web-app-testing and desktop-app-testing (shared report format). Does NOT fire for: building/coding an Android app (use claude-android-ninja / jetpack-compose-expert), iOS, or unit tests.
-
officebeats Bundle Markitdown 2Convert local files into token-efficient Markdown with Microsoft MarkItDown. Use when the user asks to convert, extract, normalize, read, or ingest PDF, Word, PowerPoint, Excel, Outlook, HTML, CSV, JSON, XML, EPUB, ZIP, image, or audio content as Markdown, and by default when supported non-Markdown files enter the Beats PM intake staging lane.
-
officebeats Skill UI UX Designer 2Review product interfaces for visual hierarchy, usability, accessibility, and delivery-ready improvements.
-
officebeats Bundle Diagram Designer 2Editorial-quality architecture, flow, and strategy diagrams. Self-contained HTML + SVG.
-
vril-labs Skill AI Voice Cloning 2AI voice generation, text-to-speech, and voice synthesis via inference.sh CLI. Models: ElevenLabs (22+ premium voices, 32 languages), Kokoro TTS, DIA, Chatterbox, Higgs, VibeVoice for natural speech. Capabilities: multiple voices, emotions, accents, long-form narration, conversation, voice transformation. Use for: voiceovers, audiobooks, podcasts, video narration, accessibility. Triggers: voice cloning, tts, text to speech, ai voice, voice generation, voice synthesis, voice over, narration, speech synthesis, ai narrator, elevenlabs, eleven labs, natural voice, realistic speech, voice ai, voice changer
-
vril-labs Skill React Best Practices 2React best-practices reviewer for TSX files. Triggers after editing multiple TSX components to run a condensed quality checklist covering component structure, hooks usage, accessibility, performance, and TypeScript patterns.
-
jsgforever Bundle Animator 2Create short video animations from HTML/CSS/JS. Frame-by-frame capture at 30fps using Playwright + ffmpeg. Write CSS animations normally - the recorder pauses and steps them. Use for product demos, social clips, ad creative, feature announcements.
-
jsgforever Bundle Mineru Extract 2Use the official MinerU (mineru.net) parsing API to convert a URL (HTML pages like WeChat articles, or direct PDF/Office/image links) into clean Markdown + structured outputs. Use when web_fetch/browser can’t access or extracts messy content, and you want higher-fidelity parsing (layout/table/formula/OCR).
-
jsgforever Bundle Context Detection 2Use when detecting project technology stack from files/configs/directory structure, auto-loading framework-specific skills, or analyzing multi-stack fullstack projects (e.g., React + Go).
-
jsgforever Bundle Betterauth Fastapi JWT Bridge 2Implement secure authentication bridge between Better Auth (Next.js frontend) and FastAPI (Python backend) using JWKS JWT token verification. Use this skill when users need to (1) Integrate Better Auth with FastAPI backend, (2) Implement JWT authentication with JWKS verification, (3) Set up user isolation and authorization in FastAPI endpoints, (4) Configure frontend to send authenticated API requests, or (5) Troubleshoot Better Auth + FastAPI authentication issues.
-
jsgforever Bundle Form Validation Architect 2End-to-end form handling with react-hook-form, Zod schemas, validation patterns, error messaging, field arrays, and multi-step wizards. Use for complex forms, validation architecture, autosave, field dependencies. Activate on "form validation", "react-hook-form", "Zod", "form error", "multi-step form", "wizard". NOT for simple HTML forms, backend validation only, or non-React frameworks.
-
jsgforever Bundle React Performance Optimizer 2Optimize React apps for 60fps performance. Implements memoization, virtualization, code splitting, bundle optimization. Use for slow renders, large lists, bundle bloat. Activate on "React performance", "slow render", "useMemo", "bundle size", "virtualization". NOT for backend optimization, non-React frameworks, or premature optimization.
-
apache Skill Magpie Security Tracker Stats Dashboard 2Generate a self-contained HTML dashboard of `<tracker>` repository statistics for security-team review.
-
dojogenesis Skill AWS Agentic AI 2AWS Bedrock AgentCore comprehensive expert for deploying and managing all AgentCore services. Use when working with Gateway, Runtime, Memory, Identity, or any AgentCore component. Covers MCP target deployment, credential management, schema optimization, runtime configuration, memory management, and identity services.
-
dojogenesis Skill Saas Scaffolder 2Generates complete, production-ready SaaS project boilerplate including authentication, database schemas, billing integration, API routes, and a working dashboard using Next.js 14+ App Router, TypeScript, Tailwind CSS, shadcn/ui, Drizzle ORM, and Stripe. Use when the user wants to create a new SaaS app, start a subscription-based web project, scaffold a Next.js application, or mentions terms like starter template, boilerplate, new project, or wiring up auth and payments.
-
njs14 Skill Show Me 2Explain a topic visually with concise diagrams, code-shape sketches, or focused offline-capable HTML. Use for visual understanding rather than a decision-and-evidence log.
-
njs14 Bundle Architect 2Design or revise a component through grounded architecture analysis, structurally distinct alternatives, explicit tradeoffs, and executable verification. Use for system boundaries, APIs, data models, migrations, or high-impact refactors.
-
vril-labs Bundle Vercel React Best Practices 2React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.
-
irahardianto Bundle Vue Idioms 2Vue 3 Composition API, Pinia stores, composables, Vite, Vitest.
-
irahardianto Bundle React Idioms 2React hooks, Suspense, Server Components, React 19 patterns. For TypeScript see typescript-idioms.
-
irahardianto Bundle Better Layout 2Layout structure for web interfaces. Use when structuring a page or component, deciding what collapses at small sizes, or reviewing frontend code for layout. Triggers on layout, spacing, alignment, grouping, whitespace, visual hierarchy, reading order, progressive disclosure, breakpoints, container queries, safe area, full-bleed, layout margins, RTL layout, logical properties.
-
irahardianto Skill Mobile Design 2Generates distinctive, production-grade mobile interfaces for Flutter and React Native. Prioritizes platform-native patterns, adaptive layouts, and fluid motion. Use when building mobile apps, screens, widgets, or when the user requests to style or create visually striking mobile UI.
Frequently asked questions
What are Web & Frontend agent skills?
Web development agent skills handle frontend and full-stack work: component patterns, CSS and accessibility fixes, performance budgets, and framework conventions. Install a skill once and your AI agent follows the same playbook in every project, from quick prototypes to production apps.
Which Web & Frontend skills are most installed?
Popular Web & Frontend skills on SkillMD right now include poc-builder, hunt-xss, context7-auto-research. Rankings shift as installs change; sort this page by "Most installs" for the live list.
Do Web & Frontend skills work with Claude Code and Cursor?
Yes. Every skill here ships as a SKILL.md file, an open format that works in Claude Code, Claude.ai, Cursor, Codex, Windsurf, and 60+ other agents. Install one with npx skillmds@latest add <owner>/<name>, or copy the file into your agent's skills directory.