SkillsAdd

21st-dev/skill

21st-ui-review

Review existing UI against the project's design context, accessibility expectations, responsive behavior, interaction quality, and high-confidence production rules. Use for UI audits, design QA, frontend review, accessibility review, consistency checks, or requests to find and safely fix visual defects. Trigger for requests such as "review this UI", "audit this page", "find design issues", "check responsiveness", or "fix obvious UX problems". Use 21st-ui-build when the request is primarily to c…

Trending #5763

Installation

$ npx skills add 21st-dev/skill --skill 21st-ui-review
View on skills.sh ↗ GitHub repository ↗

Summary

  • Review existing UI against the project's design context, accessibility expectations, responsive behavior, interaction quality, and high-confidence production rules.
  • Use for UI audits, design QA, frontend review, accessibility review, consistency checks, or requests to find and safely fix visual defects.
  • Trigger for requests such as "review this UI", "audit this page", "find design issues", "check responsiveness", or "fix obvious UX problems".
  • Use 21st-ui-build when the request is primarily to create new UI.

Similar popular skills

Related neighbors and high-traction skills in the same topics — useful to compare before installing.

agent-browser Shared topics
vercel-labs/agent-browser

Browser automation CLI for AI agents. Use when the user needs to interact with websites, includ…

810.4K installs
azure-diagnostics Shared topics
microsoft/azure-skills

Debug Azure production issues on Azure using AppLens, Azure Monitor, resource health, and safe …

568.9K installs
azure-validate Shared topics
microsoft/azure-skills

Pre-deployment validation for Azure readiness. Run deep checks on configuration, infrastructure…

567.7K installs
supabase-postgres-best-practices Shared topics
supabase/agent-skills

Postgres best practices maintained by Supabase, for Postgres running anywhere. Load this skill …

391.6K installs
flutter-add-widget-preview Similar name
flutter/agent-plugins

Adds interactive widget previews to the project using the previews.dart system. Use when creati…

29.4K installs
recipe-review-overdue-tasks Similar name
googleworkspace/cli

Find Google Tasks that are past due and need attention.

27.2K installs

Also in this package

Other skills from 21st-dev/skill.

npx skills add 21st-dev/skill
21st-ai 17 21st-cli-use 17 21st-registry 16 21st-design-sync 16 21st-ui-build 17 21st-ui-explore 17 21st-cli 15

Browse all from 21st-dev/skill

More details

Agent compatibility

Declared targets from SKILL.md / docs. Unmarked agents are not listed — the skill may still install via the CLI.

Claude Code Not declared
Cursor Not declared
Codex Not declared
GitHub Copilot Not declared
Windsurf Not declared
Gemini CLI Not declared
Cline Not declared
OpenCode Not declared

Repository health

Stars 4
License LICENSE
Default branch main
Open issues 0
Status Active

Package contents

Files included with this skill beyond the listing page.

  • skill md SKILL.md 2,206 B
  • docs SUMMARY.md 2,143 B

History

  1. First recorded snapshot · 236 installs

SKILL.md

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:

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

  1. Inspect the actual component composition and runtime states. Validate claims

against code rather than inferring behavior from names.

  1. Group findings into:

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

  1. Prioritize by user impact and include exact file and line attribution.
  2. Use 21st review <path> --fix only for deterministic, low-ambiguity fixes.

Never silently redesign, change brand identity, or alter product behavior.

  1. 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.