Frontend Skills Discovery
Provides automatic access to comprehensive frontend development skills.
When This Skill Activates
This skill auto-activates when you're working with:
React component development Next.js applications and App Router State management (Context, Zustand, Redux) Data fetching (SWR, React Query, Server Actions) Form handling and validation Web accessibility (WCAG, ARIA) Frontend performance optimization SEO and metadata UI/UX design implementation Available Skills Quick Reference
The Frontend category contains 10 core skills (+ elegant-design):
react-component-patterns - Component design, composition, hooks, performance nextjs-app-router - Next.js 14+ App Router, Server Components, routing react-state-management - Context, Zustand, Redux Toolkit patterns react-data-fetching - SWR, React Query, Server Actions, data patterns react-form-handling - React Hook Form, Zod validation, form patterns web-accessibility - WCAG 2.1 AA compliance, ARIA, keyboard navigation frontend-performance - Bundle optimization, Core Web Vitals, code splitting nextjs-seo - SEO with Next.js, metadata API, structured data web-workers - Web Workers API, message passing, offloading computation browser-concurrency - Service Workers, SharedWorkers, Worklets, PWAs elegant-design/SKILL.md - World-class accessible interfaces (separate Agent Skill) Load Full Category Details
For complete descriptions and workflows:
cat ~/.claude/skills/frontend/INDEX.md
This loads the full Frontend category index with:
Detailed skill descriptions Usage triggers for each skill Common workflow combinations Cross-references to related skills Load Specific Skills
Load individual skills as needed:
Core React patterns
cat ~/.claude/skills/frontend/react-component-patterns.md cat ~/.claude/skills/frontend/react-state-management.md cat ~/.claude/skills/frontend/react-data-fetching.md
Next.js specific
cat ~/.claude/skills/frontend/nextjs-app-router.md cat ~/.claude/skills/frontend/nextjs-seo.md
Forms and validation
cat ~/.claude/skills/frontend/react-form-handling.md
Quality and performance
cat ~/.claude/skills/frontend/web-accessibility.md cat ~/.claude/skills/frontend/frontend-performance.md
Concurrency and workers
cat ~/.claude/skills/frontend/web-workers.md cat ~/.claude/skills/frontend/browser-concurrency.md
Design system and UI (Agent Skill - auto-discovered separately)
elegant-design/SKILL.md activates independently for UI design work
Common Workflows New Next.js Application
Sequence: App Router → Components → Data Fetching
cat ~/.claude/skills/frontend/nextjs-app-router.md # Setup routing, layouts cat ~/.claude/skills/frontend/react-component-patterns.md # Build components cat ~/.claude/skills/frontend/react-data-fetching.md # Fetch data
Elegant UI Design
Sequence: Design System → Components → Accessibility
Note: elegant-design auto-activates as separate Agent Skill
for design-focused work (shadcn/ui, accessible interfaces, etc.)
cat ~/.claude/skills/frontend/react-component-patterns.md cat ~/.claude/skills/frontend/web-accessibility.md
Form Implementation
Sequence: Form Handling → State Management
cat ~/.claude/skills/frontend/react-form-handling.md # Build forms cat ~/.claude/skills/frontend/react-state-management.md # Manage form state
Production Optimization
Sequence: Performance → Accessibility → SEO
cat ~/.claude/skills/frontend/frontend-performance.md # Optimize bundle cat ~/.claude/skills/frontend/web-accessibility.md # Ensure accessibility cat ~/.claude/skills/frontend/nextjs-seo.md # Optimize SEO
CPU-Intensive Features & PWAs
Sequence: Workers → Concurrency → Performance
cat ~/.claude/skills/frontend/web-workers.md # Offload heavy computation cat ~/.claude/skills/frontend/browser-concurrency.md # Service Workers, offline support cat ~/.claude/skills/frontend/frontend-performance.md # Optimize overall performance
Skill Selection Guide
React Component Patterns → react-component-patterns.md:
Component architecture and composition Custom hooks Performance optimization (memo, useMemo, useCallback) Design patterns (compound components, render props, HOCs)
Next.js App Router → nextjs-app-router.md:
Server Components vs Client Components Routing and layouts Data fetching patterns Streaming and Suspense Route handlers and API routes
State Management → react-state-management.md:
When to use Context vs external state libraries Zustand for simple global state Redux Toolkit for complex state Server state vs client state
Data Fetching → react-data-fetching.md:
SWR for client-side fetching React Query (TanStack Query) for advanced patterns Next.js Server Actions Data mutation patterns Caching strategies
Forms → react-form-handling.md:
React Hook Form for performance Zod for validation Form state management Error handling File uploads
Accessibility → web-accessibility.md:
WCAG 2.1 AA compliance ARIA attributes Keyboard navigation Screen reader support Color contrast and focus management
Performance → frontend-performance.md:
Bundle size optimization Code splitting and lazy loading Core Web Vitals Image optimization Font optimization Runtime performance
SEO → nextjs-seo.md:
Next.js Metadata API Open Graph and Twitter cards Structured data (JSON-LD) Sitemap and robots.txt Dynamic metadata
Web Workers → web-workers.md:
Offloading heavy computation Web Workers API and message passing Transferable objects for zero-copy React integration with custom hooks Worker pools for parallel processing TypeScript type safety
Browser Concurrency → browser-concurrency.md:
Service Workers for offline support and PWAs SharedWorkers for cross-tab state Audio/Paint/Animation Worklets Background sync and push notifications Caching strategies BroadcastChannel for cross-tab messaging Integration with Other Skills
Frontend skills commonly combine with:
API skills (discover-api):
Consuming REST APIs GraphQL client integration API error handling in UI Authentication flows
Testing skills (discover-testing):
Component testing E2E testing with Playwright Visual regression testing Accessibility testing
Design (elegant-design Agent Skill):
shadcn/ui components Accessible design patterns Chat/terminal/code UIs Streaming interfaces Design systems
Database skills (discover-database):
Server Actions with database queries ORM integration in Server Components Real-time data updates
Deployment skills (discover-deployment):
Vercel deployment Netlify deployment Performance monitoring CDN configuration Progressive Loading
This gateway skill enables progressive loading:
Level 1: Gateway loads automatically (you're here now) Level 2: Load category INDEX.md (~4K tokens) for full overview Level 3: Load specific skills (~3-4K tokens each) as needed
Total context: 2K + 4K + skill(s) = 6-12K tokens vs 25K+ for entire index.
Quick Start Examples
"Build a Next.js app with App Router":
cat ~/.claude/skills/frontend/nextjs-app-router.md
"Create reusable React components":
cat ~/.claude/skills/frontend/react-component-patterns.md
"Implement global state management":
cat ~/.claude/skills/frontend/react-state-management.md
"Build a form with validation":
cat ~/.claude/skills/frontend/react-form-handling.md
"Optimize my app performance":
cat ~/.claude/skills/frontend/frontend-performance.md
"Make my app accessible":
cat ~/.claude/skills/frontend/web-accessibility.md
"Improve SEO":
cat ~/.claude/skills/frontend/nextjs-seo.md
"Offload heavy computation":
cat ~/.claude/skills/frontend/web-workers.md
"Build a PWA with offline support":
cat ~/.claude/skills/frontend/browser-concurrency.md
React vs Next.js Decision
Use React (Vite) when:
Building SPAs or client-heavy apps Don't need SSR or SSG Want full control over routing Building component libraries
Use Next.js when:
Need SEO (Server-Side Rendering) Want file-based routing Need API routes Building full-stack apps Want optimal performance out of the box State Management Decision
Use Component State (useState) when:
State is local to a component Simple state that doesn't need sharing
Use Context when:
Sharing state across a few components Theme, auth, or user preferences Not frequently updated
Use Zustand when:
Need global state Want simple API State updates are moderate
Use Redux Toolkit when:
Complex state logic Need middleware (sagas, thunks) Large team with established patterns Time-travel debugging needed
For detailed guidance:
cat ~/.claude/skills/frontend/react-state-management.md
Data Fetching Decision
Server Components (Next.js App Router):
Default choice for Next.js 14+ Fetch on server, zero client JS Direct database access
Server Actions (Next.js):
For mutations and form handling Progressive enhancement Type-safe with TypeScript
SWR:
Client-side data fetching Built-in caching Optimistic updates Focus on user experience
React Query:
Advanced caching strategies Complex data dependencies Offline support DevTools for debugging
For detailed patterns:
cat ~/.claude/skills/frontend/react-data-fetching.md
Usage Instructions Auto-activation: This skill loads automatically when Claude Code detects frontend work Browse skills: Run cat ~/.claude/skills/frontend/INDEX.md for full category overview Load specific skills: Use bash commands above to load individual skills Follow workflows: Use recommended sequences for common patterns elegant-design: Note that elegant-design is a separate Agent Skill that auto-activates for UI design work
Next Steps: Run cat ~/.claude/skills/frontend/INDEX.md to see full category details, or load specific skills using the bash commands above.