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 create new UI.

Jump to install Review files

Repository: 21st-dev/skill
Last source activity: August 26, 2026 at 19:28
Detected SKILL.md language: English
Stars: 32
Forks: 8

Install options

The review-first prompt is selected by default. You can switch to a direct command or download a local copy.

Install with an AI assistant

Copy this prompt into the AI assistant you're using.

Follow https://skillsmp.com/skill-install/prompt.md to install only the Agent Skill at https://github.com/21st-dev/skill/tree/main/skills/21st-ui-review.

A direct command skips the review prompt. Inspect the source before running it.

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

The command stays on one line. Scroll horizontally to inspect it before copying.

Prefer a local copy? Download the files currently available to SkillsMP.

Review the source files

Read SKILL.md and any companion files shown by SkillsMP before deciding whether to install.

File Explorer

2 files

SKILL.md

Source instructions · Read-only preview

name: 21st-ui-review
description: 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.

# 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 ``` 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.

View on GitHub

Back to search Back to installation

21st-ai

Generate and iterate on UI with 21st AI from the terminal via the `21st` CLI (`@21st-dev/cli`): sketch a UI from a prompt, preview the variants in the browser, edit any variant in place with a natural-language change, and pull the final code into the project. Use whenever the user wants to BUILD / SKETCH new UI ("sketch a pricing page", "generate a hero with 21st", "make me a <X> section"), ITERATE on a generated draft ("edit the third variant", "add a toggle to that take"), or GRAB the code of a draft ("pull that variant's code", "сгенери UI на 21st", "поправь третий вариант", "забери код того наброска"). For finding/installing existing components use the `21st-cli-use` skill; to publish your own, `21st-registry`.

2026-09-09

21st-cli-use

Search, install and pull code from the 21st.dev catalog with the `21st` CLI (`@21st-dev/cli`): find React/shadcn components, themes and templates, print a component's code or a theme's CSS, install an item into the project, or generate a new component with 21st AI. Use whenever the user says "search/find a component/theme on 21st", "install our team's Button", "add @user/slug", "pull that component's code", "найди компонент на 21st", "поставь наш компонент", or wants to script catalog access from the shell/CI. Auto-activate when a project has a `components.json` — search 21st before hand-writing UI.

2026-09-09

21st-ui-build

Build or substantially change production UI using the current project's design context, existing components, and grounded 21st inspiration. Use when implementing a page, section, component, responsive redesign, or visual polish in an existing web project. Trigger for requests such as "build this UI", "implement this screen", "make this page production-ready", or "use 21st to create the interface". Use 21st-ui-explore first when the visual direction is intentionally undecided, and 21st-ui-review for critique-only work.

2026-09-09

View all from this repository

21st-ui-review

Source facts

Install options

Install with an AI assistant

Review the source files

More from this repository

Install with an AI assistant

More from this repository