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 Vue 52Vue.js Composition API, SFC structure, reactivity system, directives, router, Pinia state management, slots, and transitions. Use when building Vue components or applications. Use when this capability is needed.
- tomevault-io Bundle Openai Image Gen 12
Batch-generate images via OpenAI Images API. Random prompt sampler + `index.html` gallery. Use when this capability is needed.
- tomevault-io Bundle React Hooks 4
useCallback、useEffect の正しい使い方、無限ループ防止。Biomeチェック後の修正、Client Component作成時に使用。 Use when this capability is needed.
- tomevault-io Bundle Theme Factory 13
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 artifac... Use when this capability is needed.
- tomevault-io Bundle Remotion Best Practices 13
Best practices for Remotion - Video creation in React Use when this capability is needed.
- tomevault-io Bundle Langchain 14
Framework for building LLM-powered applications with agents, chains, and RAG. Supports multiple providers (OpenAI, Anthropic, Google), 500+ integrations, ReAct agents, tool calling, memory management, and vector store retrieval. Use for building chatbots, question-answering systems, autonomous agents, or RAG applications. Best for rapid prototyping and production deployments. Use when this capability is needed.
- tomevault-io Bundle Vue Best Practices 19
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 Translate App Locales 2
Add or audit full application translations across base locale files and partial i18n namespaces. Use when the user asks to add a new language, fix incomplete translations, remove English fallbacks, verify locale coverage, move language UI, or make future app sections translated in React/TypeScript apps with JSON locale files, especially FreeCut-style src/i18n/locales plus src/i18n/locales/partials structures. Use when this capability is needed.
- tomevault-io Bundle Test Review 4
Use this skill to review unit-tests, component-tests, and integration tests.
- tomevault-io Bundle Add Component 4
Create new Astro or Svelte components with correct patterns. Use proactively when creating new UI components. Use when this capability is needed.
- tomevault-io Bundle Webapp Testing 22
Toolkit for interacting with and testing local web applications using Playwright. Use when verifying frontend functionality, debugging UI behavior, capturing browser screenshots, or viewing browser logs. Use when this capability is needed.
- tomevault-io Bundle Vercel React Best Practices 35
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 13
Use when implementing vue functionality with production-grade patterns and safeguards.
- tomevault-io Bundle Vue Best Practices 20
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 Vercel React Best Practices 36
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 Frontend Components 2
Frontend component architecture - atomic design, file splitting (~300 line target, hard max 400 lines), reusability principles, route-scoped components, and co-located partitions Use when this capability is needed.
- tomevault-io Bundle Vue Best Practices 16
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 Web Design Guidelines 15
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 Markitdown 3
将文件和办公文档转换为 Markdown。支持 PDF、DOCX、PPTX、XLSX、图片（含 OCR）、音频（含转录）、HTML、CSV、JSON、XML、ZIP、YouTube 链接、EPub 等多种格式。 Use when this capability is needed.
- tomevault-io Bundle Vue Jsx Best Practices 2
JSX syntax in Vue (e.g., class vs className, JSX plugin config). Use when this capability is needed.
- tomevault-io Bundle Frontend Design 73
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 Tavily Best Practices 2
Build production-ready Tavily integrations with best practices baked in. Reference documentation for developers using coding assistants (Claude Code, Cursor, etc.) to implement web search, content extraction, crawling, and research in agentic workflows, RAG systems, or autonomous agents. Use when this capability is needed.
- tomevault-io Bundle React State Management 2
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 2
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 Vue Best Practices 17
Vue 3 and Vue.js best practices for TypeScript, vue-tsc, and Volar. This skill should be used when writing, reviewing, or refactoring Vue components to ensure correct typing patterns. Triggers on tasks involving Vue components, props extraction, wrapper components, template type checking, or Volar configuration. Use when this capability is needed.
- tomevault-io Bundle Next Best Practices 15
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 Vue Testing Best Practices 5
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 Intlayer Vue 2
Integrates Intlayer internationalization with Vue.js and Nuxt applications. Use when the user asks to "setup Vue i18n", use the "useIntlayer" composable, or manage translations in Vue components.
- tomevault-io Bundle Env Manager 2
Environment variable validation, security scanning, and management for Next.js, Vite, React, and Node.js applications Use when this capability is needed.
- tomevault-io Bundle Coding Standards 14
Universal coding standards, best practices, and patterns for TypeScript, JavaScript, React, and Node.js development. Use when this capability is needed.
- tomevault-io Bundle Angular Testing 2
Angular testing patterns with Jest and TestBed. Covers unit tests for use cases, queries, services, and components using AAA pattern, mock repositories via InjectionToken, and signal-based component testing. Use when creating .spec.ts files, writing tests, or when the user mentions testing. ALWAYS use when generating test files. Use when this capability is needed.
- tomevault-io Bundle Webapp Testing 20
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 Dev 4
This skill should be used when building React components with TypeScript, typing hooks, handling events, or when React TypeScript, React 19, Server Components are mentioned. Covers type-safe patterns for React 18-19 including generic components, proper event typing, and routing integration (TanStack Router, React Router). Use when this capability is needed.
- tomevault-io Bundle Frontend Design 75
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 Component Development 3
Create and modify React components following project patterns. Use when building UI components, forms, layouts, navigation, or implementing React hooks. Includes DaisyUI, Tailwind CSS, and lucide-react icons. Use when this capability is needed.
- tomevault-io Bundle Vue Best Practices 18
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.
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 vue, openai-image-gen, react-hooks. 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.