ui-review

Run a checklist-based review that checks for hardcoded hex colors, arbitrary Tailwind spacing values, and non-standard shadows or radii. Each violation is reported with a file and line reference plus a concrete code fix using semantic design tokens.

Verify touch targets are at least 44x44px, interactive elements have focus-visible styles, color contrast meets WCAG AA ratios of 4.5:1 for text, and animations respect prefers-reduced-motion. Form inputs need associated labels and images need alt text.

Skip the full review for accessibility-only checks, quick automated linting, or Nielsen heuristic evaluations, which have dedicated lighter-weight tools. It also does not apply to non-UI code such as data fetching or business logic.

Mixed visual choices are the main cause: combining sharp and pill radii, using multiple accent colors, mixing icon families or stroke weights, and pairing different shadow styles. A coherence review enforces one value per visual axis across the entire file.

Yes, the component conventions checklist specifically verifies data-slot attributes, cn() className merging, React.ComponentProps typing, className override support, and named exports, matching shadcn-style component patterns.