← ClaudeAtlas

code-review-uilisted

Use when reviewing frontend, UI, or component code. Covers accessibility (WCAG AA), state management, bundle size, keyboard navigation, hydration, and rendering performance. Load instead of the general code-review skill for UI-focused reviews.
andr-ca/agentharness · ★ 1 · Code & Development · score 70
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. - [ ]