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 Nextjs App Router Patterns 6Master 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 React Expert 10
在构建需要组件架构、hooks 模式或状态管理的 React 18+ 应用程序时使用。调用时机包括：Server Components、性能优化、Suspense 边界、React 19 特性。 Use when this capability is needed.
- tomevault-io Bundle Frontend Design 129
高品質で記憶に残るフロントエンドUIを設計・実装するスキル。HTML/CSS/JSやReact/Vueのコンポーネント・ページ・アプリの作成/改修、レイアウト/タイポグラフィ/配色/モーション/美的方向性が重要な依頼で使用する。 Use when this capability is needed.
- tomevault-io Bundle Performance Optimization 11
Performance optimization patterns for Next.js applications. Covers bundle analysis, React rendering optimization, database query optimization, Core Web Vitals, image optimization, and caching strategies. Use when this capability is needed.
- tomevault-io Bundle Vue Testing Best Practices 14
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 UI UX Expert 2
Expert UI/UX designer specializing in user-centered design, accessibility (WCAG 2.2), design systems, and responsive interfaces. Use when designing web/mobile applications, implementing accessible interfaces, creating design systems, or conducting usability testing. Use when this capability is needed.
- tomevault-io Bundle Frontend Components 4
Your approach to handling frontend components. Use this skill when working on files where frontend components comes into play. Use when this capability is needed.
- tomevault-io Bundle Frontend Responsive 4
Your approach to handling frontend responsive. Use this skill when working on files where frontend responsive comes into play. Use when this capability is needed.
- tomevault-io Bundle Frontend Design 130
Web UI design workflow with strong visual direction Use when this capability is needed.
- tomevault-io Bundle React Component Generator 3
Generate modern React components with TypeScript, hooks, and accessibility. Use when asked to create React components, UI components, scaffold frontend elements, or build reusable UI. Use when this capability is needed.
- tomevault-io Bundle Frontend Design 131
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 Next Upgrade 7
Upgrade Next.js to the latest version following official migration guides and codemods Use when this capability is needed.
- tomevault-io Bundle Next Best Practices 40
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 Scrape Webpage 4
Scrape webpage content, extract metadata, download images, and prepare for import/migration to AEM Edge Delivery Services. Returns analysis JSON with paths, metadata, cleaned HTML, and local images. Use when this capability is needed.
- tomevault-io Bundle Frontend Design System 5
Comprehensive guide for creating premium, high-fidelity UI layouts using the project's Vue component library and Tailwind CSS. Use when this capability is needed.
- tomevault-io Bundle Vercel React Best Practices 46
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 Web Artifacts Builder 19
Suite of tools for creating elaborate, multi-component claude.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 Native Expert 7
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 Secure Coding 4
Apply secure coding practices when writing, reviewing, or refactoring code in Java Spring/Spring Boot, Django, Flask, FastAPI, Ruby on Rails, React, Vue, Angular, Go, ASP.NET, C, C++, TypeScript, C#, or Terraform. Use this skill whenever the user adds a new endpoint, handles user input, writes a query, sets up authentication/authorization, configures CORS or session cookies, processes file uploads, calls an external URL, renders user-controlled HTML, deserializes data, builds login flows, writes systems/memory-managed code (C/C++), defines infrastructure (Terraform), or asks for a security review of code in any of these languages or frameworks — even when they don't explicitly say "secure" or "security". Also use when reviewing PRs, modifying middleware/filters/interceptors, configuring framework security settings (Spring Security, Django settings, Rails initializers, ASP.NET Identity), tightening tsconfig/compiler flags, writing code that touches secrets, crypto, subprocess execution, raw pointers, or HTTP h
- tomevault-io Bundle Frontend Design 128
You are a frontend designer-engineer, not a layout generator. Use when this capability is needed.
- tomevault-io Bundle Frontend Slides 7
Create stunning, animation-rich HTML presentations from scratch or by converting PowerPoint files. Use when this capability is needed.
- tomevault-io Bundle Senior Frontend 5
Frontend development skill for React, Next.js, TypeScript, and Tailwind CSS applications. Use when building React components, optimizing Next.js performance, analyzing bundle sizes, scaffolding frontend projects, implementing accessibility, or reviewing frontend code quality. Use when this capability is needed.
- tomevault-io Bundle Vue Data UI Skilld 2
Use when working with a user-empowering data visualization Vue 3 components library for eloquent data storytelling. ALWAYS use when writing code importing \"vue-data-ui\". Consult for debugging, best practices, or modifying vue-data-ui, vue data ui.
- tomevault-io Bundle Catppuccin Theming 2
Apply Catppuccin color palettes to configs, stylesheets, and terminal themes. This skill should be used when creating or modifying CSS themes, terminal color schemes, shell prompts (Starship, etc.), or any configuration that requires consistent Catppuccin colors. Covers all four official flavors (Latte, Frappe, Macchiato, Mocha) plus ZK's custom variants (rose, sage, grape, honey, blueberry). Use when this capability is needed.
- tomevault-io Bundle Component Wrapper Architecture 2
Best practices for wrapping shadcn/ui components. Apply when creating 8-bit styled variants of existing shadcn/ui components. Use when this capability is needed.
- tomevault-io Bundle Fluxwing Component Creator 2
Create uxscii components with ASCII art and structured metadata when user wants to create, build, or design UI components. Use when working with .uxm files, when user mentions .uxm components, or when creating buttons, inputs, cards, forms, modals, or navigation. Use when this capability is needed.
- tomevault-io Bundle Web Artifacts Builder 20
Suite of tools for creating elaborate, multi-component claude.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 Web Artifacts Builder 21
Suite of tools for creating elaborate, multi-component claude.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 19
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 Components 3
This Skill provides Claude Code with specific guidance on how to adhere to coding standards as they Use when this capability is needed.
- tomevault-io Bundle Frontend Responsive 3
This Skill provides Claude Code with specific guidance on how to adhere to coding standards as they Use when this capability is needed.
- tomevault-io Bundle Testing Patterns 30
TDD/BDD workflows for FastAPI + React stack with pytest, vitest, and integration testing. Use when writing tests, configuring test runners, or implementing test-driven development. Use when this capability is needed.
- tomevault-io Bundle Component Patterns 3
Implement React component patterns including composition, custom hooks, render props, HOCs, and compound components. Use when building reusable React components, implementing design patterns, or refactoring component architecture. Use when this capability is needed.
- tomevault-io Bundle Frontend Code Review 4
当用户需要对前端代码进行全面审查时使用此技能，包括 React、Vue、Angular 或原生 JavaScript/TypeScript 项目。适用于代码审查、Pull Request 评审、性能审计、安全检查等场景。 Use when this capability is needed.
- tomevault-io Bundle Frontend Dev Guidelines 7
Frontend development guidelines for React/TypeScript applications. Modern patterns including Suspense, lazy loading, useSuspenseQuery, file organization with features directory, styling best practices, routing, 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 React Native Architecture 5
Build production React Native apps with Expo, navigation, native modules, offline sync, and cross-platform patterns. Use when developing mobile apps, implementing native integrations, or architecting React Native projects. 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 nextjs-app-router-patterns, react-expert, frontend-design. 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.