mcpField
D
design-review

design-review

github.com/plugin87Design & UI3.1k612 installsUpdated 2d ago
Repository

About design-review

A skill for structured reviews of screens and flows. It scores six weighted dimensions, applies accessibility checks and Nielsen’s heuristics, and produces prioritized findings with concrete fixes.

Key features

  1. 01Score six dimensions with weighted criteria
  2. 02Check accessibility and color contrast
  3. 03Apply Nielsen’s ten usability heuristics
  4. 04Prioritize findings by severity
  5. 05Recommend fixes tied to design tokens

Use cases

  1. 01Review an individual screen or user flow
  2. 02Assess accessibility and usability of a design
  3. 03Create a prioritized remediation list for UI issues

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/plugin87/ux-ui-agent-skills --skill design-review

After installing, type/design-reviewin Claude Code to confirm it loaded.

Details

From the project README

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.

Comments

Markdown supported