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.
Web & Frontend
1,641 skills
alunadev API Design Principles
Designs REST and GraphQL APIs following production best practices for resource naming, error handling, versioning, authentication, and documentation. Use this skill when designing new API endpoints, reviewing API contracts, implementing GraphQL schemas, establishing API conventions for a project, or writing API documentation. Apply when creating any route in Next.js API routes or route handlers, any Supabase Edge Function, or any backend endpoint — even if it starts small, these patterns prevent painful rewrites later.
3
alunadev Applying Web Design Guidelines
Audits and enforces web interface standards covering accessibility, performance, UX, and code quality from Vercel Engineering's Web Interface Guidelines. Use this skill when reviewing UI code, checking accessibility compliance, auditing design implementations, running pre-merge frontend checks, or when someone asks to "review my UI", "check accessibility", "check my site", "audit design", or "is this component correct". Apply proactively when writing form elements, interactive components, images, animations, or anything that users directly touch — these guidelines prevent common mistakes before they reach production.
3 · bundle
subvisual Build Lofi
Use when a feature's screens and flows are drafted and the design phase needs a navigable wireframe — a multi-screen greyscale Astro prototype where buttons and links actually work, suitable for the design gate and moderated user testing. In the A-Team pipeline it is conducted by ateam-design and consumes design.md's
0 · bundle
matrixx0070 Qt UI Design
Design a Qt Quick (QML) user interface with sound layouts, theming, responsiveness, and accessibility.
0
levalencia Geniml
This skill should be used when working with genomic interval data (BED files) for machine learning tasks. Use for training region embeddings (Region2Vec, BEDspace), single-cell ATAC-seq analysis (scEmbed), building consensus peaks (universes), or any ML-based analysis of genomic regions. Applies to BED file collections, scATAC-seq data, chromatin accessibility datasets, and region-based genomic feature learning.
3 · bundle
heath-gtm Mutual Action Plan
Turn "let's stay in touch" into a dated plan to signature that you and the champion own together. Lays out every milestone from today to signed, with an owner and a date on each, plus the exit criteria that say the deal is real. Written to send, so the buyer can react to something concrete. Built for B2B sales teams, customizable to your process and your CRM. Trigger on "build a mutual action plan", "close plan", "MAP for this deal", "path to signature", "what are the next steps", or any late-stage deal you need to drive.
0 · bundle
jantoniofc Tools UI
Tool lifecycle UI components for React/Next.js from ui.inference.sh. Display tool calls: pending, progress, approval required, results. Capabilities: tool status, progress indicators, approval flows, results display. Use for: showing agent tool calls, human-in-the-loop approvals, tool output. Triggers: tool ui, tool calls, tool status, tool approval, tool results, agent tools, mcp tools ui, function calling ui, tool lifecycle, tool pending
6 · bundle
landonschropp Testing React
Use when writing or modifying tests for React hooks.
1
thedixitjain Astro
Build content-focused websites with Astro — zero JS by default, islands architecture, multi-framework components, and Markdown/MDX support.
2
inehemiasm Firebase App Hosting Basics
Deploy and manage web apps with Firebase App Hosting. Use this skill when deploying Next.js/Angular apps with backends.
0 · bundle
mit-network Wiki QA
Answer repository questions grounded entirely in source code evidence. Use when user asks a question about the codebase, user wants to understand a specific file, function, or component, or user asks "how does X work" or "where is Y defined".
2
mit-network Fp React
Practical patterns for using fp-ts with React - hooks, state, forms, data fetching. Works with React 18/19, Next.js 14/15.
2
loopyluci Sketch
Throwaway HTML mockups: 2-3 design variants to compare.
1
loopyluci React Forms
Use when implementing react forms.
1
nickgallick Vercel QA
Senior human-style UAT and product QA for Vercel-deployed Next.js + Supabase apps. Use when Nick asks to test an app, QA a deploy, check for bugs, run E2E/UAT, smoke test, validate signup/login flows, test a feature, or assess whether a URL is ready for users. Always start by understanding the product and source code before browser testing when code is available.
0 · bundle
nickgallick Nick API Test Builder
API backend test generation for Nick's stack, especially Next.js App Router APIs with Supabase-aware auth assumptions. Use when testing backend routes, generating API test suites, validating authenticated vs unauthenticated access, checking malformed inputs, or building route-by-route backend coverage for projects that use /app/api or /pages/api.
0 · bundle
nickgallick Playwright Skill Safe
Secure and powerful Playwright browser automation for testing websites, checking deploys, taking screenshots, filling forms, validating login flows, responsive QA, deploy QA, accessibility smoke checks, and browser-based verification. Use when Nick asks to test a page, verify a deployment, automate browser interactions, capture screenshots, inspect console errors, check mobile/desktop rendering, or run real Chromium-based browser checks.
0 · bundle
nickgallick Stitch Design
Generate professional UI designs using Google Stitch before building any frontend. Use this skill when building apps, websites, dashboards, landing pages, or any user-facing interface.
0
nickgallick Code Smells
Classic code quality indicators — function length, naming, duplication, nesting, magic values, dead code, and React-specific smells. Adapted from Clean Code and Airbnb style guide.
0
nickgallick React Nextjs
React & Next.js — Forge Skill
0
nickgallick Aso Playbook
App Store Optimization for mobile launches (iOS App Store, Google Play). Use when preparing a mobile app launch, optimizing app store listings, planning screenshot sequences, writing app store copy, doing keyword research for app stores, planning preview videos, managing reviews, or A/B testing app store assets. Relevant for Expo/React Native apps going to stores. Not for web-only products.
0 · bundle
nickgallick Visual Review
Automated visual design review — screenshot V0 demo URLs or local HTML, analyze rendered output, and validate against brand system. Works with both V0 live previews and Stitch-generated HTML.
0
chen-yu-hao Remotion
Best practices and comprehensive guide for Remotion - programmatic video creation in React with animations, compositions, and media handling
5 · bundle
chen-yu-hao Geniml
This skill should be used when working with genomic interval data (BED files) for machine learning tasks. Use for training region embeddings (Region2Vec, BEDspace), single-cell ATAC-seq analysis (scEmbed), building consensus peaks (universes), or any ML-based analysis of genomic regions. Applies to BED file collections, scATAC-seq data, chromatin accessibility datasets, and region-based genomic feature learning.
5 · bundle
chen-yu-hao Markitdown
Convert files and office documents to Markdown. Supports PDF, DOCX, PPTX, XLSX, images (with OCR), audio (with transcription), HTML, CSV, JSON, XML, ZIP, YouTube URLs, EPubs and more.
5 · bundle
om-scogo Shadcn
Manages shadcn components and projects — adding, searching, fixing, debugging, styling, and composing UI, including chat interfaces. Provides project context, component docs, and usage examples. Applies when working with shadcn/ui, component registries, presets, --preset codes, or any project with a components.json file. Also triggers for "shadcn init", "create an app with --preset", or "switch to --preset".
0 · bundle
om-scogo Nuxt
Nuxt full-stack Vue framework with SSR, auto-imports, and file-based routing. Use when working with Nuxt apps, server routes, useFetch, middleware, or hybrid rendering.
0 · bundle
om-scogo Next
Next.js framework for building React applications with App Router, Server Components, and optimized performance. Use when working with Next.js apps, routing, data fetching, caching, Server Actions, or building full-stack React applications.
0 · bundle
om-scogo Edgeone
Deploy HTML content to EdgeOne Pages, return the public URL.
0 · bundle
om-scogo Unocss
UnoCSS instant atomic CSS engine, superset of Tailwind CSS. Use when configuring UnoCSS, writing utility rules, shortcuts, or working with presets like Wind, Icons, Attributify.
0 · bundle
om-scogo CSS
Best practices for CSS development including modern layout techniques, naming conventions, theming, and maintainable stylesheet architecture
0 · bundle
om-scogo HTML
Guidelines for semantic HTML markup, document structure, forms, accessibility attributes, and modern HTML best practices
0 · bundle
om-scogo Htmx
HTMX development guidelines for building dynamic web applications with minimal JavaScript using HTML attributes.
0 · bundle
neekware Senior QA
Generates unit tests, integration tests, and E2E tests for React/Next.js applications. Scans components to create Jest + React Testing Library test stubs, analyzes Istanbul/LCOV coverage reports to surface gaps, scaffolds Playwright test files from Next.js routes, mocks API calls with MSW, creates test fixtures, and configures test runners. Use when the user asks to "generate tests", "write unit tests", "analyze test coverage", "scaffold E2E tests", "set up Playwright", "configure Jest", "implement testing patterns", or "improve test quality".
0 · bundle
neekware A11Y Audit
Accessibility audit skill for scanning, fixing, and verifying WCAG 2.2 Level A and AA compliance across React, Next.js, Vue, Angular, Svelte, and plain HTML codebases. Use when auditing accessibility, fixing a11y violations, checking color contrast, generating compliance reports, or integrating accessibility checks into CI/CD pipelines.
0 · bundle
neekware Saas Scaffolder
Generates 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.
0 · bundle
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 a11y-audit, applying-web-design-guidelines, tools-ui. Rankings shift as installs change; sort this page by "Most downloaded" 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 add <owner>/<name>, or copy the file into your agent's skills directory.