discover-frontend

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

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

**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

1. **Auto-activation**: This skill loads automatically when Claude Code detects frontend work
2. **Browse skills**: Run `Read ../frontend/INDEX.md` for full category overview
3. **Load specific skills**: Use bash commands above to load individual skills
4. **Follow workflows**: Use recommended sequences for common patterns
5. **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.