makepad-2.0-layout — скилл для Claude Code: вёрстка и установка
Скилл помогает агенту задавать размеры виджетов и располагать их в интерфейсах Makepad 2.0. Пригодится, когда нужно сверстать экран или разобраться, почему контейнер не виден.
npx skills add ZhangHanDong/makepad-skills --skill makepad-2.0-layout -a claude-codeЧто делает makepad-2.0-layout
Скилл объясняет систему компоновки Makepad 2.0: Walk задаёт размеры виджета, а Layout — расположение дочерних элементов. Агент сможет подобрать Fill или Fit, настроить направление потока, отступы и выравнивание. Это правила для разметки Makepad, не CSS flexbox или grid.
Отдельное внимание уделено высоте контейнеров: если height: Fill находится внутри родителя с Fit, высота может стать нулевой и интерфейс исчезнет. Для таких контейнеров рекомендуют явно задавать height: Fit; ScrollYView — исключение, ему нужна высота Fill. Скилл также описывает фиксированные размеры, ограничения, перенос элементов и наложение дочерних виджетов.
Какие задачи решает
- задать виджету ширину и высоту через
FillилиFit - расположить дочерние элементы в строку или столбец
- настроить внутренние и внешние отступы
- найти причину нулевой высоты контейнера
- выровнять дочерние элементы внутри контейнера
Примеры запросов агенту
- Сверстай экран Makepad 2.0: расположи заголовок и форму столбцом и подбери высоту контейнеров.
- Проверь разметку Makepad: найди, почему контейнер с
height: Fillстановится невидимым. - Сделай ряд карточек с переносом на следующую строку и равными промежутками.
Как установить makepad-2.0-layout
1Через Skills CLI (Vercel)
npx skills add ZhangHanDong/makepad-skills --skill makepad-2.0-layout -a claude-code2Вручную: положить файлы
~/.claude/skills/makepad-2.0-layout/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/makepad-2.0-layout/
1Через Skills CLI (Vercel)
npx skills add ZhangHanDong/makepad-skills --skill makepad-2.0-layout -a codex2Вручную: положить файлы
.agents/skills/makepad-2.0-layout/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add ZhangHanDong/makepad-skills --skill makepad-2.0-layout -a cursor2Вручную: положить файлы
.cursor/skills/makepad-2.0-layout/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install ZhangHanDong/makepad-skills makepad-2.0-layout2Вручную: положить файлы
.github/skills/makepad-2.0-layout/SKILL.md1Через Skills CLI (Vercel)
npx skills add ZhangHanDong/makepad-skills --skill makepad-2.0-layout -a gemini-cli2Командой платформы
gemini skills install https://github.com/ZhangHanDong/makepad-skills --path skills/makepad-2.0-layoutВручную: положить файлы
.devin/skills/makepad-2.0-layout/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add ZhangHanDong/makepad-skills --skill makepad-2.0-layout -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Вопросы о makepad-2.0-layout
Как установить makepad-2.0-layout в Claude Code?
Выполните npx skills add ZhangHanDong/makepad-skills --skill makepad-2.0-layout -a claude-code. Файл скилла появится по пути ~/.claude/skills/makepad-2.0-layout/SKILL.md.
Что делает makepad-2.0-layout?
Скилл описывает систему компоновки Makepad 2.0: размеры виджетов, поток дочерних элементов, отступы и выравнивание. В нём также разобрана проблема нулевой высоты при сочетании Fill и Fit.
Почему контейнер Makepad может стать невидимым?
Когда контейнер с height: Fill вложен в родителя с Fit, возникает циклическая зависимость, и высота может разрешиться в ноль. Для обычных контейнеров в таком случае задают height: Fit; ScrollYView использует Fill.
