UX Visual Evaluation — Does It Look Good and Feel Usable?

Second pass after visual-feedback-loop confirms the UI renders correctly. Same screenshot, deeper evaluation. Drawn from Refactoring UI and Nielsen's usability heuristics.

When to Run

After visual-feedback-loop: When visual-feedback-loop's 5-item check passes. Uses the existing screenshot — don't take a new one.

Independent: When UI changes are complete and a screenshot is available, even if visual-feedback-loop was not run. Take or request a screenshot, then evaluate.

If the task is non-UI and no screenshot is available → skip.

Implement → Tests Pass → basic visual check (visual-feedback-loop) → UX evaluation (this skill) → Refactor

Visual Design Criteria

Evaluate the screenshot for:

• Visual hierarchy — Does the most important element stand out? Primary actions: high-contrast solid buttons. Secondary actions: outline or lower contrast. Supporting text: lighter color, not just smaller. If everything looks equally prominent, nothing guides the user's eye.
• Whitespace — Generous breathing room? More space between groups than within them. Use whitespace to create separation instead of borders. Too much space is better than too little.
• Spacing consistency — Do margins, padding, and gaps follow a consistent scale? Look for one section with tight padding next to another with loose padding. Same-level elements should have the same spacing.
• Color usage — Is color strategic, not decorative? Primary actions should have the strongest color. Status indicators (success, error, warning) should use distinct, conventional colors. Text on colored backgrounds needs sufficient contrast.
• Borders vs. alternatives — Are borders overused? Prefer background color changes, subtle shadows, or increased whitespace. Borders make interfaces look busy.

Usability Criteria

• Affordances — Do interactive elements look interactive? Buttons should look like buttons, links like links. If you can't tell what's clickable from the screenshot, neither can the user.
• System status — Does the UI show where the user is and what's happening? Look for: highlighted nav items, empty state guidance, loading indicators, selected/active states.
• Consistency — Does this screen match the rest of the app? Same button styles, heading sizes, spacing patterns. New components should feel like they belong alongside existing ones.

Iteration

Same as visual-feedback-loop: fix, confirm test passes, re-evaluate. 3-attempt cap per issue — if unresolved, note as follow-up and proceed to refactoring.

What This Skill Does NOT Cover

• Whether the UI renders correctly — visual-feedback-loop
• Design decisions (who is the user, what's their goal) — ux-design-principles
• Accessibility audits — react-best-practices and dedicated tools

Related Skills

• Prerequisite: visual-feedback-loop (basic correctness check before design evaluation), ux-design-principles (design rationale informs evaluation criteria)
• Next: boy-scout-rule (refactoring after visual verification is complete)