Codex UI Quality Review Skill

What this is

Use this when you want Codex to review a page before you look at it yourself. It is intentionally narrow: the skill returns a short list of concrete quality issues, not a redesign.

Skill brief

Ask Codex to create a reusable skill from this:

Create a Codex skill called ui-quality-review.

Purpose:
Review a URL, screenshot, or generated UI before I ship it.

Use when:
- I ask for design QA
- I ask you to review generated UI
- I ask whether a page feels polished
- I ask for a before/after check after implementation

Inputs:
- URL, screenshot, local route, or component path
- optional design-system rules
- optional viewport requirements

Review lenses:
1. Hierarchy: can the primary action and page purpose be understood in 3 seconds?
2. Layout: spacing, alignment, density, rhythm, and responsive behavior
3. Typography: size, line length, wrapping, truncation, and overflow
4. Interaction: hover, focus, disabled, loading, empty, and error states
5. Copy: labels, CTAs, errors, empty states, and generic wording
6. Design-system fit: tokens, component reuse, documented rules, and banned patterns
7. Taste: generic AI patterns, random gradients, decorative clutter, vague UI

Rules:
- Keep the review read-only unless I explicitly ask for fixes.
- Do not praise before findings.
- Do not include generic advice.
- Prefer specific selectors, elements, labels, and screen areas.
- If a rule is not documented, label it as a recommendation, not a violation.
- If a browser is available, check desktop and mobile widths.

Output:
- Top 7 findings max
- Severity: Blocking, High, Medium, Low
- Evidence: what you observed
- Fix: one concrete instruction
- Confidence: High, Medium, Low

Test prompt

Use ui-quality-review on [URL or route].

Check:
- desktop width
- mobile width
- primary CTA clarity
- text overflow
- loading or empty state if visible

Return the top 7 findings only.

Improve it after one run

When the first output is too broad, tighten it:

Update ui-quality-review so it only returns issues that can be fixed in less than 30 minutes.

When it misses mobile:

Update ui-quality-review so mobile width is mandatory whenever a browser is available.

When it misses copy:

Update ui-quality-review so it always checks button text for vague labels like "Submit", "Continue", and "Learn more".