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 Code Exemplars Blueprint Generator 5Technology-agnostic prompt generator that creates customizable AI prompts for scanning codebases and identifying high-quality code exemplars. Supports multiple programming languages (.NET, Java, JavaScript, TypeScript, React, Angular, Python) with configurable analysis depth, categorization methods, and documentation formats to establish coding standards and maintain consistency across development teams. Use when this capability is needed.
- tomevault-io Bundle Context7 Auto Research 5
Automatically fetch latest library/framework documentation for Claude Code via Context7 API. Use when you need up-to-date documentation for libraries and frameworks or asking about React, Next.js, Prisma, or any other popular library. Use when this capability is needed.
- tomevault-io Bundle Radix UI Design System 2
Build accessible design systems with Radix UI primitives. Headless component customization, theming strategies, and compound component patterns for production-grade UI libraries. Use when this capability is needed.
- tomevault-io Bundle React State Management 4
Master modern React state management with Redux Toolkit, Zustand, Jotai, and React Query. Use when setting up global state, managing server state, or choosing between state management solutions. Use when this capability is needed.
- tomevault-io Bundle Tailwind Design System 7
Build production-ready design systems with Tailwind CSS, including design tokens, component variants, responsive patterns, and accessibility. Use when this capability is needed.
- tomevault-io Bundle Vue Best Practices 39
Vue.js performance optimization guidelines for building fast, maintainable applications. This skill should be used when writing, reviewing, or refactoring Vue.js code to ensure optimal performance patterns. Triggers on tasks involving Vue components, reactivity, Composition API, state management, or performance improvements. Use when this capability is needed.
- tomevault-io Bundle React Server Components Framework 2
Use when building Next.js 16+ apps with React Server Components. Covers App Router, Cache Components (replacing experimental_ppr), streaming SSR, Server Actions, and React 19 patterns for server-first architecture.
- tomevault-io Bundle Frontend Code Review 5
Senior-level code review for React 19.2 + Next.js 16 pull requests applying Google, Facebook, and enterprise engineering standards. Use when reviewing frontend PRs, providing code review feedback, checking React/Next.js code quality, or when users request code review for TypeScript, React, or Next.js projects. Ensures production-grade quality, performance, accessibility, and maintainability. Use when this capability is needed.
- tomevault-io Bundle Design Component 2
Design a UI component with specifications for layout, states, interactions, and accessibility. Use when creating new UI components or redesigning existing ones. Use when this capability is needed.
- tomevault-io Bundle Implement Plugin 3
Package and distribute Claude Code plugins with schema-safe manifests, canonical layout, component wiring, and release-ready validation. Use when this capability is needed.
- tomevault-io Bundle Vue Testing Best Practices 15
Use for Vue.js testing. Covers Vitest, Vue Test Utils, component testing, mocking, testing patterns, and Playwright for E2E testing. Use when this capability is needed.
- tomevault-io Bundle React Server Components Framework 3
Design and implement React Server Components with Next.js 15 App Router. Master server-first architecture, streaming SSR, Server Actions, and modern data fetching patterns for 2025+ frontend development. Use when this capability is needed.
- tomevault-io Bundle Nextjs App Router Patterns 8
Master Next.js 14+ App Router with Server Components, streaming, parallel routes, and advanced data fetching. Use when building Next.js applications, implementing SSR/SSG, or optimizing React Server Components. Use when this capability is needed.
- tomevault-io Bundle Vercel Next Deploy 2
Deploy and manage this Next.js app on Vercel (project linking, env vars, preview/prod, domains). Use when the user mentions Vercel, deployment, environment variables, previews, or domains. Use when this capability is needed.
- tomevault-io Bundle Vue Testing 3
Master Vue Testing - Vitest, Vue Test Utils, Component Testing, E2E with Playwright Use when this capability is needed.
- tomevault-io Bundle Documentation 101
Provides templates, style guidelines, and a complete workflow for writing MkDocs documentation, sample pages, and navigation updates for BlazorWebFormsComponents. Covers component doc structure with Web Forms vs Blazor syntax comparisons, migration guide templates, sample page creation in AfterBlazorServerSide with demo and source code sections, NavMenu.razor and ComponentList.razor updates, and README linking. Use when documenting a new or existing BWFC component, creating sample pages with escaped code blocks, updating mkdocs.yml navigation, or following the complete documentation workflow from docs to samples to README.
- tomevault-io Bundle Frontend Dev Guidelines 10
Frontend development guidelines for React/TypeScript applications. Modern patterns including Suspense, lazy loading, useSuspenseQuery, file organization with features directory, MUI v7 styling, TanStack Router, performance optimization, and TypeScript best practices. Use when creating components, pages, features, fetching data, styling, routing, or working with frontend code. Use when this capability is needed.
- tomevault-io Bundle Code Exemplars Blueprint Generator 2
Technology-agnostic prompt generator that creates customizable AI prompts for scanning codebases and identifying high-quality code exemplars. Supports multiple programming languages (.NET, Java, JavaScript, TypeScript, React, Angular, Python) with configurable analysis depth, categorization methods, and documentation formats to establish coding standards and maintain consistency across development teams. Use when this capability is needed.
- tomevault-io Bundle Advanced File Management 2
Advanced file management tools. Includes batch folder creation, batch file moving, file listing, and HTML author extraction. Use when this capability is needed.
- tomevault-io Bundle Testing Patterns 31
Skill for testing the Foundry Agent Accelerator. Use when writing pytest tests for the Python backend, Vitest tests for the React frontend, mocking Azure services, or testing SSE streaming. Use when this capability is needed.
- tomevault-io Bundle Docusaurus Plugins 3
Use when creating Docusaurus plugins (remark, rehype, theme, content, lifecycle) to extend markdown, modify HTML, or add custom functionality
- tomevault-io Bundle Frontend Accessibility 6
Your approach to handling frontend accessibility. Use this skill when working on files where frontend accessibility comes into play. Use when this capability is needed.
- tomevault-io Bundle Webapp Testing 46
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 Accessibility Testing 6
WCAG 2.2 compliance testing, screen reader validation, and inclusive design verification. Use when ensuring legal compliance (ADA, Section 508), testing for disabilities, or building accessible applications for 1 billion disabled users globally. Use when this capability is needed.
- tomevault-io Bundle Next Best Practices 43
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 Code Review 315
Comprehensive code review following industry standards and best practices. Use when reviewing code for quality, security, performance, maintainability, or architectural issues. Covers all programming languages (Python, JavaScript/TypeScript, C#, Java, Rust, Go, C/C++, etc.), frontend frameworks (React, Vue, Angular, Vite), backend frameworks (FastAPI, Flask, Express, Spring, ASP.NET), SOLID principles, microservices architecture, security vulnerabilities (OWASP), and performance optimization. Invoke with `/skill:code-review` or when user asks to review code, PR, diff, or wants feedback on implementation. Use when this capability is needed.
- tomevault-io Bundle Next Best Practices 44
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 Angular UI Patterns 2
Modern Angular UI patterns for loading states, error handling, and data display. Use when building UI components, handling async data, or managing component states. Use when this capability is needed.
- tomevault-io Bundle Frontend UI Dark TS 2
Use when working with a modern dark-themed React UI system using Tailwind CSS and Framer Motion. Designed for dashboards, admin panels, and data-rich applications with glassmorphism effects and tasteful animations.
- tomevault-io Bundle React Modernization 4
Master React version upgrades, class to hooks migration, concurrent features adoption, and codemods for automated transformation. Use when this capability is needed.
- tomevault-io Bundle Tanstack AI Vue Skilld 2
Vue hooks for TanStack AI. ALWAYS use when writing code importing \"@tanstack/ai-vue\". Consult for debugging, best practices, or modifying @tanstack/ai-vue, tanstack/ai-vue, tanstack ai-vue, tanstack ai vue, ai. Use when this capability is needed.
- tomevault-io Bundle Unity Plugin 2
Control Unity Editor via OpenClaw Unity Plugin. Use for Unity game development tasks including scene management, GameObject/Component manipulation, debugging, input simulation, and Play mode control. Triggers on Unity-related requests like inspecting scenes, creating objects, taking screenshots, testing gameplay, or controlling the Editor. Use when this capability is needed.
- tomevault-io Bundle Browser App Creator 2
Creates complete single-file HTML/CSS/JS web apps with localStorage persistence, ADHD-optimized UI (60px+ buttons), dark mode, and offline functionality. Use when user says "create app", "build tool", "make dashboard", or requests any browser-based interface.
- tomevault-io Bundle Backend Patterns 13
Node.js, Express, Next.js API 라우트를 위한 백엔드 아키텍처 패턴, API 설계, 데이터베이스 최적화 및 서버 사이드 모범 사례. Use when this capability is needed.
- tomevault-io Bundle Frontend Design 135
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 Remotion Video Creation 2
Remotion のベストプラクティス - React で動画を作成する。3D、アニメーション、音声、字幕、チャート、トランジションなどをカバーするドメイン固有の29のルール。 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 code-exemplars-blueprint-generator, context7-auto-research, radix-ui-design-system. 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.