makepad-2.0-theme — скилл для Claude Code: тема Makepad 2.0
Скилл для работы с темой Makepad 2.0: переменные theme.*, переключение тёмного и светлого режимов, цвета, шрифты и отступы в Splash.
npx skills add ZhangHanDong/makepad-skills --skill makepad-2.0-theme -a claude-codeЧто делает makepad-2.0-theme
Скилл описывает систему тем Makepad 2.0 и переменные theme.*, которые используются в Splash-скриптах. Внутри разобраны три встроенные темы: mod.themes.dark (тёмная, по умолчанию), mod.themes.light и mod.themes.skeleton с жёстко заданными значениями. Есть таблицы переменных для цветов фона, текста, состояний виджетов, семантических статусов и фаски.
Отдельный раздел — порядок загрузки темы в App::run. Сначала вызывается theme_mod, потом выбирается активная тема через script_eval!, и только затем widgets_mod. Если пропустить первые два шага, приложение получит тёмную тему, потому что она выставлена внутри theme_mod. Виджеты читают mod.theme через mod.prelude.widgets_internal, поэтому тема должна быть выбрана до их загрузки — иначе цвета и отступы подставятся из тёмного набора.
Главное правило скилла: в продакшн-интерфейсе не писать цвета, размеры шрифта и отступы числами, а брать их из theme.*. Тогда переключение темы работает без правок в каждом виджете.
Какие задачи решает
- выбрать активную тему до загрузки виджетов
- заменить жёстко заданные цвета на переменные
theme.* - собрать светлый и тёмный вариант одного интерфейса
- подобрать цвет текста для состояния hover, focus и disabled
- настроить общие параметры темы вроде радиуса скругления и множителя отступов
Примеры запросов агенту
- Покажи, как в
App::runвыбратьmod.themes.lightвместо тёмной темы - Какие переменные
theme.*отвечают за фон карточки и чередование строк? - Перепиши цвета кнопки на переменные темы, чтобы работало переключение режимов
Как установить makepad-2.0-theme
1Через Skills CLI (Vercel)
npx skills add ZhangHanDong/makepad-skills --skill makepad-2.0-theme -a claude-code2Вручную: положить файлы
~/.claude/skills/makepad-2.0-theme/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/makepad-2.0-theme/
1Через Skills CLI (Vercel)
npx skills add ZhangHanDong/makepad-skills --skill makepad-2.0-theme -a codex2Вручную: положить файлы
.agents/skills/makepad-2.0-theme/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add ZhangHanDong/makepad-skills --skill makepad-2.0-theme -a cursor2Вручную: положить файлы
.cursor/skills/makepad-2.0-theme/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install ZhangHanDong/makepad-skills makepad-2.0-theme2Вручную: положить файлы
.github/skills/makepad-2.0-theme/SKILL.md1Через Skills CLI (Vercel)
npx skills add ZhangHanDong/makepad-skills --skill makepad-2.0-theme -a gemini-cli2Командой платформы
gemini skills install https://github.com/ZhangHanDong/makepad-skills --path skills/makepad-2.0-themeВручную: положить файлы
.devin/skills/makepad-2.0-theme/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add ZhangHanDong/makepad-skills --skill makepad-2.0-theme -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Вопросы о makepad-2.0-theme
Как установить makepad-2.0-theme в Claude Code?
Выполните npx skills add ZhangHanDong/makepad-skills --skill makepad-2.0-theme -a claude-code. Скилл окажется в ~/.claude/skills/makepad-2.0-theme/SKILL.md.
Что делает makepad-2.0-theme?
Описывает систему тем Makepad 2.0: встроенные темы, переменные theme.* для цветов, шрифтов и отступов, порядок загрузки темы в App::run.
Почему тема не применяется к виджетам?
Тема выбирается до вызова widgets_mod. Если этот порядок нарушить, виджеты возьмут тёмную тему, выставленную по умолчанию внутри theme_mod.
