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 Design 56Create distinctive, production-grade frontends by composing design dimensions and tech-specific implementations Use when this capability is needed.
- tomevault-io Bundle Flutter UI 3
Flutter UI skill hub for responsive/adaptive layouts (phones/tablets/desktop/web), Material 3/Cupertino, foldables, accessibility, animations, and design systems. Use when this capability is needed.
- tomevault-io Bundle React Doctor 6
Run after making React changes to catch issues early. Use when reviewing code, finishing a feature, or fixing bugs in a React project. Use when this capability is needed.
- tomevault-io Bundle React Testing 3
WHEN testing React components/hooks/context with React Testing Library; NOT e2e; covers renderHook, providers, forms, and anti-patterns. Use when this capability is needed.
- tomevault-io Bundle Frontend Design 57
Create distinctive, production-grade frontend interfaces. Use in bootstrap pipeline for design docs, or as specialist for UI task implementation. Use when this capability is needed.
- tomevault-io Bundle Agent Browser 22
CLI tool for AI agents to browse the web, interact with UI elements, and analyze frontend applications. Supports navigation, clicking, typing, and capturing snapshots for accessibility analysis. Use when this capability is needed.
- tomevault-io Bundle Tailwind CSS 3
This skill should be used when the user asks to "style with Tailwind", "add Tailwind classes", "fix Tailwind styles", "use tailwind-variants", "add animations with tw-animate-css", "configure Tailwind v4", "migrate to Tailwind v4", or mentions Tailwind utilities, CSS classes, responsive design, dark mode, gradients, design tokens, or CSS Modules. Use when this capability is needed.
- tomevault-io Bundle Next Cache Components 4
Next.js 16 Cache Components - PPR, use cache directive, cacheLife, cacheTag, updateTag Use when this capability is needed.
- tomevault-io Bundle Web Design Guidelines 12
Review 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". Use when this capability is needed.
- tomevault-io Bundle React Best Practices 3
Comprehensive React and Next.js performance optimization guide with 40+ rules for eliminating waterfalls, optimizing bundles, and improving rendering. Use when optimizing React apps, reviewing performance, or refactoring components. Use when this capability is needed.
- tomevault-io Bundle React Doctor 7
Use when finishing a feature, fixing a bug, before committing React code, or when the user types `/doctor`, asks to scan, triage, or clean up React diagnostics. Covers lint, accessibility, bundle size, architecture. Includes a regression check and a full local-triage workflow that fetches the canonical playbook.
- tomevault-io Bundle Vue Components 2
Components with Vue. building components. Use when this capability is needed.
- tomevault-io Bundle Webapp Testing 12
Toolkit for interacting with and testing local web applications using Playwright. Supports verifying frontend functionality, debugging UI behavior, capturing browser screenshots, and viewing browser logs. Use when this capability is needed.
- tomevault-io Bundle React Hooks 2
Best practices for React Hooks usage and custom hook creation. Use when this capability is needed.
- tomevault-io Bundle Testing Library 2
Testing Library user-centric testing. Use for React testing. Use when this capability is needed.
- tomevault-io Bundle Frontend Design 60
Create distinctive, production-grade frontend interfaces with high design quality. Use when building web components, pages, applications, or styling/beautifying any web UI. Generates creative, polished code following Design Token methodology and progressive disclosure architecture. Use when this capability is needed.
- tomevault-io Bundle React Best Practices 5
React 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. Use when this capability is needed.
- tomevault-io Bundle Vercel React Best Practices 30
React 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. Use when this capability is needed.
- tomevault-io Bundle Vue Expert 9
Expert in Vue.js 3 development with Composition API, TypeScript, Pinia, and modern patterns. Use for Vue component development and best practices. Use when this capability is needed.
- tomevault-io Bundle Web Design Guidelines 14
Review 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".
- tomevault-io Bundle Frontend Dev 4
Manages local web server lifecycle and enables web page development with Playwright MCP. Use when developing HTML/CSS/JS, building web pages, viewing web pages, testing UI interactions, verifying renders, debugging frontend issues, or iterating on web design. Covers build, startup, shutdown, and browser-based testing workflows.
- tomevault-io Bundle React Expert 5
Use when building React 18+ applications in .jsx or .tsx files, Next.js App Router projects, or create-react-app setups. Creates components, implements custom hooks, debugs rendering issues, migrates class components to functional, and implements state management. Invoke for Server Components, Suspense boundaries, useActionState forms, performance optimization, or React 19 features.
- tomevault-io Bundle Developer 9
Comprehensive full-stack development for web, mobile, and game projects. Handles frontend (React/Vue/Angular), backend (Node.js/Python/Go/Java), mobile (Flutter/React Native/Swift/Kotlin), and game development (Unity/Unreal/Godot). Use when user asks to build, create, develop, implement, debug, or fix any web, mobile, or game project. Do NOT use for design-only tasks (use frontend-design or ui-ux-pro-max instead). Use when this capability is needed.
- tomevault-io Bundle Vue 49
Use when editing .vue files, creating Vue 3 components, writing composables, or testing Vue code - provides Composition API patterns, props/emits best practices, VueUse integration, and reactive destructuring guidance
- tomevault-io Bundle Orchestrate 7
Spawn parallel worker terminals to execute multi-domain tasks concurrently. Use when 3+ independent tasks span 2+ domains (frontend, backend, testing, security, etc.) Use when this capability is needed.
- tomevault-io Bundle Vue Conventions 2
Vue/Nuxt code conventions for SFC structure, props, state, template directives, and composables. Load whenever writing or editing Vue Single-File Components (.vue) or Nuxt-specific code anywhere in this repo — components, pages, layouts, composables, or plugins. Use when this capability is needed.
- tomevault-io Bundle Frontend Design 61
Create 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. Use when this capability is needed.
- tomevault-io Bundle Effect Best Practices 2
Enforces Effect-TS patterns for services, errors, layers, and atoms. Use when writing code with Effect.Service, Schema.TaggedError, Layer composition, or effect-atom React components. Use when this capability is needed.
- tomevault-io Bundle Telegram React 2
Add Telegram reaction directives in assistant replies. Use when the user asks for Telegram reaction tags, react directives, emoji reactions, or wants reply text to include [react:<emoji>] metadata. Trigger phrases include "telegram react", "reaction directive", "add [react]", "emoji reaction", "react tag", and "telegram reply format". Use when this capability is needed.
- tomevault-io Bundle React Frontend 2
Provides best practices for building React applications with TypeScript and Tailwind CSS, covering component design, state management, data fetching, forms, performance, and accessibility. Use when building or modifying React frontend components, hooks, or pages.
- tomevault-io Bundle React 13
React and TypeScript development with Tailwind, shadcn/ui, and modern patterns Use when this capability is needed.
- tomevault-io Bundle Frontend Design 62
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 Best Practices 10
Next.js best practices - file conventions, RSC boundaries, data patterns, async APIs, metadata, error handling, route handlers, image/font optimization, bundling Use when this capability is needed.
- tomevault-io Bundle Openspec Bulk Archive Change 22
Archive multiple completed changes at once. Use when archiving several parallel changes. Use when this capability is needed.
- tomevault-io Bundle Vercel React Best Practices 26
React 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. Use when this capability is needed.
- tomevault-io Bundle Opentui 7
Comprehensive OpenTUI skill for building terminal user interfaces. Covers the core imperative API, React reconciler, and Solid reconciler. Use for any TUI development task including components, layout, keyboard handling, animations, and testing. 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-design, flutter-ui, react-doctor. 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.