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