code-review-uilisted
Install: claude install-skill andr-ca/agentharness
# Code Review — UI / Frontend Layer
Focus on accessibility, performance, and correctness at the rendering boundary.
---
## Accessibility (WCAG AA)
- [ ] **Missing `alt` text on images** — every `<img>` needs an `alt` attribute. Decorative images use `alt=""`. Never `alt="image"` or `alt="photo"`.
- [ ] **Interactive element is not keyboard-accessible** — a `<div onClick>` or `<span onClick>` is not focusable by default. Use `<button>` or add `role`/`tabIndex` and keyboard event handlers.
- [ ] **Color contrast** — text must meet 4.5:1 contrast ratio (3:1 for large text). Check with a contrast analyzer before approving color changes.
- [ ] **Missing form labels** — every `<input>` needs a visible `<label>` or `aria-label`. Placeholder text is not a substitute.
- [ ] **Inaccessible error messages** — form validation errors must be associated with the input (`aria-describedby`) and announced to screen readers.
- [ ] **Focus management after state change** — modals, dialogs, and popups must move focus to the new content on open and restore it on close.
- [ ] **Missing ARIA role on custom widget** — a custom dropdown, slider, or menu must declare its ARIA role and maintain ARIA state (`aria-expanded`, `aria-selected`, etc.).
---
## State Management
- [ ] **Server state stored in client state** — data fetched from an API stored in `useState`/`useReducer`/Vuex instead of a server state cache (React Query, SWR, Apollo). Leads to stale reads and manual invalidation bugs.
- [ ]