| name | visual-ux-review |
| description | Inspect a rendered interface for visual hierarchy, responsive behavior, interaction states, accessibility signals, and domain fit. Use when screenshots, a running app, a design artifact, or a completed frontend implementation needs evidence-based UX findings before approval. |
Visual UX Review
Purpose
Find user-visible defects and weak design decisions by observing the interface in realistic states rather than reviewing source code alone.
Inputs
- Running application, screenshots, or design artifact.
- Intended audience, key workflow, supported viewports, and design system.
- Test credentials/data if authorized.
- Available browser automation and accessibility tools.
Scope Boundary
This is the rendered-evidence inspection method. Use review-ui when the task also needs a complete merge-readiness judgment, prioritized findings, or authorized fixes.
Process
- Establish the primary workflow and expected states.
- Inspect the initial viewport at representative desktop and mobile sizes.
- Walk the workflow with mouse and keyboard; trigger loading, empty, validation, error, access, and success states where practical.
- Check hierarchy, scan order, density, control affordance, labels, feedback, and recovery paths.
- Check layout stability, text fitting, clipping, overlap, scroll traps, and dynamic resizing.
- Check focus visibility, keyboard reachability, contrast signals, reduced motion, and accessible names.
- Use automated checks as supporting evidence, then verify important findings visually.
- Report findings first, ordered by user impact, with state, viewport, evidence, and a concrete remedy.
Constraints
- Do not review only the polished happy path.
- Do not infer rendered quality from component code.
- Do not call subjective preference a defect unless it conflicts with the brief or system.
- Do not treat an automated accessibility pass as full accessibility validation.
- Do not recommend a redesign when a focused correction solves the workflow problem.
Verification
- All critical workflows and relevant states were observed or explicitly marked untested.
- Findings identify where and when the problem occurs.
- Severity reflects user impact, not visual novelty.
- Recommended changes preserve the product's established language.
- Evidence includes screenshots, browser state, or reproducible steps when available.
Failure Modes
- A list of generic heuristics with no observed defects.
- Reviewing one viewport while claiming responsive quality.
- Fixating on color taste while missing blocked actions.
- Reporting tool output without confirming whether it affects the real UI.
- Suggesting broad visual churn that creates new inconsistency.
Examples
High severity: the mobile filter drawer opens behind a fixed table toolbar, blocking the primary workflow.
Lower severity: a secondary caption has inconsistent spacing but remains readable and does not affect navigation.
Sources
See ../../sources/visual-ux-review.sources.md.
