pattern-engineer-frontend-standardlisted

# pattern-engineer-frontend-standard ## When to activate Activate when writing or editing React components, hooks, pages, routes, layouts, forms, modals, lists, tables, or navigation in any React-based app (Next.js or Vite). Skip for pure backend code or non-React frontends. ## Project memory overlay After loading this skill, also check `$MAIN_ROOT/.claude/memory/patterns/pattern-engineer-frontend-standard.md` in the consuming project (resolve `MAIN_ROOT="$(dirname "$(git rev-parse --path-format=absolute --git-common-dir)")"`). If present, load it as an **additive overlay** to the rules below; if absent, skip silently. See `memory-convention` for the full contract (additivity, severity floor, conflict surfacing). ## Patterns ### Component design - Composition over inheritance: pass behavior as props, structure as children. - Compound components for related parts (`Tabs` / `Tabs.Tab`) sharing state via internal Context — keep the Context unexported. - Render props / `children` as a function when consumers own the markup but you own the logic. - Throw a clear error when a compound child is used outside its parent. ### Custom hooks - Extract any reusable stateful logic into a `useX` hook. - Return a tuple for 2–3 values; an object once it grows past that. - Wrap callbacks in `useCallback` so consumers can pass them to memoized children. - Async data fetching: use TanStack Query (or Next route loaders / server components). Hand-rolled `useFetch` only for tiny one-offs, a