craft-design-engineering — скилл для Claude Code: детали интерфейса
Скилл с правилами дизайн-инженерии: типографика, цвет, отступы, анимации и цифры. Пригодится, когда доводишь UI до аккуратного вида.
npx skills add gustavo-fior/craft --skill craft-design-engineering -a claude-codeЧто делает craft-design-engineering
Скилл собирает короткие концепции Густаво Фиора с сайта craft.gustavofior.com. У каждой есть формулировка правила и готовый код на CSS, Tailwind или React. Внутри — разбитые по темам файлы в references/: типографика, цвет, раскладка, движение. Всего девять тем, от табличных цифр и оптического выравнивания до вложенного радиуса скругления и гашения прокрутки по краю.
Порядок работы описан в SKILL.md. Сначала по индексу находишь подходящие концепции под задачу, потом открываешь нужный файл и читаешь полностью — однострочного пересказа для правки мало. Применяешь правило и берёшь точные значения с сайта: длительности, easing, радиусы, прозрачности. Для ревью скилл просит отдавать изменения таблицей с колонками Before, After и Concept, со ссылкой на демо. Если темы в индексе нет, честный ответ — сказать об этом и опереться на общее суждение.
Смысл в мелочах, которые по отдельности незаметны. Одинаковые easing и пропорции радиусов по всему продукту важнее свежих идей в каждом экране. Анимация достаётся редким и пространственным действиям, частые переходы лучше делать мгновенными. Правила и код лежат в репозитории, поэтому их надо перечитать перед работой, а не вспоминать по памяти.
Какие задачи решает
- выровнять цифры в таблице или таймере
- сделать нажатие кнопки тактильно убедительным
- подобрать скругление вложенного блока под внешний радиус
- убрать полосы на градиенте с помощью зерна
- добавить рамку картинке на тёмном фоне
Примеры запросов агенту
- Проверь кнопку формы по концепциям Craft: hover, press и hit area
- Сделай таблицу заказов с табличными цифрами и аккуратным оптическим выравниванием
- Прогони ревью экрана настроек и выдай таблицу Before/After со ссылками на концепции
Как установить craft-design-engineering
1Через Skills CLI (Vercel)
npx skills add gustavo-fior/craft --skill craft-design-engineering -a claude-code2Вручную: положить файлы
~/.claude/skills/craft-design-engineering/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/craft-design-engineering/
1Через Skills CLI (Vercel)
npx skills add gustavo-fior/craft --skill craft-design-engineering -a codex2Вручную: положить файлы
.agents/skills/craft-design-engineering/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add gustavo-fior/craft --skill craft-design-engineering -a cursor2Вручную: положить файлы
.cursor/skills/craft-design-engineering/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install gustavo-fior/craft craft-design-engineering2Вручную: положить файлы
.github/skills/craft-design-engineering/SKILL.md1Через Skills CLI (Vercel)
npx skills add gustavo-fior/craft --skill craft-design-engineering -a gemini-cli2Командой платформы
gemini skills install https://github.com/gustavo-fior/craft --path skills/craft-design-engineeringВручную: положить файлы
.devin/skills/craft-design-engineering/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add gustavo-fior/craft --skill craft-design-engineering -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Вопросы о craft-design-engineering
Как установить craft-design-engineering в Claude Code?
Выполни npx skills add gustavo-fior/craft --skill craft-design-engineering -a claude-code. Скилл окажется в ~/.claude/skills/craft-design-engineering/SKILL.md.
Что делает craft-design-engineering?
Даёт агенту набор правил дизайн-инженерии по типографике, цвету, раскладке и движению, с кодом на CSS, Tailwind и React для каждого.
Почему нельзя применить концепцию по краткому описанию?
В перечне только название и одна фраза. Полное обоснование, правило и примеры кода лежат в соответствующих файлах references/, их скилл и просит читать перед правкой.
