Ui review

Skill VictorAurelius/claude-starter-kit/skills/quality/ui-review

Use when user says 'review UI', 'check design', 'audit screenshots', or after any UI/UX code change. Auto-runs after every frontend PR. Captures before/after screenshots, scores per-screen on /128 scale.From its SKILL.md

Install

npx -y skills add VictorAurelius/claude-starter-kit --skill ui-review

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

3 things to look at

skips confirmationTells the agent to proceed without asking first, 1 time: "auto-run, don't wait for user".
1 stars1 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.
runs commandsInstructs the agent to run 2 commands, including `npx tsx scripts/capture-screenshots.ts --label before-pr-XXX` and 1 more.

SKILL.md

2.7 KB, 652 tokens by cl100k_base, as published. Nobody here has run it

UI Review — Portable Template

Per-screen scoring + before/after screenshots. Adapt {project} placeholders.

Setup for your project

Copy this folder to .claude/skills/ui-review/
Copy scripts/capture-screenshots.ts to your project's scripts dir
Edit PAGES list in capture script for your routes
Edit scoring dimensions if needed

Process

0. Fix Verification (MANDATORY if previous report exists)

Check each previously reported issue → FIXED/STILL OPEN/PARTIAL table at top of report.

1. Capture screenshots

BEFORE any UI fix (MANDATORY):

npx tsx scripts/capture-screenshots.ts --label before-pr-XXX

AFTER fix merged (auto-run, don't wait for user):

npx tsx scripts/capture-screenshots.ts --label after-pr-XXX

Script auto-detects dev server, starts if needed. Auto-updates latest/ when using --label.

Output: {project-docs}/screenshots/{label}/{page}/{theme}-{viewport}.png

2. Score per screen (/128)

5 dimensions, each screen scored independently:

Technical (/20) — accessibility, performance, responsive, theming, anti-patterns
Design Heuristics (/40) — Nielsen's 10 heuristics (0-4 each)
Visual Aesthetics (/28) — color, typography, sizing, spacing, alignment, hierarchy, polish
User Friendliness (/20) — first impression, navigation, action clarity, learning curve, delight
WCAG Accessibility (/20) — contrast, touch targets, labels, screen reader, keyboard

Report the LOWEST screen separately — this is the real quality bar.

3. Before/After comparison in report

| Screen | Before | After | What changed |
|--------|--------|-------|-------------|
| {page} | before-pr-XXX/{page}/dark-mobile.png | after-pr-XXX/{page}/dark-mobile.png | {description} |

4. Output report

Save to {project-docs}/ui-review-latest.md

Scoring Rubric

0/4 = Missing entirely
1/4 = Present but broken
2/4 = Present but has obvious issues (DEFAULT for most features)
3/4 = Works well, consistent across ALL screens
4/4 = Genuinely excellent

"Has feature" = 2/4, NOT 3/4. Before giving 3: "Would external auditor agree this is good?"

Gotchas

Score what you SEE in screenshots, not what code says
WCAG: if unverifiable from screenshot → cap at 2/4
Auto-capture after EVERY frontend PR merge — non-negotiable
Always update latest/ folder so user sees current state
Before screenshots are MANDATORY — no skipping

What ships with it

Read from the repository

Just SKILL.md. No reference files, no scripts.

Gives 0 of the 12 instructions most review quality skills give in 652 tokens

Counted across 1,273 of the 2,403 authors here whose files we hold, read 2026-09-06

Ask one question at a timein 63 of 1273, across 62 files
Provide a recommended answer for each questionin 47 of 1273, across 45 files
Rank findings by severityin 44 of 1273
Use parameterized queries for database accessin 38 of 1273, across 20 files
Validate all user input with schemasin 33 of 1273, across 15 files
Store secrets in environment variablesin 32 of 1273, across 14 files
Explore the codebase to answer questionsin 31 of 1273, across 29 files
Store tokens in httpOnly cookiesin 30 of 1273, across 12 files
Implement rate limiting on API endpointsin 30 of 1273, across 12 files
Sanitize user-provided HTMLin 29 of 1273, across 11 files
Return generic error messages to usersin 28 of 1273, across 10 files
Cite file and line for every findingin 28 of 1273, across 25 files

Said here and by no other author read

Capture screenshots before UI changes
Score screens across five dimensions
Report the lowest scoring screen separately
Update the latest screenshots folder
Base scores on visual evidence only
Cap unverifiable WCAG scores at two

Grouped from the skills themselves: near-identical wordings counted once, and counted by distinct author, so one author publishing three of these counts once. Length counted with cl100k_base; the agent that loads this file may tokenize it differently.