К основному содержанию
скилл CX Codex

21st-ui-review — скилл для Claude Code: аудит интерфейса

Проверяет существующий UI на доступность, адаптивность и расхождения с дизайн-системой проекта. Пригодится перед релизом страницы или после чужого пул-реквеста.

Установить в Claude Code · Через Skills CLI (Vercel) Все способы и платформы ↓
npx skills add 21st-dev/skill --skill 21st-ui-review -a claude-code
Открыть на GitHub

Что делает 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-code

2Вручную: положить файлы

~/.claude/skills/21st-ui-review/SKILL.md

Папка скилла целиком; для одного проекта — .claude/skills/21st-ui-review/

По шагам, с командами для каждой платформы: Как установить скилл в 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

Похожие скиллы

Всё по теме «Фронтенд и UI» →
frontend-design-review microsoft Скилл проверяет и создаёт интерфейсы с учётом дизайна, доступности и дизайн-системы. Подходит для ревью UI, PR и адаптивной вёрстки. 237установок better-interface jakubkrehel Проводит сквозной аудит экранов и интерфейсов по правилам доступности, вёрстки, текста, цвета и типографики. Сводит отчёты узких скиллов в единый список замечаний по приоритету. CX Codex +1 30 000установок bento typeui.sh Скилл задаёт правила для интерфейсов в стиле bento: модульная сетка, карточки, иерархия и мягкие отступы. Пригодится для проектирования UI и дизайн-систем. CX Codex +1 2 500установок neobrutalism typeui.sh Скилл задаёт правила для нео-бруталистского интерфейса: контраст, цветовые токены, состояния компонентов и доступность. Пригодится для проектирования UI. CX Codex +1 2 500установок ux-designer szilu Скилл для ревью и сборки интерфейсов: проверяет доступность, состояния экранов и микрокопирайт, подсказывает числа для отступов и контраста. CX Codex +1 1 600установок design-better BuilderOS Скилл для ИИ-агентов, который добавляет к генерации и ревью интерфейса правила UX/UI: иерархия, состояния, доступность, анимация. Пригодится, когда код уже работает, но выглядит сыро. CX Codex +1 1 100установок

Из того же набора6

21st-ai Скилл для генерации и правки UI через CLI 21st: набросать варианты по промпту, посмотреть их в браузере и забрать код в проект. CX Codex +1 2 000установок 21st-cli-use Ищет, скачивает и ставит React- и shadcn-компоненты, темы и SVG-логотипы из каталога 21st.dev через утилиту 21st. Срабатывает при наличии components.json, избавляя от ручной вёрстки. CX Codex +1 2 000установок 21st-registry Публикует React-компоненты, CSS-темы и шаблоны на 21st.dev и управляет уже опубликованным через CLI 21st. CX Codex +1 1 800установок 21st-ui-build Скилл для реализации страниц и компонентов в существующем веб-проекте: сначала читает дизайн-контекст и токены, потом ищет готовое в 21st. CX Codex +1 1 400установок 21st-ui-explore Скилл предлагает несколько разных направлений интерфейса, опираясь на дизайн-систему проекта и подборку референсов из 21st. Пригодится, когда неясно, как должна выглядеть новая страница. CX Codex +1 1 400установок

Спонсоры проекта

Компании, которые помогают держать аналитику открытой