pattern-reviewer-frontend-standardlisted

# pattern-reviewer-frontend-standard ## When to activate - The dispatched caller is reviewing a `type:frontend` task's production-code diff (React). - A user says "review the React components / hooks / forms / routing". ## Project memory overlay After loading this skill, also check `$MAIN_ROOT/.claude/memory/patterns/pattern-reviewer-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). ## Iron rules ## Patterns to review ### React / Next.js (HIGH) - **Missing dependency arrays** — `useEffect` / `useMemo` / `useCallback` with incomplete deps; stale closures. - **State updates in render** — `setState` during render causes infinite loops. - **Missing keys in lists** — array index as key when items can reorder. - **Prop drilling** — props passed through 3+ levels (use Context or composition). - **Unnecessary re-renders** — missing memoization for expensive computations on hot paths. - **Client/server boundary** — `useState` / `useEffect` in Server Components. - **Missing loading/error states** — data fetching without fallback UI. ```tsx // BAD: missing dependency, stale closure useEffect(() => { fetchData(userId); }, []); // userId missing from deps // GOOD: complete dependencies useEffect(() =>