ui-ux-quality-review

name	UI/UX Quality Review
description	Child skill under Build Quality UI/UX for foundational screen and flow review across hierarchy, clarity, spacing, type, color, consistency, states, charts, and responsive fit. Returns evidence-backed findings with severity and concrete fixes; includes an AI-generated-UI smoke test.
skill_type	procedure
altitude	domain
activation	progressive
parent_id	build_quality_ui_ux
depth	1
preserve_markdown	true
legacy_paths	["product-and-design.ui-ux-quality-review.skill","product-and-design/ui-ux-quality-review","docs/research/youtube-library/skill-drafts/ui-ux-quality-review/SKILL.md"]
reference_modules	[{"id":"ui_ux_quality_review.foundation_checks","name":"Foundation Checks (areas 1–6)","summary":"Threshold-bearing rules for flow & states, visual hierarchy, spacing, typography, color & contrast, and component consistency — closed spacing/type scales, contrast-lever ranking, 60/30/10 color proportions, contrast floors.","when_to_load":["When executing a full review, before producing findings for areas 1–6.","When the user's concern is hierarchy, spacing, typography, color, or consistency drift."],"path":"references/foundation-checks.md","visibility":"public"},{"id":"ui_ux_quality_review.polish_and_fit_checks","name":"Polish & Fit Checks (areas 7–11)","summary":"Threshold-bearing rules for visual noise, icons & affordances, feedback states, charts & data clarity, and responsive fit — shadow recipe, icon-library rules, loading thresholds, chart axis rules, breakpoint checklist.","when_to_load":["When executing a full review, before producing findings for areas 7–11.","When the user's concern is decorative noise, icons, interaction feedback, charts, or mobile fit."],"path":"references/polish-and-fit-checks.md","visibility":"public"},{"id":"ui_ux_quality_review.ai_ui_smoke_test","name":"AI-Generated UI Smoke Test","summary":"Fingerprint table for AI-generated UI (v0, Lovable, Cursor, Bolt) — eight named slop patterns with the corrective move for each.","when_to_load":["When the screen under review was generated by an AI tool, or the user says the UI looks generic or like AI slop."],"path":"references/ai-ui-smoke-test.md","visibility":"public"}]
path	apps/web/src/lib/services/agentic-chat/tools/skills/definitions/ui_ux_quality_review/SKILL.md

UI/UX Quality Review

Identity

This is a procedure skill at domain altitude.

General-purpose UI review child. The discipline this skill enforces is sequencing: do not ask whether the interface is pretty until you have answered whether the user can complete the job, whether the screen has a visible hierarchy, whether components behave consistently, and whether the UI responds to user action.

The deep rules live in reference modules. The skill body holds the sequence, the output contract, and the escalation map; load the references before producing findings.

Activation

• Reviewing an app screen, dashboard, mobile flow, product workflow, modal, form, table, or chart.
• Reviewing AI-generated UI from v0, Lovable, Cursor, or Bolt before it ships.
• The user asks for a UI/UX audit without naming accessibility, marketing, design systems, research, calm, or delight as the main lens.
• Diagnosing why a UI feels amateur, cluttered, or hard to trust.
• You need a compact findings list with severity, evidence, and concrete fixes.

Procedure

Ordered sequence and intent only. Out-of-scope findings are escalated to sibling skills whose ownership is declared once in Routing, referenced by the → marker — never re-taught here.

1. Preflight. Confirm the user task on this surface in one sentence — if unclear, ask before reviewing. Capture or request: screenshots at mobile (375px), tablet (768px), desktop (1280px); light and dark mode if supported; interactive states (hover, focus, active, disabled, loading, error, empty) for primary controls; the design tokens in play (Inkprint for BuildOS surfaces) so fixes can be expressed in tokens, not arbitrary values. When only markup or code is available, reason directly from it — note unverifiable items (rendered contrast, real breakpoint behavior) instead of stalling on missing screenshots.
2. If the UI is AI-generated or looks generic, load ui_ux_quality_review.ai_ui_smoke_test and run the fingerprint scan first.
3. Load ui_ux_quality_review.foundation_checks and review areas 1–6 in order: flow & states, visual hierarchy, spacing & layout, typography, color & contrast, component consistency. Flow problems outrank pixel problems — if the user cannot complete the job, lead with that and keep cosmetic findings brief.
4. Load ui_ux_quality_review.polish_and_fit_checks and review areas 7–11 in order: visual noise, icons & affordances, feedback & states, charts & data clarity, responsive fit. Skip chart checks when no data viz is present.
5. For a targeted question (for example "fix my typography"), load only the reference covering that area and run just those checks — but still flag any blocking flow issue you notice.