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.