makepad-2.0-vector — Claude Code skill: what it does, how to install
Teaches your coding assistant how to write vector shapes and animations for Makepad 2.0. Generates inline SVG paths, gradients, and UI icons.
npx skills add ZhangHanDong/makepad-skills --skill makepad-2.0-vector -a claude-codeWhat makepad-2.0-vector does
The skill guides code generation for the Makepad 2.0 Vector component in Splash. Instead of loading asset files with Svg, it defines resolution-independent paths, rectangles, circles, and drop shadows directly in Rust UI declarations.
Vector elements rely strictly on SVG attributes such as fill or stroke_width. Standard Makepad draw_bg.* styling rules produce zero visual effect on these inner shapes. Keyframe transitions use Tween assigned right to a property value rather than a separate wrapper node.
Repeating animations need a boolean loop_: true or a raw number: passing a string argument breaks the loop logic and stops after one pass. The skill targets the active dev branch of makepad-widgets.
What it helps with
- render vector icons directly in Makepad UI code
- configure linear and radial gradients without external asset files
- animate shape coordinates and colors using Tween properties
- group vector primitives with matrix transforms and drop shadows
Example prompts for the agent
- Build a checkmark icon using the Vector widget and an SVG path for my Makepad interface
- Create a pulsing status circle using Tween property animation in Makepad
- Draw a rectangle with rounded corners and a linear gradient fill in Splash
How to install makepad-2.0-vector
1Skills CLI (Vercel)
npx skills add ZhangHanDong/makepad-skills --skill makepad-2.0-vector -a claude-code2Manually: put the files in place
~/.claude/skills/makepad-2.0-vector/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/makepad-2.0-vector/
1Skills CLI (Vercel)
npx skills add ZhangHanDong/makepad-skills --skill makepad-2.0-vector -a codex2Manually: put the files in place
.agents/skills/makepad-2.0-vector/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add ZhangHanDong/makepad-skills --skill makepad-2.0-vector -a cursor2Manually: put the files in place
.cursor/skills/makepad-2.0-vector/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install ZhangHanDong/makepad-skills makepad-2.0-vector2Manually: put the files in place
.github/skills/makepad-2.0-vector/SKILL.md1Skills CLI (Vercel)
npx skills add ZhangHanDong/makepad-skills --skill makepad-2.0-vector -a gemini-cli2Platform CLI
gemini skills install https://github.com/ZhangHanDong/makepad-skills --path skills/makepad-2.0-vectorManually: put the files in place
.devin/skills/makepad-2.0-vector/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add ZhangHanDong/makepad-skills --skill makepad-2.0-vector -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-vector
How do I install makepad-2.0-vector in Claude Code?
Run npx skills add ZhangHanDong/makepad-skills --skill makepad-2.0-vector -a claude-code in your terminal.
What does makepad-2.0-vector do?
It instructs the coding agent on Makepad 2.0 vector primitives, SVG path formatting, gradient declarations, and animation properties.
How does Tween handle looping?
Pass loop_: true for continuous animation or a float for a fixed repeat count. Using a string like "indefinite" causes the animation to trigger only once.
