frontend-patternslisted

# Frontend Patterns (React + TypeScript) Patterns for building maintainable, performant, accessible React applications. Targets React 18/19 + TypeScript ≥ 5. ## When to Activate - Designing or reviewing React components - Building custom hooks - Picking a state management approach (local / Context / Zustand / Redux / Query) - Data fetching with TanStack Query / SWR / RSC - Performance work (memoization, virtualization, code splitting) - Form handling (React Hook Form, Zod) - Adding a11y to an existing component (focus, ARIA, keyboard) ## Frontend Defaults - **React**: 18+ (concurrent features, Suspense for data). Prefer **function components**. - **TypeScript**: ≥ 5; `strict: true` in `tsconfig.json`. Avoid `any`; prefer `unknown` then narrow. - **State**: local first → lift if shared → Context for cross-tree config → Zustand/Jotai for app state → Query/SWR for server state. Don't reach for Redux unless you actually need its devtools/middleware. - **Server state ≠ client state.** Use TanStack Query / SWR / RSC; don't store fetched data in local `useState`. - **Forms**: React Hook Form + Zod (schema-validated, uncontrolled-by-default, fewer re-renders). - **Styling**: project-driven (Tailwind, CSS Modules, vanilla-extract). Avoid runtime CSS-in-JS in new projects. - **Accessibility**: every interactive element keyboard-reachable; every form input has a label. ## Naming Rules - Components: `PascalCase.tsx` — file name matches default export. - Hooks: `useCamelCase.ts` —