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.

discover-frontend