{
  "schema": "https://ai-atoms.com/schemas/skill-v1.json",
  "type": "skill",
  "id": "skill/react-patterns",
  "version": "1.0.0",
  "name": "React Patterns",
  "description": "Modern React patterns and principles. Hooks, composition, performance, TypeScript best practices.",
  "system_prompt_fragment": "# React Patterns\n\n> Principles for building production-ready React applications.\n\n---\n\n## 1. Component Design Principles\n\n### Component Types\n\n| Type | Use | State |\n|------|-----|-------|\n| **Server** | Data fetching, static | None |\n| **Client** | Interactivity | useState, effects |\n| **Presentational** | UI display | Props only |\n| **Container** | Logic/state | Heavy state |\n\n### Design Rules\n\n- One responsibility per component\n- Props down, events up\n- Composition over inheritance\n- Prefer small, focused components\n\n---\n\n## 2. Hook Patterns\n\n### When to Extract Hooks\n\n| Pattern | Extract When |\n|---------|-------------|\n| **useLocalStorage** | Same storage logic needed |\n| **useDebounce** | Multiple debounced values |\n| **useFetch** | Repeated fetch patterns |\n| **useForm** | Complex form state |\n\n### Hook Rules\n\n- Hooks at top level only\n- Same order every render\n- Custom hooks start with \"use\"\n- Clean up effects on unmount\n\n---\n\n## 3. State Management Selection\n\n| Complexity | Solution |\n|------------|----------|\n| Simple | useState, useReducer |\n| Shared local | Context |\n| Server state | React Query, SWR |\n| Complex global | Zustand, Redux Toolkit |\n\n### State Placement\n\n| Scope | Where |\n|-------|-------|\n| Single component | useState |\n| Parent-child | Lift state up |\n| Subtree | Context |\n| App-wide | Global store |\n\n---\n\n## 4. React 19 Patterns\n\n### New Hooks\n\n| Hook | Purpose |\n|------|---------|\n| **useActionState** | Form submission state |\n| **useOptimistic** | Optimistic UI updates |\n| **use** | Read resources in render |\n\n### Compiler Benefits\n\n- Automatic memoization\n- Less manual useMemo/useCallback\n- Focus on pure components\n\n---\n\n## 5. Composition Patterns\n\n### Compound Components\n\n- Parent provides context\n- Children consume context\n- Flexible slot-based composition\n- Example: Tabs, Accordion, Dropdown\n\n### Render Props vs Hooks\n\n| Use Case | Prefer |\n|----------|--------|\n| Reusable logic | Custom hook |\n| Render flexibility | Render props |\n| Cross-cutting | Higher-order component |\n\n---\n\n## 6. Performance Principles\n\n### When to Optimize\n\n| Signal | Action |\n|--------|--------|\n| Slow renders | Profile first |\n| Large lists | Virtualize |\n| Expensive calc | useMemo |\n| Stable callbacks | useCallback |\n\n### Optimization Order\n\n1. Check if actually slow\n2. Profile with DevTools\n3. Identify bottleneck\n4. Apply targeted fix\n\n---\n\n## 7. Error Handling\n\n### Error Boundary Usage\n\n| Scope | Placement |\n|-------|-----------|\n| App-wide | Root level |\n| Feature | Route/feature level |\n| Component | Around risky component |\n\n### Error Recovery\n\n- Show fallback UI\n- Log error\n- Offer retry option\n- Preserve user data\n\n---\n\n## 8. TypeScript Patterns\n\n### Props Typing\n\n| Pattern | Use |\n|---------|-----|\n| Interface | Component props |\n| Type | Unions, complex |\n| Generic | Reusable components |\n\n### Common Types\n\n| Need | Type |\n|------|------|\n| Children | ReactNode |\n| Event handler | MouseEventHandler |\n| Ref | RefObject<Element> |\n\n---\n\n## 9. Testing Principles\n\n| Level | Focus |\n|-------|-------|\n| Unit | Pure functions, hooks |\n| Integration | Component behavior |\n| E2E | User flows |\n\n### Test Priorities\n\n- User-visible behavior\n- Edge cases\n- Error states\n- Accessibility\n\n---\n\n## 10. Anti-Patterns\n\n| ❌ Don't | ✅ Do |\n|----------|-------|\n| Prop drilling deep | Use context |\n| Giant components | Split smaller |\n| useEffect for everything | Server components |\n| Premature optimization | Profile first |\n| Index as key | Stable unique ID |\n\n---\n\n> **Remember:** React is about composition. Build small, combine thoughtfully.\n\n## When to Use\nThis skill is applicable to execute the workflow or actions described in the overview.",
  "applicable_domains": [
    "frontend"
  ],
  "category": "frontend",
  "invocation": [
    "/react-patterns"
  ],
  "authored_by": "claudeskills.in community",
  "source_url": "https://claudeskills.in/skill/react-patterns",
  "provenance": {
    "source": "claudeskills.in",
    "source_url": "https://claudeskills.in/skill/react-patterns",
    "license": "unknown",
    "imported_at": "2026-09-03",
    "notes": "Aggregated by claudeskills.in from community GitHub lists."
  },
  "tags": [
    "claudeskills",
    "frontend"
  ],
  "lifecycle": "draft"
}