mcpField
D
design-review

design-review

github.com/borkwebDesign & UI850 installsUpdated 2d ago
Repository

About design-review

design-review is a skill for inspecting rendered interfaces and fixing confirmed issues when authorized. It distinguishes observable defects from aesthetic suggestions, records reproducible evidence, and verifies fixes within the requested scope.

Key features

  1. 01Checks layout, states, and responsive behavior
  2. 02Verifies keyboard focus, contrast, and motion
  3. 03Records severity, evidence, and proposed fixes
  4. 04Changes and verifies pages when authorized
  5. 05Reports scope, results, and unresolved issues

Use cases

  1. 01Reviewing for findings without source edits
  2. 02Fixing confirmed interface or interaction defects
  3. 03Checking design quality on specified routes and viewports

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/borkweb/skills --skill design-review

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

Bundled filesagents/openai.yaml

Details

From the project README

Design Review

Review the rendered interface for visual and interaction defects, then fix confirmed issues when requested or already authorized. A review-only request produces findings and evidence without source edits.

Scope

Identify the target URL and changed routes, using the actual base/merge-base for a diff-aware review. Follow the shared QA exploration for browser access, snapshots, role/viewport coverage and safe interactions. Preserve unrelated dirt; use a separate checkout when needed rather than stashing or committing everything.

Use Full mode for the requested product surfaces, Quick for critical screens/states and Deep for an explicitly broader interaction/accessibility audit. Record what was inspected. Resolve genuine scope ambiguity once; reuse the user's answers and authorization.

Inspect

Calibrate to DESIGN.md, tokens, components, brand assets and rendered pages. Use relevant design checks: hierarchy, typography, spacing/alignment, copy, states, responsive reflow, keyboard/focus, contrast, motion and supported themes.

Separate visible/computed defects from aesthetic suggestions. A font, grid, color or border radius is not evidence of a defect by itself. Preserve intentional brand choices. Inspect actual text/background colors and font size/weight: 18px regular text is normal text and needs 4.5:1 at WCAG AA. The large-text threshold is 24px regular or about 18.67px bold.

Trace critical interactions across pages. Confirm focus order, error/recovery states and continuity, not just static screenshots. Where the browser tool supports script evaluation, gather console errors, failed requests, contrast, font loading and focus order in one scripted evaluation after each navigation, and capture all relevant viewports in one pass; the checks stay the same, only the round trips drop. Consolidate repeated symptoms into a systemic finding when the evidence supports a shared cause. Record severity from user impact, a screenshot or computed evidence, reproduction and the proposed correction.

Correct and verify

In fix mode, change the smallest owned scope, verify the affected route and neighboring states, and capture before/after evidence. Run relevant configured checks on final files once. Commit only verified owned changes when explicitly authorized; honor no-commit mode. Fix regressions or reverse only your own edit. Do not auto-revert HEAD or use an invented probability formula to decide whether to continue.

Reassess on regressions, repeated failed corrections, unclear causes or scope changes. Stop at the requested acceptance criteria or agreed budget and report anything unresolved. Do not chase a 10/10 score through unrelated polish.

Deliver

Report tested routes/viewports/states, findings, verified changes, remaining blockers and evidence links. Distinguish incomplete verification from a defect. A clean verdict requires the relevant checks to have run. Scores, if requested, are labeled qualitative assessments and cannot override blockers. Keep source fixes, commit state and optional backlog suggestions distinct.

Comments

Markdown supported