Frontend Code Review Skill

When to use

• Reviewing UI code changes, components, or routes.

• Pre-merge review of frontend files.

Checklist (prioritize)

Code Quality

• Clear separation of concerns; no mixed UI/data/side-effects.

• Predictable component boundaries and naming.

• Avoid duplicated logic; prefer shared hooks/utilities.

Performance (React)

• Avoid waterfalls; parallelize async work.

• Memoize expensive computations and stable props.

• Avoid unnecessary re-renders (selector usage, derived state).

State & Data

• Server state uses TanStack Query.

• Form state uses TanStack Form.

• Shared client state uses Zustand only where needed.

UX & Accessibility

• Correct focus order, labels, and keyboard nav.

• No layout shift on load; reasonable skeletons/loading.

Output format

• Urgent issues first, then suggestions.

• Provide file + line references with brief fixes.

• Ask whether to apply fixes when appropriate.

Quality gates

• After dev/test/debug tasks, run: bun run build, bun run tsc (if available), bun run lint, bun run check.

• Follow Biome lint results; do not bypass.