frontend-patternslisted

# Frontend Development Patterns Modern frontend patterns for React, React Native, Vue, Next.js, SwiftUI, Flutter, and performant user interfaces. > **Reuse-first** (per `~/.claude/rules-library/common/reuse-first.md`): > Before creating a new component / hook / composable / store / > service, sweep the project's `components/`, `composables/`, > `hooks/`, `lib/`, `stores/`, `services/` directories for an > existing primitive. One source of truth per primitive (one > button, one modal, one toast, one form field, one currency > formatter, one API client). Extend with a prop — never fork. ## When to Activate - Building React components (composition, props, rendering) - Managing state (useState, useReducer, Zustand, Context) - Implementing data fetching (SWR, React Query, server components) - Optimizing performance (memoization, virtualization, code splitting) - Working with forms (validation, controlled inputs, Zod schemas) - Handling client-side routing and navigation - Building accessible, responsive UI patterns ## Component Patterns ### Composition Over Inheritance ```typescript // ✅ GOOD: Component composition interface CardProps { children: React.ReactNode variant?: 'default' | 'outlined' } export function Card({ children, variant = 'default' }: CardProps) { return <div className={`card card-${variant}`}>{children}</div> } export function CardHeader({ children }: { children: React.ReactNode }) { return <div className="card-header">{children}</div> } export