makepad-2.0-splash — Claude Code skill: what it does, how to install
Guides coding agents through the Splash scripting language for Makepad 2.0. Helps build reactive UIs inside Rust while avoiding silent layout bugs.
npx skills add ZhangHanDong/makepad-skills --skill makepad-2.0-splash -a claude-codeWhat makepad-2.0-splash does
This skill equips the agent with knowledge about Splash, the runtime UI scripting engine introduced in Makepad 2.0. Splash replaces live_design! macros with script_mod!. Its syntax eliminates commas between properties as well as semicolons. Blocks merge using +:, while child nodes bind through :=.
The scripting VM runs incremental parsing checkpoints. This architecture supports live UI rendering while an LLM streams tokens. The runtime tracks code changes with ScriptModKey to enable hot reloading. However, adding or removing Rust #(...) bindings breaks hot reload and forces a full rebuild.
Layout bugs happen easily. Top containers default to height: Fill, collapsing heights to zero pixels unless assigned height: Fit. For text inside styled views, the engine requires new_batch: true to render correctly.
What it helps with
- write Makepad 2.0 UI components using
script_mod!syntax - trigger UI updates from Rust code via
script_eval! - configure reactive rendering with
mod.stateandon_render - fix 0px collapsed layout bugs caused by container sizing defaults
Example prompts for the agent
- Create a counter view in Makepad 2.0 using the Splash script_mod macro
- Add a reactive on_render callback to display todo items in Splash
- Update mod.state from a Rust event handler using script_eval
How to install makepad-2.0-splash
1Skills CLI (Vercel)
npx skills add ZhangHanDong/makepad-skills --skill makepad-2.0-splash -a claude-code2Manually: put the files in place
~/.claude/skills/makepad-2.0-splash/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/makepad-2.0-splash/
1Skills CLI (Vercel)
npx skills add ZhangHanDong/makepad-skills --skill makepad-2.0-splash -a codex2Manually: put the files in place
.agents/skills/makepad-2.0-splash/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add ZhangHanDong/makepad-skills --skill makepad-2.0-splash -a cursor2Manually: put the files in place
.cursor/skills/makepad-2.0-splash/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install ZhangHanDong/makepad-skills makepad-2.0-splash2Manually: put the files in place
.github/skills/makepad-2.0-splash/SKILL.md1Skills CLI (Vercel)
npx skills add ZhangHanDong/makepad-skills --skill makepad-2.0-splash -a gemini-cli2Platform CLI
gemini skills install https://github.com/ZhangHanDong/makepad-skills --path skills/makepad-2.0-splashManually: put the files in place
.devin/skills/makepad-2.0-splash/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add ZhangHanDong/makepad-skills --skill makepad-2.0-splash -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-splash
How do I install makepad-2.0-splash in Claude Code?
Run npx skills add ZhangHanDong/makepad-skills --skill makepad-2.0-splash -a claude-code in your terminal. The tool places the skill definition into your project configuration.
What does makepad-2.0-splash do?
It teaches AI models how to write Splash scripting code for the Makepad 2.0 Rust framework. The skill covers VM bindings, hot reloading rules, and layout constraints.
Why does my Splash container disappear?
Splash containers collapse to 0px height if left on the default height: Fill. You must explicitly set height: Fit on UI containers.
