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.
-
piter902 Bundle Survey Creator Skill 2Create schema-validated HTML survey pages from natural-language requirements using the admin designer references. Use this skill whenever the user asks to create, design, prototype, render, or generate a survey/questionnaire HTML page, especially when they want free-form UI style but need the question structure constrained by a reference schema. Be proactive about using it for survey creation, registration forms, feedback forms, AI Native questionnaire pages, and similar structured form UIs.
-
prisma-labs-dev Bundle React Composition PatternsReact composition patterns that scale. Use when refactoring components with boolean prop proliferation, building flexible component libraries, or designing reusable APIs. Triggers on tasks involving compound components, render props, context providers, or component architecture. Includes React 19 API changes.
-
revylai Skill Greenlight 2Pre-submission compliance scanner for the Apple App Store and Google Play. Use this skill when reviewing iOS, macOS, tvOS, watchOS, visionOS, or Android app code (Swift, Objective-C, Kotlin, Java, React Native, Expo) to identify store rejection risks before submission, including Android manifest and Gradle policy checks and built APK/AAB inspection. Triggers on tasks involving app review preparation, compliance checking, App Store or Play submission readiness, target API level deadlines, restricted permissions, or when a user asks about App Store guidelines or Google Play Developer Program Policies.
-
rion-wu-tech Bundle Daily Briefing 2Generate a source-linked Chinese AI/Web3 daily briefing with official model releases, infrastructure, application adoption, funding, and cross-industry signals directly in Codex, then save the editorial result as Markdown plus a standalone interactive HTML reader. Use when the user asks for 今日早报, AI 简报, 交互版简报, HTML 简报, 最新模型发布, AI 产品更新, 应用层趋势, AI 投融资, 产业链, official AI updates, daily briefing, recent AI hotspots, GitHub trends, content ideas, briefing feedback, or a weekly briefing review.
-
zaaakher Skill Frontend DesignCreate distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
Audited -
mustbesimo Bundle Cinematic Scroll 2Design, build, or improve cinematic scroll-driven websites with clear storytelling, purposeful motion, responsive fallbacks, accessibility, and browser-based proof. Use for product stories, portfolios, launches, editorial experiences, interactive heroes, and real-time 3D scenes; not for ordinary dashboards or unrelated animation.
-
mustbesimo Skill Cinematic Scroll 3Build or improve cinematic websites with scroll-driven storytelling, pinned reveals, parallax, kinetic type, and optional 3D. Deliver standalone HTML or integrate into an existing app, with mobile and reduced-motion fallbacks and browser evidence. Also supports scroll audits and motion storyboards. Use for cinematic web work, not ordinary forms, dashboards, or unrelated animation.
-
chongdashu Bundle Playwright Testing 2Plan, implement, and debug frontend tests: unit/integration/E2E/visual/a11y. Use for Playwright MCP browser automation, Vitest/Jest/RTL, flaky test triage, CI stabilization, and canvas/WebGL games (Phaser) needing deterministic input plus screenshot/state assertions. Trigger: "test", "E2E", "flaky", "visual regression", "Playwright", "game testing".
-
hunghg255 Bundle Vercel React Best PracticesReact 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.
-
iii-hq Bundle Vercel React Best PracticesReact 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.
-
kingbootoshi Skill Claude Code Orchestrator 2Spawn and manage sibling Claude Code agents through claude-agent for parallel frontend, workbench, implementation, and review tasks.
-
yaniv-golan Bundle Telegram Webapps 2Build Telegram Mini Apps (Web Apps) — interactive web applications embedded inside Telegram. Use when the user asks to "create a Telegram Mini App", "build a Telegram Web App", "add a web app to my Telegram bot", "make a TWA", or wants to use window.Telegram.WebApp API, integrate a bot with a frontend, implement initData validation, accept Telegram Stars payments, add navigation between pages, set up local development for a Mini App, or implement proactive messaging to users. Covers HTML boilerplate, mock for browser dev, JavaScript SDK (MainButton, SecondaryButton, BackButton, HapticFeedback, CloudStorage), bot setup via BotFather, server-side initData validation (Node/Python/Go), SPA navigation, Telegram Stars payments, and advanced APIs (location, QR, fullscreen, accelerometer).
-
bilalmk Bundle Frontend DesignCreate distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
-
dmitrypost Skill Vuetify4 2Vuetify 4 documentation corpus (release 4.0.5). Use for Vuetify 4-only component, API, directive, and composable questions; prefer API pages for contracts and guide pages for usage examples.
-
gkurt Bundle Remotion Best PracticesBest practices for Remotion - Video creation in React
-
kaushal-205 Bundle Clawlogic Trader 2Use this skill when the agent needs to interact with CLAWLOGIC prediction markets. This includes: registering as an agent on-chain, creating new prediction markets, analyzing market questions to form opinions, buying YES/NO positions, asserting market outcomes via UMA Optimistic Oracle, disputing incorrect assertions from other agents, settling resolved markets to claim winnings, and posting bet narratives ("what I bet and why") to the frontend feed. Triggers: - "create a market about..." - "what do you think about [market question]?" - "buy YES/NO on market..." - "assert the outcome of market..." - "dispute the assertion on market..." - "check my positions" - "settle market..." - Any discussion about prediction markets, trading, or information markets
-
oss-apps Skill Find DocsRetrieves up-to-date documentation, API references, and code examples for any developer technology. Use this skill whenever the user asks about a specific library, framework, SDK, CLI tool, or cloud service -- even for well-known ones like React, Next.js, Prisma, Express, Tailwind, Django, or Spring Boot. Your training data may not reflect recent API changes or version updates. Always use for: API syntax questions, configuration options, version migration issues, "how do I" questions mentioning a library name, debugging that involves library-specific behavior, setup instructions, and CLI tool usage. Use even when you think you know the answer -- do not rely on training data for API details, signatures, or configuration options as they are frequently outdated. Always verify against current docs. Prefer this over web search for library documentation and API details.
-
wbh604 Skill Fund Manager Alpha 2基金经理深度行为审计引擎。逐笔买卖验尸(拿12个月后走势验对错)、独立决策取证(同门/全市场/热榜三把尺子)、K线战役回放、抄作业指数、被动减仓判定、造神检测、闸门时间轴、年底冲排名、一车多牌、开门批次,产出单文件交互 HTML 报告。当用户要求分析某只基金或基金经理、判断能不能买、经理水平如何、独立性如何、Alpha 是本事还是运气时使用。关键词:基金、基金经理、公募、Alpha、抱团、持仓分析、业绩归因、能不能买。
-
lukewire129 Skill Nuri 2Build C# desktop UI applications with Nuri, a React-style MVU framework that renders platform-neutral virtual elements into native WPF and Avalonia controls. Use when creating or editing Nuri components, hooks (useState, useEffect, useStore, useMemo), keyed lists, routing, or animations, when scaffolding a XAML-free pure-C# desktop app, or when debugging Nuri rendering, lifecycle, or diagnostics output.
-
coder Skill Vercel SandboxRun agent-browser + Chrome inside Vercel Sandbox microVMs for browser automation from any Vercel-deployed app. Use when the user needs browser automation in a Vercel app (Next.js, SvelteKit, Nuxt, Remix, Astro, etc.), wants to run headless Chrome without binary size limits, needs persistent browser sessions across commands, or wants ephemeral isolated browser environments. Triggers include "Vercel Sandbox browser", "microVM Chrome", "agent-browser in sandbox", "browser automation on Vercel", or any task requiring Chrome in a Vercel Sandbox.
-
elliottminns Bundle Frontend DesignExpert frontend design guidelines for creating beautiful, modern UIs. Use when building landing pages, dashboards, or any user interface.
-
kiranism Bundle Vercel Composition PatternsReact composition patterns that scale. Use when refactoring components with boolean prop proliferation, building flexible component libraries, or designing reusable APIs. Triggers on tasks involving compound components, render props, context providers, or component architecture. Includes React 19 API changes.
-
cybertheory Bundle Clrun 2Run and control interactive CLI sessions for AI agents. Handles TUI prompts (select lists, checkboxes, confirms), persistent shell state, and long-running processes. Use when you need to execute terminal commands, respond to interactive prompts, navigate scaffolding wizards like create-vue or create-vite, or manage dev servers.
-
midudev Bundle AccessibilityAudit and improve web accessibility following WCAG 2.2 guidelines. Use when asked to "improve accessibility", "a11y audit", "WCAG compliance", "screen reader support", "keyboard navigation", or "make accessible".
-
kasonye Skill UI Aesthetics 2Raise frontend visual judgment for web interfaces with a bias toward refined product-grade composition, precise component craftsmanship, disciplined interaction states, controlled motion, and coherent depth systems. Use when generating, reviewing, or refactoring web UI that feels generic, cluttered, flat, over-styled, theatrically animated, visually imprecise, or AI-generated.
-
nunomaduro Skill Fortify DevelopmentACTIVATE when the user works on authentication in Laravel. This includes login, registration, password reset, email verification, two-factor authentication (2FA/TOTP/QR codes/recovery codes), profile updates, password confirmation, or any auth-related routes and controllers. Activate when the user mentions Fortify, auth, authentication, login, register, signup, forgot password, verify email, 2FA, or references app/Actions/Fortify/, CreateNewUser, UpdateUserProfileInformation, FortifyServiceProvider, config/fortify.php, or auth guards. Fortify is the frontend-agnostic authentication backend for Laravel that registers all auth routes and controllers. Also activate when building SPA or headless authentication, customizing login redirects, overriding response contracts like LoginResponse, or configuring login throttling. Do NOT activate for Laravel Passport (OAuth2 API tokens), Socialite (OAuth social login), or non-auth Laravel features.
Audited -
unclecheng-li Bundle Science Content Ppt将科普内容文本转换为可视化PPT风格网页的完整工作流。当用户输入科普内容并希望生成演示页面时触发。支持两种模式:(1) 默认模式:将科普内容生成为仿PPT轮播的单页HTML动画网页;(2) 流程图模式:使用Animation模板将已生成的AI_Animation.html按平面UI样式重构。模板已内置于Skill中。触发词包括"生成PPT"、"生成演示网页"、"生成流程图"等。
-
vercel Skill Web Design GuidelinesReview UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices".
-
vercel Bundle Next ForgeExpert assistance for next-forge — a production-grade Turborepo template for Next.js SaaS apps. Triggers on questions about next-forge installation, setup, architecture, packages, customization, deployment, and development workflows.
-
bettertyped Skill ReactReact renderer for json-render that turns JSON specs into React components. Use when working with @json-render/react, building React UIs from JSON, creating component catalogs, or rendering AI-generated specs.
-
blockrunai Skill Clone WebsiteReverse-engineer and clone one or more websites in one shot — extracts assets, CSS, and content section-by-section and proactively dispatches parallel builder agents in worktrees as it goes. Use this whenever the user wants to clone, replicate, rebuild, reverse-engineer, or copy any website. Also triggers on phrases like "make a copy of this site", "rebuild this page", "pixel-perfect clone". Provide one or more target URLs as arguments.
-
muxy-app Bundle React Native Best PracticesProvides React Native performance optimization guidelines for FPS, TTI, bundle size, memory leaks, re-renders, and animations. Applies to tasks involving Hermes optimization, JS thread blocking, bridge overhead, FlashList, native modules, or debugging jank and frame drops.
-
cristianolivera1 Skill 3d Web ExperienceExpert in building 3D experiences for the web - Three.js, React Three Fiber, Spline, WebGL, and interactive 3D scenes. Covers product configurators, 3D portfolios, immersive websites, and bringing depth to web experiences.
-
bootstrap-vue-next Skill VitepressVitePress static site generator powered by Vite and Vue. Use when building documentation sites, configuring themes, or writing Markdown with Vue components.
-
innei Bundle Turnstile SpinSet up Cloudflare Turnstile end-to-end in a project — scan the codebase, create the widget via the Cloudflare API, deploy the managed siteverify Worker, write the frontend snippets, validate, and persist the skill. Load this when a user asks to add Turnstile, set up CAPTCHA, protect a form from bots, or fix a Turnstile integration. Mirrors developers.cloudflare.com/turnstile/spin.
-
cheolmin Skill Orca CLIUse the public `orca` CLI to operate Orca-managed worktrees, folder contexts, terminals, repos, automations, artifacts, worktree comments, and the browser embedded inside the Orca app. Use when the user says "$orca-cli", "use orca cli", "Orca worktree", "child worktree", "cardStatus", "spawn codex/claude in a worktree", "read/wait/send Orca terminal", "terminal send", "full handoff", "handover", "give this to another agent", "another worktree", "Orca browser", "orca artifacts", "share HTML/Markdown", "public artifact link", or "control the browser inside Orca". Prefer this over raw `git worktree`, ad hoc PTYs, Playwright, or Computer Use when the task touches Orca-managed state. Use Computer Use for browser windows, webviews, or desktop UI outside Orca's embedded browser.
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 survey-creator-skill, react-composition-patterns, greenlight. 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.