mcpField
2
21st-ui-review

21st-ui-review

github.com/21st-devDesign & UI311.4k installsUpdated 7w ago
Repository

About 21st-ui-review

A UI review skill for teams and agents inspecting frontend code. It separates verified defects from subjective design advice and ties findings to source locations.

Key features

  1. 01Deterministic review with 21st
  2. 02Checks accessibility and interaction
  3. 03Reviews responsive and design-system issues
  4. 04Prioritizes findings with file and line
  5. 05Reruns tests and review after fixes

Use cases

  1. 01Audit keyboard access and focus behavior
  2. 02Find responsive overflow risks
  3. 03Check UI against design tokens
  4. 04Verify fixes after code changes

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/21st-dev/skill --skill 21st-ui-review

After installing, type/21st-ui-reviewin Claude Code to confirm it loaded.

Bundled filesagents/openai.yaml

Details

From the project README

Review UI with evidence

Separate deterministic defects from subjective design recommendations.

Workflow

  1. Read .21st/design.json, project instructions, and the relevant source.

  2. Run the deterministic review first:

    21st review <path>
21st review <path> --json

  3. Inspect the actual component composition and runtime states. Validate claims against code rather than inferring behavior from names.

  4. Group findings into:

    • deterministic defects;
    • design-system drift;
    • accessibility and interaction defects;
    • responsive risks;
    • subjective product/design recommendations.

  5. Prioritize by user impact and include exact file and line attribution.

  6. Use 21st review <path> --fix only for deterministic, low-ambiguity fixes. Never silently redesign, change brand identity, or alter product behavior.

  7. Run relevant project tests after fixes and rerun review to prove resolution.

Review priorities

  • semantic controls and accessible names;
  • keyboard access, focus visibility, and dialog/menu behavior;
  • image alternatives and meaningful labels;
  • touch target size and disabled/loading states;
  • responsive overflow and fixed-width assumptions;
  • reduced-motion handling;
  • hardcoded visual values that conflict with project tokens;
  • duplicate primitives instead of existing components;
  • inconsistent typography, radius, spacing, shadows, and icons;
  • fake data, placeholder copy, or missing empty/error states.

Output

Lead with actionable findings ordered by severity. Keep subjective suggestions clearly labeled. If no issue is proven, say so and state what was inspected.

Comments

Markdown supported