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 Next Best Practices 30Next.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 Frontend Design 104
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 Vue Expert 15
Use when a task needs Vue expertise for component behavior, Composition API patterns, routing, or state and rendering issues.
- tomevault-io Bundle React Native Best Practices 2
提供 React Native 性能优化指南，涵盖 FPS、TTI、打包体积、内存泄漏、重渲染与动画。适用于涉及 Hermes 优化、JS 线程阻塞、桥接开销、FlashList、原生模块或调试卡顿与掉帧的任务。 Use when this capability is needed.
- tomevault-io Bundle Vercel React Best Practices 41
Vercel 出品的 React 与 Next.js 性能优化指南。在编写、评审或重构 React/Next.js 代码时使用，确保采用最优性能模式。触发场景：React 组件、Next.js 页面、数据获取、打包优化、性能改进等任务。 Use when this capability is needed.
- tomevault-io Bundle Frontend Query Mutation 2
Guide for implementing Langflow frontend query and mutation patterns with Axios and TanStack React Query v5. Trigger when creating or updating API hooks in controllers/API/queries, consuming UseRequestProcessor in components, deciding whether to use useQuery or useMutation, handling conditional queries, cache invalidation, mutation error handling, or migrating legacy API calls to the query hook pattern. Use when this capability is needed.
- tomevault-io Bundle Next Cache Components 16
Next.js 16 Cache Components - PPR, use cache directive, cacheLife, cacheTag, updateTag Use when this capability is needed.
- tomevault-io Bundle Next Best Practices 31
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 Vercel React Best Practices 42
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 Remotion Best Practices 20
Video creation in React using Remotion. Covers animations, compositions, audio sync, text effects, 3D integration with Three.js, and rendering. Use when building dynamic video generators, editing timelines, or optimizing Remotion renders. Use when this capability is needed.
- tomevault-io Bundle Vue I18N 2
Vue I18n v9 standards — useI18n, t(), locale switching, lazy loading, and pluralisation. Load when working with Vue I18n. Use when this capability is needed.
- tomevault-io Bundle Frontend Design 109
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 Artifacts Builder 5
Suite of tools for creating elaborate, multi-component Codex.ai 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 React Best Practices 10
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.
- tomevault-io Bundle Frontend Slides 5
Create stunning, animation-rich HTML presentations from scratch or by converting PowerPoint files. Use when the user wants to build a presentation, convert a PPT/PPTX to web, or create slides for a talk/pitch. Helps non-designers discover their aesthetic through visual exploration rather than abstract choices. Use when this capability is needed.
- tomevault-io Bundle Tanstack Query 7
Manage server state with TanStack Query (React Query). Covers data fetching, caching, mutations, optimistic updates, infinite queries, and prefetching. Use for API integration, server state management, and data synchronization in React applications. Use when this capability is needed.
- tomevault-io Bundle Vue Typescript 5
Expert guidance for Vue 3 with TypeScript, Composition API, Pinia state management, and VueUse utilities. Covers typed props, emits, composables, and Vue Router. Use for Vue 3 development, TypeScript integration, and Pinia state management. Use when this capability is needed.
- tomevault-io Bundle Testing 76
Comprehensive testing strategies covering unit, integration, and end-to-end testing with Jest, React Testing Library, and Cypress Use when this capability is needed.
- tomevault-io Bundle Managing Astro Local Env 2
Manage local Airflow environment with Astro CLI (Docker and standalone modes). Use when the user wants to start, stop, or restart Airflow, view logs, query the Airflow API, troubleshoot, or fix environment issues. For project setup, see setting-up-astro-project. Use when this capability is needed.
- tomevault-io Bundle Backend Patterns 5
Backend architecture patterns, API design, database optimization, and server-side best practices for Node.js, Express, NestJS, FastAPI, and Next.js API routes. Use when this capability is needed.
- tomevault-io Bundle Remotion Best Practices 21
Best practices for Remotion - Video creation in React Use when this capability is needed.
- tomevault-io Bundle React Useeffect 3
React useEffect best practices from official docs. Use when writing/reviewing useEffect, useState for derived values, data fetching, or state synchronization. Teaches when NOT to use Effect and better alternatives. Use when this capability is needed.
- tomevault-io Bundle React Native Expert 4
Builds, optimizes, and debugs cross-platform mobile applications with React Native and Expo. Implements navigation hierarchies (tabs, stacks, drawers), configures native modules, optimizes FlatList rendering with memo and useCallback, and handles platform-specific code for iOS and Android. Use when building a React Native or Expo mobile app, setting up navigation, integrating native modules, improving scroll performance, handling SafeArea or keyboard input, or configuring Expo SDK projects.
- tomevault-io Bundle AI Elements 3
Create new AI chat interface components for the ai-elements library following established composable patterns, shadcn/ui integration, and Vercel AI SDK conventions. Use when creating new components in packages/elements/src or when the user asks to add a new component to ai-elements. Use when this capability is needed.
- tomevault-io Bundle Test Frontend 2
Test the web frontend using agent-browser for interactive testing, HTMX verification, and screenshot capture Use when this capability is needed.
- tomevault-io Bundle Frontend Developer 5
Modern frontend development expert specializing in React, Vue, Angular, and responsive web applications Use when this capability is needed.
- tomevault-io Bundle Frontend Engineer 2
Expert frontend engineering with simplified pragmatic architecture, React 19, TanStack ecosystem, and Zustand state management. **ALWAYS use when implementing ANY frontend features.** Use when setting up project structure, creating pages and state management, designing gateway injection patterns, setting up HTTP communication and routing, organizing feature modules, or optimizing performance. **ALWAYS use when implementing Gateway Pattern (Interface + HTTP + Fake), Context API injection, Zustand stores, TanStack Router, or feature-based architecture.** Use when this capability is needed.
- tomevault-io Bundle Tailwind V4 3
Expert guidance for styling with Tailwind CSS v4, including modern utility classes, dark mode implementation, responsive design patterns, and component composition. Use this skill when styling HTML, creating UI components, implementing dark mode, or working with Tailwind CSS v4 in any project. Use when this capability is needed.
- tomevault-io Bundle Accessibility Audit 5
Load PROACTIVELY when task involves accessibility compliance or inclusive design. Use when user says \"check accessibility\", \"audit for WCAG\", \"fix screen reader issues\", \"add keyboard navigation\", or \"check color contrast\". Covers WCAG 2.1 AA compliance across semantic HTML, ARIA patterns, keyboard navigation, screen reader support, color contrast ratios, form accessibility, media alternatives, and focus management. Produces structured audit reports with severity ratings. Use when this capability is needed.
- tomevault-io Bundle Frontend Design 110
Create distinctive, production-grade frontend interfaces with intentional aesthetics, high craft, and non-generic visual identity. Use when building or styling web UIs, components, pages, dashboards, or frontend applications. Use when this capability is needed.
- tomevault-io Bundle Frontend Accessibility 3
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 Frontend Design System 3
フロントエンドUIデザインを洗練された独自性のあるスタイルで生成します。ランディングページ、ダッシュボード、Webアプリケーションのデザイン、UIコンポーネント作成時に使用してください。「AIっぽい」汎用デザインを避け、プロフェッショナルで記憶に残るUIを実現します。 Use when this capability is needed.
- tomevault-io Bundle Nextjs App Router Patterns 3
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 Mobile Design 8
Mobile-first design thinking and decision-making for iOS and Android apps. Touch interaction, performance patterns, platform conventions. Teaches principles, not fixed values. Use when building React Native, Flutter, or native mobile apps. Use when this capability is needed.
- tomevault-io Bundle Frontend Slides 4
Create stunning, animation-rich HTML presentations from scratch or by converting PowerPoint files. Use when the user wants to build a presentation, convert a PPT/PPTX to web, or create slides for a talk/pitch. Helps non-designers discover their aesthetic through visual exploration rather than abstract choices. Use when this capability is needed.
- tomevault-io Bundle Frontend Patterns 6
Frontend development patterns for React, Next.js, state management, performance optimization, and UI best practices. 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 next-best-practices, frontend-design, vue-expert. 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.