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

Documentation Lookup 2

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.

Sep 17
tomevault-io Bundle

React Component 2

生成React组件，包含TypeScript、hooks、状态管理和无障碍最佳实践。支持函数组件、自定义hooks和Context Provider。 Use when this capability is needed.

Sep 17
tomevault-io Bundle

Next Best Practices 5

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.

Sep 17
tomevault-io Bundle

Frontend Design 35

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.

Sep 17
tomevault-io Bundle

Vue Patterns 3

Use when building Vue.js applications. Covers Vue 3 Composition API, composables, Pinia state management, Vue Router, Vite configuration, component design patterns, form handling, and enterprise application architecture.

Sep 17
tomevault-io Bundle

Create Component 3

React Native 컴포넌트를 생성합니다. 새로운 UI 컴포넌트가 필요하거나, 컴포넌트를 만들어달라고 요청할 때 사용합니다. Use when this capability is needed.

Sep 17
tomevault-io Bundle

Vue Patterns 4

Vue.js 3 Composition API patterns, component architecture, reactivity best practices, Pinia state management, Vue Router navigation, and Nuxt SSR patterns. Activates for Vue, Nuxt, Vite, or Pinia projects. Use when this capability is needed.

Sep 17
tomevault-io Bundle

UI Design 8

Opinionated constraints for building better interfaces with agents. Use when building UI components, implementing animations, designing layouts, reviewing frontend accessibility, or working with Tailwind CSS, motion/react, or accessible primitives like Radix/Base UI. Use when this capability is needed.

Sep 17
tomevault-io Bundle

Web Research 4

Research web sources efficiently using markdown.new to convert URLs to clean, token-efficient markdown. Reduces token usage by 80% vs raw HTML. Use when this capability is needed.

Sep 17
tomevault-io Bundle

Shadcn UI 5

Installs, configures, and implements shadcn/ui accessible React components. Use when setting up shadcn/ui, adding components, building forms with React Hook Form and Zod, customising themes, or implementing UI patterns like buttons, dialogs, tables, and data displays. Use when this capability is needed.

Sep 17
tomevault-io Bundle

Mui 2

Material-UI v7 component library patterns including sx prop styling, theme integration, responsive design, and MUI-specific hooks. Use when working with MUI components, styling with sx prop, theme customization, or MUI utilities. Use when this capability is needed.

Sep 17
tomevault-io Bundle

Nextjs I18N 3

Next.js 16 internationalization with next-intl or DIY. Use when implementing i18n, translations, localization, multilingual, language switch, locale routing, or formatters. Use when this capability is needed.

Sep 17
tomevault-io Bundle

React Native 4

React Native cross-platform mobile with JavaScript. Use for iOS/Android. Use when this capability is needed.

Sep 17
tomevault-io Bundle

Code Quality 11

Code-quality review that MUST assess five quality axes and SHOULD apply the ReAct checklist with prioritized fixes. Use when this capability is needed.

Sep 17
tomevault-io Bundle

UI Component 2

Use when creating new UI components under apps/web/src/components/

Sep 17
tomevault-io Bundle

Frontend Design 36

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.

Sep 17
tomevault-io Bundle

Code Review 158

Reviews changes for correctness, security, maintainability, and alignment with Brand-Guard Cursor rules (TypeScript, React, clean code, git flow). Use when reviewing pull requests, diffs, staged changes, or when the user asks for a code review. Use when this capability is needed.

Sep 17
tomevault-io Bundle

Frontend Philosophy 2

Visual & UI philosophy (The 5 Pillars of Intentional UI). Understand deeply to avoid "AI slop" and create distinctive, memorable interfaces. Use when this capability is needed.

Sep 17
tomevault-io Bundle

Reviewer 3

代码审查员,守护质量闸口。对所有部门(Backend/Frontend/SCF/Deploy)的 PR 进行安全、性能、正确性、可维护性、可观测性的系统性审查。遵循证据先行、问题分级、签发修复卡、独立克制的工程基线。适用于收到任一部门提交 PR 或需要质量把关时使用。 Use when this capability is needed.

Sep 17
tomevault-io Bundle

Frontend Design 37

Design and implement distinctive, production-ready frontend interfaces with strong aesthetic direction. Use when asked to create or restyle web pages, components, or applications (HTML/CSS/JS, React, Vue, etc.). Use when this capability is needed.

Sep 17
tomevault-io Bundle

Vue 45

Vue 3 Composition API, script setup macros, reactivity system, and built-in components. Use when writing Vue SFCs, defineProps/defineEmits/defineModel, watchers, or using Transition/Teleport/Suspense/KeepAlive. Use when this capability is needed.

Sep 17
tomevault-io Bundle

Playwright 7

Browser automation and E2E testing with Playwright. Auto-detects dev servers, writes clean test scripts. Test pages, fill forms, take screenshots, check responsive design, validate UX, test login flows, check links, automate any browser task. Use for cross-browser testing, visual regression, API testing, component testing in TypeScript/JavaScript and Python projects. Use when this capability is needed.

Sep 17
tomevault-io Bundle

Shadcn Vue 2

shadcn-vue for Vue/Nuxt with Reka UI components and Tailwind. Use for accessible UI, Auto Form, data tables, charts, or encountering component imports, dark mode, Reka UI errors. Use when this capability is needed.

Sep 17
tomevault-io Bundle

Create Component 5

Create a new React component following project conventions. Use when creating components, UI elements, or reusable modules. Use when this capability is needed.

Sep 17
tomevault-io Bundle

Add Model 4

Add a new model to the SGLang Cookbook, including documentation, sidebar, config generator component, and model YAML configuration. Use when this capability is needed.

Sep 17
tomevault-io Bundle

React Dev 3

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.

Sep 17
tomevault-io Bundle

Testing Strategy 3

Use when designing test architecture, building API test suites, validating API contracts, setting up component or E2E testing, managing test data, debugging flaky tests, reviewing coverage strategy, or organizing test files. Covers test pyramid, mocking (MSW), frontend (React Testing Library, Playwright), and CI integration.

Sep 17
tomevault-io Bundle

Documentation 46

Updating all tailrelay documentation — README, CHANGELOG, release notes, AGENTS.md, SKILL.md files, and webui/README.md. Use when adding user-facing features, releasing a new version, updating component versions, or when any doc's reviewed_at SHA is out of date with HEAD. Use when this capability is needed.

Sep 17
tomevault-io Bundle

Testing 50

React Testing Library, MSW, and component/hook testing patterns. Use when editing test files (.test.tsx, .test.ts, .spec.tsx), test utilities, or MSW handlers. Use when this capability is needed.

Sep 17
tomevault-io Bundle

Vue Expert 7

Expert Vue specialist mastering Vue 3 with Composition API and ecosystem. Use when this capability is needed.

Sep 17
tomevault-io Bundle

Frontend Design 51

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.

Sep 17
tomevault-io Bundle

Agents Sdk 7

Build AI agents on Cloudflare Workers using the Agents SDK. Load when creating stateful agents, durable workflows, real-time WebSocket apps, scheduled tasks, MCP servers, or chat applications. Covers Agent class, state management, callable RPC, Workflows integration, and React hooks. Use when this capability is needed.

Sep 17
tomevault-io Bundle

React Best Practices 2

React and Next.js performance optimization from Vercel Engineering. Use when building React components, optimizing performance, eliminating waterfalls, reducing bundle size, reviewing code for performance issues, or implementing server/client-side optimizations. Use when this capability is needed.

Sep 17
tomevault-io Bundle

Vue Best Practices 8

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.

Sep 17
tomevault-io Bundle

Next Best Practices 8

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.

Sep 17
tomevault-io Bundle

React Performance 2

React/Next.js performance best practices and anti-pattern corrections. Use when writing or reviewing React components, Next.js pages, Server Components, or client-side data fetching code. Covers async waterfall elimination, RSC serialization pitfalls, re-render optimization, hydration issues, and bundle size reduction. Triggers on React, Next.js, RSC, Server Components, Suspense, useMemo, useEffect, or performance-related frontend work. Use when this capability is needed.

Sep 17

Frequently asked questions

What are Web & Frontend agent skills?

Which Web & Frontend skills are most installed?

Popular Web & Frontend skills on SkillMD right now include documentation-lookup, react-component, next-best-practices. 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.