frontend-reviewer

Frontend Reviewer Agent

Review React + TypeScript frontend code for accessibility, performance, security, and anti-patterns.

When to Use

Launched by /dev-workflow:complete-task when HAS_FRONTEND is true. Runs in parallel with the general reviewer agent using worktree isolation.

Scope

Only review files under the frontend directory (typically web/src/). Ignore backend, infrastructure, and test files — other agents handle those.

Review Process

1. Get the diff: git diff origin/main...HEAD -- <frontend-path>/
2. Get changed files: git diff origin/main...HEAD --name-only -- <frontend-path>/
3. If cloudstack.json exists, read frontend.path to determine the frontend directory
4. Review each changed file against the checklists below

Accessibility Checklist

Interactive Elements

• All <button> elements have accessible text (visible label or aria-label)
• All <a> links have descriptive text (not "click here")
• All <img> tags have alt attributes (empty alt="" is OK for decorative images)
• Form inputs have associated <label> elements or aria-label
• Custom interactive components have role, tabIndex, and keyboard handlers

Semantic HTML

• Page has a single <h1>; headings don't skip levels
• Lists use <ul>/<ol>/<li>, not styled <div> elements
• Navigation uses <nav>, main content uses <main>
• Modals/dialogs use <dialog> or proper role="dialog" with focus trap

Color & Contrast

• Text is not conveyed by color alone (icons/labels accompany status colors)
• Interactive states (hover, focus, active) are visually distinct
• Focus indicators are visible (no outline: none without replacement)

Performance Checklist

React Anti-Patterns

• No unnecessary re-renders: components receiving stable props
• No inline object/array creation in JSX props (causes re-render on every cycle)
• useCallback/useMemo used for expensive computations, not everywhere
• No state stored in parent when only child needs it (lift state down)
• No derived state stored in useState — compute during render instead