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 Zustand Patterns 2Zustand 5.x state management with slices, middleware, Immer, useShallow, and persistence patterns for React applications. Use when building state management with Zustand. Use when this capability is needed.
- tomevault-io Bundle New Component 2
Create a new Astro component with TypeScript props Use when this capability is needed.
- tomevault-io Bundle Component Management 2
Guidelines for managing zylos components via CLI and C4 channels. Use when installing, upgrading, or uninstalling components, or when user asks about available components. Use when this capability is needed.
- tomevault-io Bundle Vue Testing Best Practices 7
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 Spec 5
Generate UI screen design documents with component lists, state transitions, interactions, and responsive breakpoints. Use when designing screens, creating wireframes, or running /spec. Use when this capability is needed.
- tomevault-io Bundle Accessibility 10
Accessibility ensures websites and applications are usable by everyone, Use when this capability is needed.
- tomevault-io Bundle Web Artifacts Builder 12
Suite of tools for creating elaborate, multi-component AnyCowork HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts. Use when this capability is needed.
- tomevault-io Bundle Theme Factory 14
Toolkit for styling artifacts with a theme. These artifacts can be slides, docs, reportings, HTML landing pages, etc. There are 10 pre-set themes with colors/fonts that you can apply to any artifact that has been creating, or can generate a new theme on-the-fly. Use when this capability is needed.
- tomevault-io Bundle Vue Best Practices 25
MUST be used for Vue.js tasks. Strongly recommends Composition API with `<script setup>` and TypeScript as the standard approach. Covers Vue 3, SSR, Volar, vue-tsc. Load for any Vue, .vue files, Vue Router, Pinia, or Vite with Vue work. ALWAYS use Composition API unless the project explicitly requires Options API. Use when this capability is needed.
- tomevault-io Bundle Nuxt Code Editor 2
遵循项目标准生成和修改 Vue 3、TypeScript 和 SCSS 代码。 Use when this capability is needed.
- tomevault-io Bundle Vue Best Practices 26
MUST be used for Vue.js tasks. Strongly recommends Composition API with `<script setup>` and TypeScript as the standard approach. Covers Vue 3, SSR, Volar, vue-tsc. Load for any Vue, .vue files, Vue Router, Pinia, or Vite with Vue work. ALWAYS use Composition API unless the project explicitly requires Options API. Use when this capability is needed.
- tomevault-io Bundle Frontend Dev Guidelines 2
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 Frontend Design 88
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 Inertia Vue Development 2
Develops Inertia.js v2 Vue client-side applications. Activates when creating Vue pages, forms, or navigation; using <Link>, <Form>, useForm, or router; working with deferred props, prefetching, or polling; or when user mentions Vue with Inertia, Vue pages, Vue forms, or Vue navigation. Use when this capability is needed.
- tomevault-io Bundle Web Design Reviewer 4
This skill enables visual inspection of websites running locally or remotely to identify and fix design issues. Triggers on requests like "review website design", "check the UI", "fix the layout", "find design problems". Detects issues with responsive design, accessibility, visual consistency, and layout breakage, then performs fixes at the source code level. Use when this capability is needed.
- tomevault-io Bundle React Doctor 10
Diagnose and fix React codebase health issues. Use when reviewing React code, fixing performance problems, auditing security, or improving code quality. Use when this capability is needed.
- tomevault-io Bundle Code Quality Checks 2
Quality gates for static HTML/CSS websites (validation, linting, accessibility, link checking) Use when this capability is needed.
- tomevault-io Bundle Vitest Test Creator 2
Test code creation, refactoring, and debugging with Vitest. Supports unit tests (.unit.test.ts) and React component/Hooks tests (.browser.test.tsx). Use when the user says "write tests", "add test cases", "refactor tests", "fix this test according to guidelines", etc. Use for creating, editing, or improving .test.ts/.test.tsx files. Use when this capability is needed.
- tomevault-io Bundle AWS Agentic AI 2
AWS Bedrock AgentCore comprehensive expert for deploying and managing all AgentCore services. Use when working with Gateway, Runtime, Memory, Identity, or any AgentCore component. Covers MCP target deployment, credential management, schema optimization, runtime configuration, memory management, and identity services. Use when this capability is needed.
- tomevault-io Bundle Webapp Testing 29
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 Audit 2
Perform comprehensive WCAG accessibility audits on web components. Use when auditing accessibility, checking a11y compliance, or reviewing UI for keyboard/screen reader support. Use when this capability is needed.
- tomevault-io Bundle Next Cache Components 12
Next.js 16 Cache Components - PPR, use cache directive, cacheLife, cacheTag, updateTag Use when this capability is needed.
- tomevault-io Bundle UI Styling 4
Create beautiful, accessible user interfaces with shadcn/ui components (built on Radix UI + Tailwind), Tailwind CSS utility-first styling, and canvas-based visual designs. Use when building user interfaces, implementing design systems, creating responsive layouts, adding accessible components (dialogs, dropdowns, forms, tables), customizing themes and colors, implementing dark mode, generating visual designs and posters, or establishing consistent styling patterns across applications. Use when this capability is needed.
- tomevault-io Bundle Geniml 3
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. Use when this capability is needed.
- tomevault-io Bundle Vue Best Practices 29
MUST be used for Vue.js tasks. Strongly recommends Composition API with `<script setup>` and TypeScript as the standard approach. Covers Vue 3, SSR, Volar, vue-tsc. Load for any Vue, .vue files, Vue Router, Pinia, or Vite with Vue work. ALWAYS use Composition API unless the project explicitly requires Options API. Use when this capability is needed.
- tomevault-io Bundle Design Review 3
Run structured design reviews that produce actionable findings and clear approval decisions. Use when a design artifact needs formal review for usability, accessibility, consistency, and implementation readiness before handoff or approval; do not use for backend data-model or deployment pipeline decisions. Use when this capability is needed.
- tomevault-io Bundle Next Best Practices 26
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 Web Design Guidelines 20
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 Next Cache Components 13
Next.js 16 缓存组件 - PPR、use cache 指令、cacheLife、cacheTag、updateTag Use when this capability is needed.
- tomevault-io Bundle React Best Practices 8
React best practices e frameworks modernos Use when this capability is needed.
- tomevault-io Bundle Review 51
Review code changes for quality, security, and best practices Use when this capability is needed.
- tomevault-io Bundle Remotion Best Practices 17
Best practices for Remotion - Video creation in React Use when this capability is needed.
- tomevault-io Bundle State Management 3
Load PROACTIVELY when task involves application state, data fetching, or form handling. Use when user says \"manage state\", \"add data fetching\", \"set up Zustand\", \"handle form validation\", or \"add React Query\". Covers server state (TanStack Query with caching, optimistic updates), client state (Zustand stores), form state (React Hook Form with Zod validation), URL state (search params, routing), and choosing between state solutions. Use when this capability is needed.
- tomevault-io Bundle Testing Strategy 6
Load PROACTIVELY when task involves writing tests, improving coverage, or test infrastructure. Use when user says \"add tests\", \"write unit tests\", \"set up E2E testing\", \"improve coverage\", or \"add mocks\". Covers Vitest/Jest unit tests, React Testing Library component tests, Playwright E2E tests, MSW API mocking, test organization and naming, fixture management, coverage targets and thresholds, snapshot testing, and CI integration. Use when this capability is needed.
- tomevault-io Bundle Coding Standards 17
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 89
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.
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 zustand-patterns, new-component, component-management. 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.