21st-ui-review — скилл для Claude Code: аудит интерфейса
Проверяет существующий UI на доступность, адаптивность и расхождения с дизайн-системой проекта. Пригодится перед релизом страницы или после чужого пул-реквеста.
npx skills add 21st-dev/skill --skill 21st-ui-review -a claude-codeЧто делает 21st-ui-review
Скилл разбирает вёрстку по детерминированным правилам, а не по вкусовщине. Сначала он читает .21st/design.json, инструкции проекта и исходники, затем запускает 21st review <path> — обычный прогон или с флагом --json. Дальше смотрит реальную композицию компонентов и состояния во время работы, а не догадывается по именам.
Находки раскладываются по группам: детерминированные дефекты, дрейф от дизайн-системы, проблемы доступности и взаимодействия, риски адаптивной вёрстки и субъективные рекомендации. Каждая привязывается к файлу и строке. Правит скилл только то, где нет двусмысленности — через 21st review <path> --fix. Молча переделывать дизайн или менять поведение продукта он не станет.
В приоритетах — семантические контролы и доступные имена, работа с клавиатуры и видимый фокус, размеры тач-целей, состояния загрузки и отключённости, переполнение на узких экранах, prefers-reduced-motion, захардкоженные значения вместо токенов проекта. После правок скилл советует прогнать тесты проекта и повторить ревью, чтобы подтвердить, что дефект закрыт.
Какие задачи решает
- найти проблемы доступности на странице перед релизом
- отловить переполнение вёрстки на узких экранах
- сверить цвета и отступы с токенами дизайн-системы
- проверить работу диалогов и меню с клавиатуры
- отделить реальные дефекты от вкусовых придирок в ревью
Примеры запросов агенту
- проверь этот интерфейс на доступность и адаптивность
- сделай аудит страницы оформления заказа и покажи находки по файлам
- найди очевидные проблемы UX в компоненте корзины
Как установить 21st-ui-review
1Через Skills CLI (Vercel)
npx skills add 21st-dev/skill --skill 21st-ui-review -a claude-code2Вручную: положить файлы
~/.claude/skills/21st-ui-review/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/21st-ui-review/
1Через Skills CLI (Vercel)
npx skills add 21st-dev/skill --skill 21st-ui-review -a codex2Вручную: положить файлы
.agents/skills/21st-ui-review/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add 21st-dev/skill --skill 21st-ui-review -a cursor2Вручную: положить файлы
.cursor/skills/21st-ui-review/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install 21st-dev/skill 21st-ui-review2Вручную: положить файлы
.github/skills/21st-ui-review/SKILL.md1Через Skills CLI (Vercel)
npx skills add 21st-dev/skill --skill 21st-ui-review -a gemini-cli2Командой платформы
gemini skills install https://github.com/21st-dev/skill --path skills/21st-ui-reviewВручную: положить файлы
.devin/skills/21st-ui-review/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add 21st-dev/skill --skill 21st-ui-review -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Вопросы о 21st-ui-review
Как установить 21st-ui-review в Claude?
Выполните npx skills add 21st-dev/skill --skill 21st-ui-review -a claude-code. Скилл окажется в ~/.claude/skills/21st-ui-review/SKILL.md.
Что делает 21st-ui-review?
Проводит ревью существующего UI: ищет детерминированные дефекты, расхождения с дизайн-системой, проблемы доступности и адаптивности. Субъективные рекомендации помечает отдельно.
Чем 21st-ui-review отличается от 21st-ui-build?
Ревью занимается проверкой уже готового интерфейса. Если задача — создать новый UI, нужен 21st-ui-build.
Исходный текст
SKILL.md · Apache-2.0
--- 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.
© 21st-dev · Apache-2.0 · 21st-dev/skill