SKILLS.MD

UI/UX review

Critique a screen or component for usability.

When agents use this

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.

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.

Gotchas

  • A static screenshot hides the failures that matter most: hover-only affordances, focus states, keyboard traps, touch-target size, and motion. With only an image, judge layout and contrast, then ask for the interactive states or a live URL before calling the review complete.
  • The 3:1 minimum for non-text applies to icons, input borders, focus rings, and chart marks, not only to text. Reviewers check the paragraph and miss the 2:1 icon.
  • Disabled controls are exempt from contrast minimums. Do not flag a greyed-out disabled button as a contrast failure.
  • Placeholder text disappears on focus and ships at low contrast by default. An input whose only label is its placeholder fails both labeling and contrast.
  • A correct focus ring still reads as "no focus state" when an overflow:hidden ancestor clips it. Before flagging missing focus styles, check whether the ring is present but sheared at the container edge.

Output

Group findings by severity, most severe first. Use this shape:

UI/UX review: [what was reviewed]

Blocking

  • [exact element]: [why it hurts the user]. Fix: [concrete change].

Should-fix

  • [element]: [impact]. Fix: [change].

Polish

  • [element]: [impact]. Fix: [change].

Highest-impact change: [the single thing to do first].