makepad-2.0-animation — скилл для Claude Code: обзор и установка
Скилл учит ассистента настраивать анимации в Makepad 2.0: от ховеров кнопок до зацикленных спиннеров. Пригодится при вёрстке интерфейсов на фреймворке Makepad.
npx skills add ZhangHanDong/makepad-skills --skill makepad-2.0-animation -a claude-codeЧто делает makepad-2.0-animation
Скилл объясняет ассистенту работу подсистемы Animator во фреймворке Makepad 2.0 для ветки makepad-widgets dev. В фокусе находится управление шейдерными переменными instance() по времени. Анимации разносятся по независимым дорожкам вроде hover, focus или time, поэтому эффекты могут выполняться одновременно.
Внутри описаны правила блоков from и apply, работа ключевых кадров через timeline() и перечень кривых плавности от Linear до InBounce. Поддерживаются режимы Forward, Snap и Loop. Важная деталь: если добавить блок animator в неподдерживаемый виджет вроде Label или Slider, Makepad промолчит и ничего не покажет. Скилл предлагает обходной путь: упаковать такой элемент в контейнер View.
Переменные uniform() анимировать нельзя. Для интерактивных элементов с цветным фоном обязательно указывать параметр new_batch: true.
Какие задачи решает
- настроить реакцию кнопки на наведение курсора через режим Forward
- собрать зацикленную анимацию индикатора загрузки с помощью Loop
- сделать многошаговую смену состояний через timeline() и snap()
- обойти ограничения анимации для неподдерживаемых виджетов вроде Label
Примеры запросов агенту
- Добавь плавный эффект наведения для кнопки с изменением цвета фона в Makepad 2.0
- Сделай крутящийся спиннер загрузки через анимацию Loop в RoundedView
- Как анимировать появление текста Label в Makepad, если сам виджет не поддерживает Animator?
Как установить makepad-2.0-animation
1Через Skills CLI (Vercel)
npx skills add ZhangHanDong/makepad-skills --skill makepad-2.0-animation -a claude-code2Вручную: положить файлы
~/.claude/skills/makepad-2.0-animation/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/makepad-2.0-animation/
1Через Skills CLI (Vercel)
npx skills add ZhangHanDong/makepad-skills --skill makepad-2.0-animation -a codex2Вручную: положить файлы
.agents/skills/makepad-2.0-animation/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add ZhangHanDong/makepad-skills --skill makepad-2.0-animation -a cursor2Вручную: положить файлы
.cursor/skills/makepad-2.0-animation/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install ZhangHanDong/makepad-skills makepad-2.0-animation2Вручную: положить файлы
.github/skills/makepad-2.0-animation/SKILL.md1Через Skills CLI (Vercel)
npx skills add ZhangHanDong/makepad-skills --skill makepad-2.0-animation -a gemini-cli2Командой платформы
gemini skills install https://github.com/ZhangHanDong/makepad-skills --path skills/makepad-2.0-animationВручную: положить файлы
.devin/skills/makepad-2.0-animation/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add ZhangHanDong/makepad-skills --skill makepad-2.0-animation -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Вопросы о makepad-2.0-animation
Как установить makepad-2.0-animation в Claude Code?
Выполните команду npx skills add ZhangHanDong/makepad-skills --skill makepad-2.0-animation -a claude-code.
Что делает скилл makepad-2.0-animation?
Он передаёт модели шаблоны и правила работы с подсистемой Animator в Makepad 2.0, включая синтаксис дорожек, кривые плавности и шейдерные параметры.
Какие компоненты Makepad 2.0 не поддерживают Animator напрямую?
Фреймворк игнорирует аниматор в Label, Slider, DropDown, TextBox, Image, Icon и ряде других виджетов. Чтобы изменить их свойства по времени, элемент вкладывают внутрь View или RoundedView.
