discover-frontend

Files (1)

• SKILL.md

SKILL.md (first lines)

# 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

From Patkik/Barcelon_store, MIT.

More from Patkik/Barcelon_store