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):

1. react-component-patterns - Component design, composition, hooks, performance
2. nextjs-app-router - Next.js 14+ App Router, Server Components, routing
3. react-state-management - Context, Zustand, Redux Toolkit patterns
4. react-data-fetching - SWR, React Query, Server Actions, data patterns
5. react-form-handling - React Hook Form, Zod validation, form patterns
6. web-accessibility - WCAG 2.1 AA compliance, ARIA, keyboard navigation
7. frontend-performance - Bundle optimization, Core Web Vitals, code splitting
8. nextjs-seo - SEO with Next.js, metadata API, structured data
9. web-workers - Web Workers API, message passing, offloading computation
10. browser-concurrency - Service Workers, SharedWorkers, Worklets, PWAs
11. 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 advance

...