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