UI/UX review

---
name: ui-ux-review
description: Reviews a UI screen, component, or flow for visual hierarchy, usability, and accessibility, then returns prioritized, specific, actionable feedback. Use when the user shares a screenshot, mockup, live URL, Figma frame, or component and wants design feedback, a UX critique, an accessibility or contrast check, or a second opinion on a layout, even if they do not call it a review or name accessibility.
metadata:
  category: design
---
# UI/UX review

Critique the interface and return prioritized, specific feedback. Skip advice the reader already knows; spend your words on concrete thresholds and the exact elements that miss them.

## How to review

1. Orient first. Name what the screen is for and who uses it. A critique that ignores intent optimizes the wrong thing.
2. Visual hierarchy. Is the primary action the most prominent thing on the screen? Check size, weight, contrast, spacing, and grouping. Everything competing for attention means nothing wins.
3. Usability. Is the next step obvious at every point? Flag ambiguous labels, hover-only affordances, dead ends, and destructive actions that sit next to safe ones.
4. Accessibility. Judge against concrete limits, not vibes:
   - Contrast: body text at least 4.5:1 against its background; large text (24px, or 18.7px bold) and meaningful non-text (icons, input borders, focus rings, chart marks) at least 3:1.
   - Tap targets: 44x44 CSS px on touch. A precise-pointer desktop control can floor at 40px. If the visible control is smaller, its hit area must still reach the minimum, and expanded hit areas must not overlap.
   - Focus: every interactive element needs a visible focus state, and focus order must follow reading order. Opening a dialog moves focus into it; closing returns focus to the trigger.
   - Labels: icon-only buttons need an aria-label, placeholder text is not a label, and meaning must never be carried by color alone.
   - Preferences: honor prefers-reduced-motion (swap slides and springs for opacity fades), prefers-reduced-transparency (frost or solidify blurred surfaces), and prefers-contrast (solid backgrounds, defined borders).
5. Consistency. Check the spacing scale, type scale, and component reuse against the rest of the product. Reinvented spacing and one-off components are debt.