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