design-review · plugin87 — Claude Code skill: scored UI audit in 6 dimensions
The skill scores a screen or flow across six weighted dimensions, runs Nielsen's heuristics and returns a prioritized findings table.
npx skills add plugin87/ux-ui-agent-skills --skill design-review -a claude-codeWhat design-review does
This skill reviews a screen or a whole flow and gives it a score. Six dimensions carry weights: visual hierarchy, consistency, accessibility and usability at 20% each, responsiveness and performance at 10%. The overall number is a weighted sum.
What sits behind it: a rubric file with the scoring guide, a WCAG checklist for the accessibility pass, and contrast.py for color pairs you are unsure about. There is also a check against the Banned Defaults list in taste/design-taste.md and Nielsen's ten heuristics, with violations flagged by number. You get two tables back — the scored dimensions and the findings, each row carrying a severity from Critical down to Enhancement plus a recommendation that points at tokens.
One thing to know upfront: npx skills add installs the skill folder alone. Run the kit check before your first review, or the skill will report it cannot find the files and stop there. The rest of the kit comes in with npx ux-ui-agent-skills init.
What it helps with
- score a finished screen across six dimensions and get one number
- flag Nielsen heuristic violations by number
- check the contrast of a questionable color pair before handoff
- sort findings by severity from Critical to Enhancement
- catch stock design patterns from the Banned Defaults list
Example prompts for the agent
- run design-review on this screen and show me the findings table
- audit the checkout for accessibility and compute the weighted score
- check the button and background contrast with the skill's script
How to install design-review
1Skills CLI (Vercel)
npx skills add plugin87/ux-ui-agent-skills --skill design-review -a claude-code2Manually: put the files in place
~/.claude/skills/design-review/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/design-review/
1Skills CLI (Vercel)
npx skills add plugin87/ux-ui-agent-skills --skill design-review -a codex2Manually: put the files in place
.agents/skills/design-review/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add plugin87/ux-ui-agent-skills --skill design-review -a cursor2Manually: put the files in place
.cursor/skills/design-review/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install plugin87/ux-ui-agent-skills design-review2Manually: put the files in place
.github/skills/design-review/SKILL.md1Skills CLI (Vercel)
npx skills add plugin87/ux-ui-agent-skills --skill design-review -a gemini-cli2Platform CLI
gemini skills install https://github.com/plugin87/ux-ui-agent-skills --path .claude/skills/design-reviewManually: put the files in place
.devin/skills/design-review/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add plugin87/ux-ui-agent-skills --skill design-review -a opencodeClaude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
Step by step, with commands for each platform: How to install skills in Claude Code: five ways
Questions about design-review
How do I install design-review in Claude?
Run npx skills add plugin87/ux-ui-agent-skills --skill design-review -a claude-code. The skill lands at ~/.claude/skills/design-review/SKILL.md.
What does design-review do?
It computes a weighted score across six dimensions, runs a WCAG accessibility pass, applies Nielsen's ten heuristics and collects the findings into a prioritized table.
Why does the skill report KIT_MISSING?
npx skills add installs only the skill folder, without the tokens, rubric and scripts. Install the kit with npx ux-ui-agent-skills init or through the plugin.
Source text
SKILL.md · MIT
---
name: design-review
description: Review or audit a design/UI across 6 weighted dimensions with Nielsen's 10 heuristics and a prioritized findings table. Use when the user wants a design critique, quality score, heuristic evaluation, or audit of an existing screen, page, or product before/after build.
---
# Skill: Design Review
> **Step 0: is the kit here?** This skill reads files from the kit. Check once:
> `ls ${CLAUDE_SKILL_DIR}/../../../tokens >/dev/null 2>&1 && echo KIT_OK || echo KIT_MISSING`
> On `KIT_MISSING` only the skill folders were installed, which is what
> `npx skills add` does. Say so plainly, point the user at
> `npx ux-ui-agent-skills init` or the plugin install, and stop. Do not guess the
> contents of a file you could not open.
Run a structured, scored review.
## Steps
1. Read `${CLAUDE_SKILL_DIR}/../../../workflows/design-review.md` (rubric, scoring guide, Nielsen heuristics, process).
2. Gather context: the screen(s)/flow, target users, platform, constraints.
3. Score the 6 dimensions (Visual Hierarchy 20%, Consistency 20%, Accessibility 20%, Usability 20%, Responsiveness 10%, Performance 10%); compute the weighted overall.
4. Run the accessibility lens with `${CLAUDE_SKILL_DIR}/../../../accessibility/wcag-checklist.md`; use `${CLAUDE_SKILL_DIR}/../../../scripts/contrast.py` for any color-pair doubts.
5. Check against the anti-slop tells in `${CLAUDE_SKILL_DIR}/../../../taste/design-taste.md` (Banned Defaults checklist).
6. Apply Nielsen's 10 heuristics; flag violations by number.
## Output
- The 6-dimension scored table + overall score.
- A prioritized findings table: # · Severity (Critical → Major → Minor → Enhancement) · Finding · Recommendation.
- Concrete, token-referenced fixes.
© plugin87 · MIT · plugin87/ux-ui-agent-skills
Similar skills
Everything for Design →design-review by other authors comes first.