| name | discover-frontend |
| description | Automatically discover frontend development skills when working with React, Next.js, UI components, state management, data fetching, forms, accessibility, performance optimization, or SEO. Activates for frontend web development tasks. |
| license | MIT |
| metadata | {"author":"rand","version":"4.0"} |
| compatibility | Designed for Claude Code. Compatible with any agent supporting the Agent Skills format. |
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
- terminal user interfaces
- TUI
- Bubble Tea
- Ratatui
- terminal UI
- text-based interfaces
- ncurses
Available Skills
Quick Reference
The Frontend category contains 16 skills across 2 subcategories (+ elegant-design):
Frontend (11 skills):
- 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)
TUI (5 skills): See ../tui/INDEX.md
Load Full Category Details
Read ../frontend/INDEX.md
Read ../tui/INDEX.md
Common Workflows
New Next.js Application
Sequence: App Router → Components → Data Fetching
Read ../frontend/nextjs-app-router.md # Setup routing, layouts
Read ../frontend/react-component-patterns.md # Build components
Read ../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.)
Read ../frontend/react-component-patterns.md
Read ../frontend/web-accessibility.md
Form Implementation
Sequence: Form Handling → State Management
Read ../frontend/react-form-handling.md # Build forms
Read ../frontend/react-state-management.md # Manage form state
Production Optimization
Sequence: Performance → Accessibility → SEO
Read ../frontend/frontend-performance.md # Optimize bundle
Read ../frontend/web-accessibility.md # Ensure accessibility
Read ../frontend/nextjs-seo.md # Optimize SEO
CPU-Intensive Features & PWAs
Sequence: Workers → Concurrency → Performance
Read ../frontend/web-workers.md # Offload heavy computation
Read ../frontend/browser-concurrency.md # Service Workers, offline support
Read ../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":
Read ../frontend/nextjs-app-router.md
"Create reusable React components":
Read ../frontend/react-component-patterns.md
"Implement global state management":
Read ../frontend/react-state-management.md
"Build a form with validation":
Read ../frontend/react-form-handling.md
"Optimize my app performance":
Read ../frontend/frontend-performance.md
"Make my app accessible":
Read ../frontend/web-accessibility.md
"Improve SEO":
Read ../frontend/nextjs-seo.md
"Offload heavy computation":
Read ../frontend/web-workers.md
"Build a PWA with offline support":
Read ../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:
Read ../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:
Read ../frontend/react-data-fetching.md
Usage Instructions
- Auto-activation: This skill loads automatically when Claude Code detects frontend work
- Browse skills: Run
Read ../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 Read ../frontend/INDEX.md to see full category details, or load specific skills using the bash commands above.
