makepad-2.0-animation — Claude Code skill: usage & setup
Guides coding agents on building transitions, hover states, and loops in Makepad 2.0. Useful for Rust UI styling with shader variables.
npx skills add ZhangHanDong/makepad-skills --skill makepad-2.0-animation -a claude-codeWhat makepad-2.0-animation does
This skill equips your coding agent with syntax and architectural patterns for the Makepad 2.0 Animator subsystem. It focuses on driving instance() shader variables across designated tracks, such as hover, focus, and time. Playback modes cover forward transitions, instant snaps, and repeating loops.
The guide outlines state transition definitions, target property assignments, and keyframed changes using timeline(). It also details easing options from Linear to InBounce. Adding an animator directly to unsupported components like Label or Slider produces no error and fails silently. Because of this, the skill prompts the agent to place those widgets inside a View parent.
Only instance() values are animatable. Variables marked as uniform() do not work with this system. Interactive surfaces with colored backgrounds also require new_batch: true.
What it helps with
- build hover state transitions using Forward and Snap playback
- create continuous rotation loops for loading indicators
- animate unsupported widgets by nesting them inside a View
- interpolate shader colors using instance variables and easing curves
Example prompts for the agent
- Add a hover color transition to this Makepad 2.0 RoundedView button
- Create an infinite loading spinner using Makepad Animator and Loop
- How do I animate a Label widget in Makepad 2.0 without errors?
How to install makepad-2.0-animation
1Skills CLI (Vercel)
npx skills add ZhangHanDong/makepad-skills --skill makepad-2.0-animation -a claude-code2Manually: put the files in place
~/.claude/skills/makepad-2.0-animation/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/makepad-2.0-animation/
1Skills CLI (Vercel)
npx skills add ZhangHanDong/makepad-skills --skill makepad-2.0-animation -a codex2Manually: put the files in place
.agents/skills/makepad-2.0-animation/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add ZhangHanDong/makepad-skills --skill makepad-2.0-animation -a cursor2Manually: put the files in place
.cursor/skills/makepad-2.0-animation/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install ZhangHanDong/makepad-skills makepad-2.0-animation2Manually: put the files in place
.github/skills/makepad-2.0-animation/SKILL.md1Skills CLI (Vercel)
npx skills add ZhangHanDong/makepad-skills --skill makepad-2.0-animation -a gemini-cli2Platform CLI
gemini skills install https://github.com/ZhangHanDong/makepad-skills --path skills/makepad-2.0-animationManually: put the files in place
.devin/skills/makepad-2.0-animation/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add ZhangHanDong/makepad-skills --skill makepad-2.0-animation -a opencodeClaude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
Step by step, with commands for each platform: How to install skills in Claude Code: five ways
Questions about makepad-2.0-animation
How to install makepad-2.0-animation in Claude Code?
Run npx skills add ZhangHanDong/makepad-skills --skill makepad-2.0-animation -a claude-code in your terminal.
What does makepad-2.0-animation do?
It provides prompt rules and code templates for the Makepad 2.0 Animator subsystem, covering easing curves, state tracks, and shader variable animations.
Why does my Makepad widget ignore the animator block?
Several UI components, including Label and Slider, lack native Animator support. Makepad ignores the block without throwing an error, so you must wrap the component in a View.
