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.
-
tomevault-io Bundle Frontend Accessibility 5This Skill provides Claude Code with specific guidance on how to adhere to coding standards as they Use when this capability is needed.
- tomevault-io Bundle Accessibility Checker 4
Validate WCAG compliance, check screen reader support, and audit accessibility issues. Use when ensuring accessibility, fixing WCAG violations, or implementing inclusive design. Use when this capability is needed.
- tomevault-io Bundle Performance Optimizer 5
Optimize frontend performance with bundle size reduction, lazy loading, and Core Web Vitals improvements. Use when improving page speed, reducing bundle size, or optimizing Core Web Vitals. Use when this capability is needed.
- tomevault-io Bundle Test Driven Development 41
Use when implementing any feature or bugfix, before writing implementation code
- tomevault-io Bundle Dependency Management 2
Standard instructions for adding or updating backend (pip) and frontend (npm) dependencies. Use when this capability is needed.
- tomevault-io Bundle Web Components 2
Working with the ss-icon Web Component and ss-loader Use when this capability is needed.
- tomevault-io Bundle Frontend Aesthetics 2
Instructions on how to design high quality frontend aesthetics Use when this capability is needed.
- tomevault-io Bundle Vitest Testing Patterns 2
Write tests using Vitest and React Testing Library. Use when creating unit tests, component tests, integration tests, or mocking dependencies. Activates for test file creation, mock patterns, Use when this capability is needed.
- tomevault-io Bundle Code Antipatterns Analysis 2
Analyze codebases for anti-patterns, code smells, and quality issues using ast-grep structural pattern matching. Use when reviewing code quality, identifying technical debt, or performing comprehensive code analysis across JavaScript, TypeScript, Python, Vue, React, or other supported languages. Use when this capability is needed.
- tomevault-io Bundle Tailwind Design System 6
Build scalable design systems with Tailwind CSS v4, design tokens, component libraries, and responsive patterns. Use when creating component libraries, implementing design systems, or standardizing UI patterns. Use when this capability is needed.
- tomevault-io Bundle Vercel React Native Skills 4
React Native and Expo best practices for building performant mobile apps. Use when building React Native components, optimizing list performance, implementing animations, or working with native modules. Triggers on tasks involving React Native, Expo, mobile performance, or native platform APIs. Use when this capability is needed.
- tomevault-io Bundle Backend Patterns 14
Backend architecture patterns, API design, database optimization, and server-side best practices for Node.js, Express, and Next.js API routes. Use when this capability is needed.
- tomevault-io Bundle Coding Standards 28
Universal coding standards, best practices, and patterns for TypeScript, JavaScript, React, and Node.js development. Use when this capability is needed.
- tomevault-io Bundle Frontend Design 136
Create 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. Use when this capability is needed.
- tomevault-io Bundle Next Cache Components 20
Next.js 16 Cache Components - PPR, use cache directive, cacheLife, cacheTag, updateTag. Use when this capability is needed.
- tomevault-io Bundle Langchain Agents 3
Create and use LangChain agents with createAgent - includes agent loops, ReAct pattern, tool execution, and state management Use when this capability is needed.
- tomevault-io Bundle React Native Performance 2
Optimization strategies for smooth 60fps mobile apps. Use when this capability is needed.
- tomevault-io Bundle React Native Skills 3
React Native patterns, navigation, and best practices for cross-platform mobile Use when this capability is needed.
- tomevault-io Bundle React Native Mobile 5
Build React Native mobile apps with Expo or React Native CLI, NativeWind (Tailwind), React Navigation, and Zustand. Use when creating iOS/Android apps, mobile UI, navigation, or native features. Use when this capability is needed.
- tomevault-io Bundle Flutter Dart Code Review 5
Library-agnostic Flutter/Dart code review checklist covering widget best practices, state management patterns, Dart idioms, performance, accessibility, security, and clean architecture. Use when this capability is needed.
- tomevault-io Bundle Web Designer 4
Activate when user needs UI/UX design work - interface design, user research, design systems, accessibility. Activate when @Web-Designer is mentioned or work requires visual design or user experience expertise. Use when this capability is needed.
- tomevault-io Bundle Nextjs Server Components 2
Next.js App Router Server Components, Client Components, layouts, data fetching, and Server Actions. Use when working with Next.js app directory, component boundaries, or data fetching patterns. Use when this capability is needed.
- tomevault-io Bundle Accessibility Checker 5
Checks code for accessibility issues including missing alt text, poor color contrast, missing ARIA labels, keyboard navigation issues, screen reader compatibility, and focus management. Returns structured accessibility issue reports with WCAG compliance information. Use when this capability is needed.
- tomevault-io Bundle Vue Options API Best Practices 4
Vue 3 Options API style (data(), methods, this context). Each reference shows Options API solution only. Use when this capability is needed.
- tomevault-io Bundle Plugin Creator 5
Guide for creating Claude Code plugins, including directory structure, manifest configuration, component types, and initialization scripts. Use when users want to create, build, or understand Claude Code plugins. Use when this capability is needed.
- tomevault-io Bundle Documentation Lookup 17
Use up-to-date library and framework docs via Context7 MCP instead of training data. Activates for setup questions, API references, code examples, or when the user names a framework (e.g. React, Next.js, Prisma). Use when this capability is needed.
- tomevault-io Bundle Gemini Delegate 4
Use when Claude is about to perform tasks that can be delegated to the Gemini CLI to save Anthropic PRO tokens. Trigger phrases include "summarise this", "format this JSON/YAML", "generate boilerplate", "write this function", "research this topic", "find information about", "analyse this file", "generate this code", "create a UI component", "build a landing page". Always run the deterministic validation pipeline via delegate scripts — Claude does not read Gemini output on the happy path.
- tomevault-io Bundle Refactoring UI 2
Professional UI design principles using Tailwind CSS and shadcn/ui. Use this skill when creating web interfaces, React components, HTML layouts, landing pages, dashboards, or any visual UI work. Applies Refactoring UI principles via Tailwind utilities and shadcn components for polished, professional designs. Triggers when building UI components, styling interfaces, creating layouts, designing forms, or when user wants something to look better or more professional. Use when this capability is needed.
- tomevault-io Bundle Accessibility Wcag 2
Web accessibility patterns for WCAG 2.2 compliance including ARIA, keyboard navigation, screen readers, and testing Use when this capability is needed.
- tomevault-io Bundle Mobile Development 4
Mobile development patterns for React Native and Flutter including navigation, state management, and responsive design Use when this capability is needed.
- tomevault-io Bundle Backstage Frontend Plugin 2
Build Backstage frontend plugins with the new Frontend System. Use when this capability is needed.
- tomevault-io Bundle Unsplash Image Finder 2
Use this skill when you need to find and optimize images from Unsplash for web pages. This skill searches for images using the Unsplash API and provides optimized URLs with appropriate parameters.
- tomevault-io Bundle Dev Specialismshashbrown Core 2
Building LLM-powered React applications with the Hashbrown library. Use when the user asks to (1) Build generative UI where LLMs render React components, (2) Add client-side tool calling for LLM-app interaction, (3) Stream LLM responses in React applications, (4) Execute LLM-generated JavaScript safely in a sandbox, (5) Build browser agents or AI-powered UIs with hashbrown, (6) Control React UI from LLM output, (7) Integrate with LLM providers like OpenAI, Anthropic, Google, Azure, Bedrock, or Ollama in React apps, (8) Create chatbots, form builders, predictive text inputs, or multi-threaded conversations with LLMs, (9) Transform natural language to structured data in TypeScript React applications. Use when this capability is needed.
- tomevault-io Bundle Docker Containerization 3
This skill should be used when containerizing applications with Docker, creating Dockerfiles, docker-compose configurations, or deploying containers to various platforms. Ideal for Next.js, React, Node.js applications requiring containerization for development, production, or CI/CD pipelines. Use this skill when users need Docker configurations, multi-stage builds, container orchestration, or deployment to Kubernetes, ECS, Cloud Run, etc. Use when this capability is needed.
- tomevault-io Bundle Test Driven Development 34
TDD overview and language router. Use when you need to write tests first before implementation. Routes to tdd-java for Java/Maven projects or tdd-react for React/TypeScript projects. Covers the Red-Green-Refactor cycle, test naming, and when to stop writing tests. Use when this capability is needed.
- tomevault-io Bundle React Patterns 12
React 19 patterns including Server Components, Actions, Suspense, hooks, and component composition Use when this capability is needed.
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 frontend-accessibility, accessibility-checker, performance-optimizer. 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.