ui-audit — скилл для Claude Code: что делает и как установить
Скилл анализирует интерфейсы по правилам книги Making UX Decisions. Помогает находить ошибки в визуальной иерархии, доступности и формах прямо в коде.
npx skills add tommygeoco/ui-audit --skill ui-audit -a claude-codeЧто делает ui-audit
Скилл добавляет набор руководств и чек-листов, по которым нейросеть инспектирует компоненты и экраны. Внутри лежат правила для визуального стиля, навигации, состояний компонентов и снижения когнитивной нагрузки. Оценка строится вокруг баланса привычек пользователя, корпоративных стандартов и результатов исследований.
При аудите агент генерирует JSON-отчёт с разбором контрастности, фокуса, типографики и свободного пространства. Контекстные блоки охватывают онбординг, социальные доказательства и обработку ошибок ввода. Если проект не использует стандартные паттерны вроде вкладок или карточек, скилл сопоставляет предложенное решение со шкалой оригинальности.
Для точной оценки интерфейса ассистенту нужен контекст бизнес-стратегии: скорость выпуска, экономия ресурсов, безошибочность или новизна. Без указания этих приоритетов агент не сможет расставить веса для найденных недочётов.
Какие задачи решает
- проверить разметку и стили на соответствие базовым требованиям доступности
- найти нарушения контрастности, типографики и визуальной иерархии в интерфейсе
- выбрать подходящий UI-паттерн для пошаговых форм и раскрывающихся списков
- сформировать структурированный JSON-отчёт с приоритетами исправлений
Примеры запросов агенту
- Проведи аудит формы регистрации: проверь валидацию, доступность полей и контрастность.
- Оцени визуальную иерархию этого дашборда и выдели критичные проблемы в JSON-отчёте.
- Подбери UI-паттерн для скрытия второстепенных настроек профиля с минимальной нагрузкой на пользователя.
Как установить ui-audit
1Через Skills CLI (Vercel)
npx skills add tommygeoco/ui-audit --skill ui-audit -a claude-code2Вручную: положить файлы
~/.claude/skills/ui-audit/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/ui-audit/
1Через Skills CLI (Vercel)
npx skills add tommygeoco/ui-audit --skill ui-audit -a codex2Вручную: положить файлы
.agents/skills/ui-audit/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add tommygeoco/ui-audit --skill ui-audit -a cursor2Вручную: положить файлы
.cursor/skills/ui-audit/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install tommygeoco/ui-audit ui-audit2Вручную: положить файлы
.github/skills/ui-audit/SKILL.md1Через Skills CLI (Vercel)
npx skills add tommygeoco/ui-audit --skill ui-audit -a gemini-cli2Командой платформы
gemini skills install https://github.com/tommygeoco/ui-auditВручную: положить файлы
.devin/skills/ui-audit/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add tommygeoco/ui-audit --skill ui-audit -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Вопросы о ui-audit
Как установить ui-audit в Claude Code?
Установите скилл командой npx skills add tommygeoco/ui-audit --skill ui-audit -a claude-code. Файлы будут размещены по пути ~/.claude/skills/ui-audit/SKILL.md.
Что проверяет скилл ui-audit?
Он оценивает макеты и код по чек-листам визуальной иерархии, доступности, стилей и удобства навигации. В отчёте агент указывает статусы проверок и список исправлений по приоритетам.
Какие разделы обязательно входят в итоговый отчёт?
Отчёт всегда содержит проверку визуальной иерархии, визуального стиля и доступности. Разделы навигации, онбординга или форм добавляются при наличии этих элементов в интерфейсе.
