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 Latest NextjsLatest React and Next.js features for past 1.5 years (mid-2024 to 2026) Use when this capability is needed.
- tomevault-io Bundle Frontend App Design
Create distinctive, production-grade React Native Expo interfaces following iOS Human Interface Guidelines and liquid glass design principles. Use when building mobile screens, components, or styling any React Native UI. Use when this capability is needed.
- tomevault-io Bundle React Component Design
React component design workflow for state ownership, composition boundaries, and predictable rendering behavior. Use when React component behavior or structure must be implemented or revised; do not use for repository-wide architecture governance or release policy decisions. Use when this capability is needed.
- tomevault-io Bundle Consulting Chart
공냥이 시각 콘텐츠 스킬 — 컨설팅 차트, 인스타 카드뉴스, 애니메이션 영상을 HTML/CSS 코드로 생성. 5가지 카드뉴스 디자인 테마 선택 가능. Use when this capability is needed.
- tomevault-io Bundle Lauroguedes Mary UI Starter Kit Mary UI Starter Kit
Tailwind CSS Development
- tomevault-io Bundle Dspy Categorical
DSPy compositional prompt optimization with categorical signatures, module chaining, and automated prompt tuning. Use when building declarative LLM programs with typed signatures, composing multi-step reasoning modules (ChainOfThought, ReAct, ProgramOfThought), optimizing prompts with MIPROv2/BootstrapFewShot, or creating modular AI pipelines that separate program logic from prompt engineering. Use when this capability is needed.
- tomevault-io Bundle Web Weather Creator
Master of stylized atmospheric effects using SVG filters and CSS animations. Creates clouds, waves, lightning, rain, fog, aurora borealis, god rays, lens flares, twilight skies, and ocean spray—all Use when this capability is needed.
- tomevault-io Bundle Breaking Apart Systems
Use when decomposing a system into C4-model containers and components. Covers System → Container → Component with approval gates, container-type-specific questions, and design doc integration.
- tomevault-io Bundle Modern React
Modern React patterns and best practices including hooks, composition, and performance. Use when building React components, managing state, writing custom hooks, or when user asks about "React hooks", "component patterns", "React performance", or "state management". Use when this capability is needed.
- tomevault-io Bundle Davila7 Claude Code Templates Nextjs Supabase Auth
Next.js + Supabase Auth
- tomevault-io Bundle Integrating Zod Frameworks
Integrate Zod v4 with React Hook Form, Next.js, Express, tRPC, and other frameworks for type-safe validation Use when this capability is needed.
- tomevault-io Bundle Reviewing State Management
Review state management patterns for React 19 best practices. Use when reviewing component state, Context usage, or state architecture. Use when this capability is needed.
- tomevault-io Bundle Supporting Custom Elements
Teaches Web Components (Custom Elements) support in React 19, including property vs attribute handling and custom events. Use when integrating Web Components or working with custom HTML elements. Use when this capability is needed.
- tomevault-io Bundle Using Cache Lifecycle Apis
Teach cache lifecycle APIs in Next.js 16 - cacheLife(), cacheTag(), updateTag(), refresh(), revalidateTag(). Use when managing cache invalidation, setting cache policies, or implementing cache tags. Use when this capability is needed.
- tomevault-io Bundle Dopplerkuo A11Y Tw Audit Skill A11Y Tw Audit Skill
台灣無障礙檢測工具（a11y-tw）
- tomevault-io Bundle Agent Dev Services
Start and persist the local .NET API and React frontend on the managed agent runtime (supervisord, system Postgres on 5432). Use when (1) starting backend/frontend for local dev on the agent machine, (2) services died after an agent turn, (3) user asks to run npm run dev or dotnet run persistently, (4) wiring API to non-Docker Postgres on this environment. Use when this capability is needed.
- tomevault-io Bundle Dtsong Frontend QA Skills Component Fix And Verify
Component Fix and Verify
- tomevault-io Bundle React Flow Implementation
Implements React Flow node-based UIs correctly using @xyflow/react. Use when building flow charts, diagrams, visual editors, or node-based applications with React. Covers nodes, edges, handles, custom components, state management, and viewport control. Use when this capability is needed.
- tomevault-io Bundle Dev Typescript Advanced
Advanced TypeScript patterns - generics, utility types, React patterns. Use for complex type scenarios. Use when this capability is needed.
- tomevault-io Bundle CSS Container Queries
Apply CSS container queries for component-based responsive design. Use when implementing responsive components that adapt to their container size rather than viewport size. Use when this capability is needed.
- tomevault-io Bundle Flpbalada My Opencode Config React Useeffect Avoid
React: When Not to Use useEffect
- tomevault-io Bundle File Converter
Convert & transform files - images (resize, format, HEIC), markdown (PDF/HTML), data (CSV/JSON/YAML/TOML/XML), SVG, base64, text encoding. Cross-platform, single & batch mode. This skill should be used when converting file formats, resizing images, generating PDFs from markdown, or transforming data between formats. Use when this capability is needed.
- tomevault-io Bundle Appstore Review
Checks an iOS/iPadOS/macOS app project against Apple's App Store Review Guidelines before submission. Works with native (Swift/Obj-C), Flutter, React Native, Expo, Kotlin Multiplatform, .NET MAUI, Cordova, Ionic, and Unity projects. Use when the user wants to verify their app complies with App Store rules, or when they mention 'app review', 'app store guidelines', 'submission check', or 'review rejection'. Use when this capability is needed.
- tomevault-io Bundle Following The Rules Of Hooks
Fix React Rules of Hooks violations - conditional calls, hooks in loops/callbacks/classes Use when this capability is needed.
- tomevault-io Bundle Implementing Parallel Routes
Teach parallel routes and slot patterns in Next.js 16. Use when implementing parallel routes, working with @slot syntax, or encountering missing default.tsx errors. Use when this capability is needed.
- tomevault-io Bundle Migrating Async Request Apis
Teach async request APIs in Next.js 16 - params, searchParams, cookies(), headers(), draftMode() are now async. Use when migrating from Next.js 15, fixing type errors, or working with request data. Use when this capability is needed.
- tomevault-io Bundle Reviewing Nextjs 16 Patterns
Review code for Next.js 16 compliance - security patterns, caching, breaking changes. Use when reviewing Next.js code, preparing for migration, or auditing for violations. Use when this capability is needed.
- tomevault-io Bundle Create Retry Pattern
Generates Retry pattern for PHP 8.4. Creates resilience component with exponential backoff, jitter, and configurable retry strategies. Includes unit tests.
- tomevault-io Bundle Elementor MCP
Helps with WordPress + Elementor work via the elementor-mcp MCP server — building new pages, editing existing ones, inspecting site state, or exploring what's possible. Asks what the user wants before acting. Use when the user references the Elementor MCP, invokes `/elementor-mcp`, or runs `mcp__elementor__elementor-mcp-*` tools. Also covers initial install of the MCP Adapter + elementor-mcp plugins, app-password auth wiring, schema-loading discipline, and the widget-vs-HTML decision tree. SKIP for Bricks, Divi, Beaver Builder, or non-Elementor WordPress builds.
- tomevault-io Bundle React Native Security
Secure storage, deep linking security, and certificate pinning for mobile apps. Use when this capability is needed.
- tomevault-io Bundle Forceinjection Domain Driven Design Skills Vue Story
---
- tomevault-io Bundle Design Extraction
This skill should be used when the user asks about Storybook, design systems, UI components, extracting HTML, or building interfaces using existing components. Activates for component listing, HTML extraction, theme analysis, or UI assembly. Use when this capability is needed.
- tomevault-io Bundle Frontend Specialist
Frontend development agent for React, Vue, Next.js with modern UI/UX patterns Use when this capability is needed.
- tomevault-io Bundle C4 Architecture Documentation
C4 architecture model for documenting static HTML/CSS websites with MCP server integrations Use when this capability is needed.
- tomevault-io Bundle Vue Test Utils Skilld
ALWAYS use when writing code importing \"@vue/test-utils\". Consult for debugging, best practices, or modifying @vue/test-utils, vue/test-utils, vue test-utils, vue test utils, test-utils, test utils. Use when this capability is needed.
- tomevault-io Bundle Hassanzohdy React Router Mongez React Router Recipes
Recipes
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 latest-nextjs, frontend-app-design, react-component-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.