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.
-
vbrevik Skill Prompt ContractsUse when about to implement a feature, build a component, fix a bug, or make any non-trivial code change. Replaces vague natural-language requests with structured contracts that eliminate ambiguity and prevent wrong-direction work.
-
vbrevik Skill Memstack Security API AuditUse this skill when the user says 'audit API', 'check API security', 'API routes security', 'endpoint audit', 'check my routes', or needs to verify API route protection. Reviews API endpoints for authentication, authorization, and input validation gaps. Do NOT use for frontend security headers or dependency scanning.
-
getsentry Bundle Sentry Svelte Sdk 2Full Sentry SDK setup for Svelte and SvelteKit. Use when asked to "add Sentry to Svelte", "add Sentry to SvelteKit", "install @sentry/sveltekit", or configure error monitoring, tracing, session replay, or logging for Svelte or SvelteKit applications.
845 -
lsantosweb Skill Mobile DeveloperUse for React Native, Flutter, Expo, iOS, Android, mobile UX, platform-specific patterns, offline behavior, and mobile performance.
-
lsantosweb Skill Frontend SpecialistUse for React or Next.js components, Tailwind, responsive UI, accessibility, state management, and frontend architecture.
-
vbrevik Skill Memstack Development Performance AuditUse this skill when the user says 'performance audit', 'why is it slow', 'optimize performance', 'page speed', 'Core Web Vitals', 'lighthouse', 'load time', or needs to diagnose and fix frontend or backend performance issues. Do NOT use for code reviews or security audits.
-
juanmarchetto Bundle Maestro Mobile TestingMaestro mobile E2E testing patterns for React Native/Expo apps: YAML test flows, testID selectors, adaptive auth state, optimistic update verification, GraalJS scripting, cross-platform stability, CI/CD integration, Maestro Cloud, and MCP server integration. Use when: write Maestro test, flaky mobile test, test my app, automate mobile testing, mobile E2E, debug test failure, Maestro setup.
-
arturseo-geo Bundle AgentsDesign, build, and debug AI agent systems — including multi-step reasoning loops, tool use, memory, planning, multi-agent orchestration, and autonomous workflows. Use this skill whenever the user wants to build an AI agent, agentic pipeline, or autonomous workflow; asks about agent architectures (ReAct, Plan-and-Execute, reflection loops, Tree of Thoughts, LATS); wants to chain multiple LLM calls together; needs to build a system that uses tools, searches the web, reads files, executes code, or takes actions; mentions MCP (Model Context Protocol), LangChain, LangGraph, CrewAI, AutoGen, Claude Agent SDK, or similar frameworks; or wants to automate a multi-step task end-to-end. Also trigger when the user asks about prompt chaining, structured outputs for downstream use, building reliable pipelines on top of Claude or other LLMs, or agent evaluation and observability.
-
arturseo-geo Bundle Ebook PublishingThe complete ebook and audiobook self-publishing skill — write, format, convert, and publish across all major platforms. Use this skill whenever the user asks about Amazon KDP, Apple Books, Gumroad, Payhip, Kobo, Draft2Digital, IngramSpark, Barnes & Noble Press, Google Play Books, PublishDrive, StreetLib, ACX, ElevenLabs audiobooks, KDP Virtual Voice, INaudio (formerly Findaway Voices), EPUB formatting, HTML-to-PDF Puppeteer workflow, book cover design specs, ISBN strategy, KDP Select vs wide distribution, permafree strategy, BookBub, series pricing, royalty calculations, book descriptions, Amazon A+ content, keyword research, ARC readers, or any launch strategy. Also trigger for lead magnet ebooks, digital downloads, online courses packaged as ebooks, audiobook production with AI narration, print-on-demand, or any content intended for digital or print distribution and sale. MCP available for Gumroad only (rmarescu/gumroad-mcp). All other platforms require manual upload.
-
danieloid3 Bundle Frontend DesignCreate distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.
-
shiven0504 Skill A11Y AuditAudit and fix accessibility issues in React/Next.js components — WCAG compliance, ARIA patterns, keyboard navigation, color contrast, screen reader support, and semantic HTML. Use this skill whenever the user asks about accessibility, a11y, WCAG compliance, screen reader support, keyboard navigation, focus management, ARIA attributes, color contrast, or wants to make their UI more accessible. Also trigger when the user mentions inclusive design, assistive technology, or asks to audit a component or page for accessibility problems.
-
shiven0504 Bundle Solana DevUse when user asks to "build a Solana dapp", "write an Anchor program", "create a token", "debug Solana errors", "set up wallet connection", "test my Solana program", "deploy to devnet", or "explain Solana concepts" (rent, accounts, PDAs, CPIs, etc.). End-to-end Solana development playbook covering wallet connection, Anchor/Pinocchio programs, Codama client generation, LiteSVM/Mollusk/Surfpool testing, and security checklists. Integrates with the Solana MCP server for live documentation search. Prefers framework-kit (@solana/client + @solana/react-hooks) for UI, wallet-standard-first connection (incl. ConnectorKit), @solana/kit for client/RPC code, and @solana/web3-compat for legacy boundaries.
-
shiven0504 Skill Perf OptimizerOptimize frontend performance in Next.js/React applications — Core Web Vitals, bundle size reduction, lazy loading, image optimization, code splitting, caching strategies, and rendering performance. Use this skill whenever the user mentions performance, page speed, slow loading, Core Web Vitals, LCP, CLS, INP, bundle size, code splitting, lazy loading, memoization, or wants to make their app faster. Also trigger when the user asks about optimizing images, reducing JavaScript, improving Time to Interactive, or diagnosing rendering bottlenecks.
-
shiven0504 Skill React PatternsGuide React component architecture — composition patterns, custom hooks, props design, state management, and error boundaries. Use this skill whenever the user is designing React components, refactoring component structure, creating custom hooks, deciding how to manage state, working with context providers, building form components, or asking about React best practices and patterns. Also trigger when the user mentions component composition, render props, compound components, controlled vs uncontrolled components, or lifting state.
-
shiven0504 Skill Nextjs ArchitectGuide Next.js App Router architecture decisions — server vs client components, layouts, routing, data fetching, middleware, and project structure. Use this skill whenever the user is building or restructuring a Next.js application, asking about App Router patterns, deciding between server and client components, setting up layouts or route groups, implementing data fetching strategies, or organizing their Next.js project structure. Also use when the user mentions page routing, dynamic routes, parallel routes, intercepting routes, or Next.js middleware.
-
golldyck Bundle Og BrandGenerate a complete OpenGradient-branded website with bold design, micro-animations, and scroll effects. Writes an HTML file and opens it in the browser.
-
allenchinese Skill TaroTaro 跨端项目研发流程与代码落地助手。只要用户提到 Taro/小程序/H5、页面新增或改造、路由与分包、接口封装、环境变量与构建配置、样式适配与 CSS Modules、Taro 生命周期(useDidShow/useLaunch 等)、TARO_ENV/TARO_APP_ENV,就优先使用本技能来按项目约定产出可直接落地的改动方案与代码。
-
allenchinese Skill Skill 2为前端代码自动生成高质量注释(JSDoc/TSDoc/组件注释、函数与模块头注释、关键逻辑行内注释)。当用户提到"添加/完善注释"、"生成JSDoc/TSDoc"、"给React/TS代码补注释"、"为代码写说明"时,请优先使用本技能;当用户给出代码片段、文件路径、或要求"注释风格"、"注释密度"、"中文/英文"偏好时,也应触发。
-
kurianoff Skill Policy ExportExport a reviewed policy document as a Word (.docx) file. Use this skill whenever the user wants to export, download, or generate a Word document from a completed policy review. Triggers on: "export as Word", "download this policy", "generate a docx", "export policy", or any request to produce a final Word document from a reviewed policy. This skill receives the finalized policy content as HTML and converts it directly to a professional Word document. It is designed to be invoked by the soc2-policies skill or the policy-review skill after a review is complete, but can also be used standalone if the user provides HTML policy content.
-
gigbuilder Bundle LotusscriptUse when writing LotusScript code, Domino agents, script libraries, or working with HCL Domino backend classes. Use when encountering NotesSession, NotesDatabase, NotesDocument, or any Notes* classes. Use when building web agents that return HTML or JSON from Domino.
-
salihcantekin Bundle React Native BridgingReact Native Bridging Copilot Skill
-
le-diegz Bundle Frontend DesignBuilds production-grade frontend interfaces with intentional, distinctive aesthetics instead of generic AI output.
-
daianepepes-lab Skill Frontend DesignDesign and implement professional, accessible, and performant frontend interfaces. Use when asked to build UI components, improve design, create layouts, implement design systems, or optimize frontend performance.
-
salihcantekin Bundle Tailwind Styling ExpertTailwind Styling Expert Copilot Skill
-
salihcantekin Bundle Storybook Component GeneratorStorybook Component Generator Copilot Skill
-
salihcantekin Bundle Accessibility Auditing A11YAccessibility Auditing A11Y Copilot Skill
-
alpha-park Bundle Update DocsThis skill should be used when the user asks to "update documentation for my changes", "check docs for this PR", "what docs need updating", "sync docs with code", "scaffold docs for this feature", "document this feature", "review docs completeness", "add docs for this change", "what documentation is affected", "docs impact", or mentions "docs/", "docs/01-app", "docs/02-pages", "MDX", "documentation update", "API reference", ".mdx files". Provides guided workflow for updating Next.js documentation based on code changes.
-
alpha-park Skill Frontend Design---
-
alpha-park Skill Cache ComponentsExpert guidance for Next.js Cache Components and Partial Prerendering (PPR). **PROACTIVE ACTIVATION**: Use this skill automatically when working in Next.js projects that have `cacheComponents: true` in their next.config.ts/next.config.js. When this config is detected, proactively apply Cache Components patterns and best practices to all React Server Component implementations. **DETECTION**: At the start of a session in a Next.js project, check for `cacheComponents: true` in next.config. If enabled, this skill's patterns should guide all component authoring, data fetching, and caching decisions. **USE CASES**: Implementing 'use cache' directive, configuring cache lifetimes with cacheLife(), tagging cached data with cacheTag(), invalidating caches with updateTag()/revalidateTag(), optimizing static vs dynamic content boundaries, debugging cache issues, and reviewing Cache Component implementations.
-
salihcantekin Bundle Typescript React Best PracticesTypescript React Best Practices Copilot Skill
-
alpha-park Bundle Frontend Code ReviewTrigger when the user requests a review of frontend files (e.g., `.tsx`, `.ts`, `.js`). Support both pending-change reviews and focused file reviews while applying the checklist rules.
-
alpha-park Skill Genpark Telegram SniperMonitors Telegram signal groups (crypto, sneaker drops) to instantly front-run or bulk-buy items using the GenPark network before human members can react.
-
harshamendu Bundle ComponentComponent Layer
-
alubiama Bundle Systems ThinkingUse systems thinking to analyze problems driven by dependencies, feedback loops, bottlenecks, local optimizations, and second-order effects. Use when fixing one part changes another, when repeated issues keep resurfacing, or when the real problem is in the surrounding system rather than a single component.
-
rokabytedev Skill ProofrunAI agent verification workflow — verify mobile app behavior using simulator/emulator interaction, capture screenshot evidence, generate interactive HTML reports for human review. Use after implementing a change with UI acceptance criteria, OR when asked to verify app behavior. Triggers on verification requests, "/proofrun", "verify my changes", "test the implementation", "check if it works", or free-form app verification queries.
-
gitstq Skill Super ReviewerAI-powered senior code review engine that delivers production-grade PR analysis. Performs multi-dimensional review covering correctness, security vulnerabilities, performance bottlenecks, code style, architectural design patterns, and accessibility compliance. Supports 30+ languages with framework-specific rules for React, Vue, Angular, Next.js, Express, Django, Spring Boot, and more. Generates structured review reports with severity levels (critical/warning/info), line-level annotations, and actionable fix suggestions. Use when reviewing pull requests, merge requests, or any code changes that need professional-level quality assurance. Trigger keywords: code review, PR review, 代码审查, 代码评审, review code, check code quality, audit code.
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 prompt-contracts, memstack-security-api-audit, sentry-svelte-sdk. 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.