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.

thedaviddias Bundle

Frontend Checklist Global

Use when auditing or improving any frontend codebase against the full Front-End Checklist rule corpus through one entry point.

Sep 17
thedaviddias Bundle

Form Field Multiple Labels

Use when reviewing rendered HTML, interactive components, or design-system patterns related to Use a single label for each form field. Check native semantics first, then inspect keyboard behavior, focus flow, accessible names, and screen-reader output where relevant.

Sep 17
thedaviddias Bundle

Label Content Name Mismatch

Use when reviewing rendered HTML, interactive components, or design-system patterns related to Align visible labels with accessible names. Check native semantics first, then inspect keyboard behavior, focus flow, accessible names, and screen-reader output where relevant.

Sep 17
thedaviddias Bundle

Custom Element Accessibility

Use when reviewing custom element class definitions or Web Component source code to check for missing ARIA reflection, keyboard handling, and form association.

Sep 17
thedaviddias Bundle

Identical Links Same Purpose

Use when reviewing rendered HTML, interactive components, or design-system patterns related to Ensure identical links have consistent destinations. Check native semantics first, then inspect keyboard behavior, focus flow, accessible names, and screen-reader output where relevant.

Sep 17
techtideohio Bundle

Techtide AWS Agentcore

Build, test, migrate, integrate, and deploy Amazon Bedrock AgentCore agents. Use for AgentCore runtime, local development, import/migration, deployment, Memory, Gateway/MCP tools, Identity, Observability, Browser, Code Interpreter, policy, and harness-vs-code-path decisions. Load references only when that component is needed.

Sep 17
sethdford Skill

Accessibility Standards

Establish accessibility standards that make products usable for people with disabilities without being an afterthought. Use when building user-facing systems or scaling the product.

Sep 17
sethdford Skill

Accessibility Test Plan

Expert approach to accessibility-test-plan in accessibility testing. Use when working with .

Sep 17
sethdford Skill

Color Contrast Analysis

Expert approach to color-contrast-analysis in accessibility testing. Use when working with .

Sep 17
sethdford Skill

Accessibility Regression

Expert approach to accessibility-regression in accessibility testing. Use when working with .

Sep 17
sethdford Skill

Keyboard Navigation Testing

Verify full keyboard operability of interactive UI elements per WCAG 2.1 SC 2.1.1. Use when testing web or desktop applications for accessibility compliance.

Sep 17
vril-labs Skill

Accessibility Auditor

Scans frontend code and rendered HTML for WCAG 2.1 compliance issues — missing alt text, color contrast, ARIA roles, keyboard navigation. Invoke when asked to check accessibility, audit WCAG compliance, find a11y issues, improve screen reader support, or ensure keyboard navigation works.

Sep 17
vril-labs Skill

Website Building Nextjs

Next.js 16+ specific guidance — app router, Tailwind v4, shadcn/ui, deployment to Vercel. Use alongside the parent website-building skill.

Sep 17
vril-labs Bundle

Website Building Webapp

Fullstack web app skill — Express + Vite + React + Tailwind + shadcn/ui + Drizzle ORM template. Use for SaaS, dashboards, admin panels, e-commerce.

Sep 17
vril-labs Skill

Website Building React Native

React Native & Expo styling guidance — NativeWind, design tokens, navigation, platform-specific UI. Use alongside the parent website-building skill's design foundations.

Sep 17
vril-labs Skill

Svelte

Expert in Svelte and SvelteKit development with modern patterns and SSR

Sep 17
vril-labs Skill

Tanstack Query

Guidelines for using TanStack Query (React Query) for server state management, data fetching, caching, and synchronization

Sep 17
vril-labs Skill

Nuxtjs Vue Typescript

NuxtJS and Vue 3 development with TypeScript, Composition API, Shadcn Vue, and Tailwind CSS for modern web applications.

Sep 17
vril-labs Skill

Zustand State Management

Best practices for Zustand state management in React and Next.js applications with TypeScript.

Sep 17
vril-labs Skill

Text To Speech

Convert text to natural speech with ElevenLabs, DIA TTS, Kokoro, Chatterbox, and more via inference.sh CLI. Models: ElevenLabs (premium, 22+ voices, 32 languages), DIA TTS (conversational), Kokoro TTS, Chatterbox, Higgs Audio, VibeVoice (podcasts). Capabilities: text-to-speech, voice cloning, multi-speaker dialogue, podcast generation, expressive speech. Use for: voiceovers, audiobooks, podcasts, accessibility, video narration, IVR, voice assistants. Triggers: text to speech, tts, voice generation, ai voice, speech synthesis, voice over, generate speech, ai narrator, voice cloning, text to audio, elevenlabs, eleven labs, voice ai, ai voiceover, speech generator, natural voice

Sep 17
vril-labs Skill

Snapshot Tester

Implement snapshot testing — UI and data snapshot validation. Use when testing React components, validating output, or detecting unexpected changes.

Sep 17
vril-labs Skill

Best Practices Checker

Validates code against framework-specific best practices documented in docs/infrastructure/. Checks Effect usage patterns, React 19 conventions, Drizzle ORM patterns, Hono RPC implementations, and other framework-specific guidelines. Identifies anti-patterns and suggests corrections. Use when user requests "check best practices", "validate framework usage", "review code patterns", or mentions framework compliance.

Sep 17
vril-labs Bundle

CSS Best Practices

Guidelines for building modern, performant, and accessible CSS using MDN best practices. Use this when styling components, fixing layout shifts, or optimizing CSS performance.

Sep 17
vril-labs Bundle

Shadcn Best Practices

Best practices for working with shadcn/ui components, imports, theming, and forms. Use when building UI with shadcn, adding components, configuring theming, or creating forms.

Sep 17
thedaviddias Bundle

Ttfb

Use when auditing slow first responses on SSR pages, APIs, or cacheable HTML. Distinguish origin compute time from network latency and CDN cache misses before proposing a fix.

Sep 17
thedaviddias Bundle

Dlitem

Use when reviewing rendered HTML, interactive components, or design-system patterns related to Wrap definition items in a definition list. Check native semantics first, then inspect keyboard behavior, focus flow, accessible names, and screen-reader output where relevant.

Sep 17
thedaviddias Bundle

Article

Use when auditing metadata, crawlability, structured data, or indexability related to Implement valid Article structured data. Verify the rendered HTML and HTTP response rather than relying only on source files.

Sep 17
thedaviddias Bundle

Charset

Use when reviewing templates, rendered HTML, or shared components related to Declare UTF-8 character encoding. Validate the final browser-facing markup, not just the source framework abstraction.

Sep 17
thedaviddias Bundle

Doctype

Use when applies to all HTML documents. Always check the very first line of the raw HTML source (view-source: or DevTools > Network > Response). In SSR frameworks, check the root HTML template (e.g., _document.tsx in Next.js, index.html in Vite/Vue, application.html.erb in Rails). The doctype is not a tag — it is a declaration and does not need a closing tag.

Sep 17
thedaviddias Bundle

New Tab

Use when reviewing HTML or JSX for anchor elements with target='_blank' to verify rel='noopener noreferrer' is present.

Sep 17
thedaviddias Bundle

Sitemap

Use when auditing metadata, crawlability, structured data, or indexability related to Create and submit an XML sitemap. Verify the rendered HTML and HTTP response rather than relying only on source files.

Sep 17
thedaviddias Bundle

404 Page

Use when reviewing templates, rendered HTML, or shared components related to Create a custom 404 error page. Validate the final browser-facing markup, not just the source framework abstraction.

Sep 17
thedaviddias Bundle

CSS Grid

Use when reviewing stylesheets, component styles, and responsive behavior related to Use CSS Grid for two-dimensional layouts. Check the rendered layout across breakpoints and interaction states before proposing a fix.

Sep 17
thedaviddias Bundle

Favicons

Use when reviewing templates, rendered HTML, or shared components related to Implement favicons for all devices. Validate the final browser-facing markup, not just the source framework abstraction.

Sep 17
alivirgo Skill

React

Operational skill for React: function components, hooks discipline, state design, effects, lists/keys, and accessible interactive UI patterns.

Audited Sep 17
alivirgo Skill

Nextjs

Operational skill for Next.js App Router: server vs client components, routing, data fetching/caching, Server Actions awareness, and production build hygiene.

Sep 17

Frequently asked questions

What are Web & Frontend agent skills?

Which Web & Frontend skills are most installed?

Popular Web & Frontend skills on SkillMD right now include frontend-checklist-global, form-field-multiple-labels, label-content-name-mismatch. 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.