makepad-2.0-troubleshooting — Claude Code skill for Makepad 2.0 errors
A skill that walks through the usual Makepad 2.0 and Splash failures: layouts that never appear, text hidden behind a background, broken overrides. Useful when the UI compiles but looks wrong.
npx skills add ZhangHanDong/makepad-skills --skill makepad-2.0-troubleshooting -a claude-codeWhat makepad-2.0-troubleshooting does
Each entry follows the same shape: the symptom you see, the cause underneath, and the corrected code. First up is a container that resolves to zero height and hides everything inside it, plus text that stays invisible on a coloured background because of how draw calls are batched.
Splash specifics get their own write-ups. Named children use :=, static ones use : — mix them up and an override is dropped without a warning. Hex colours containing the letter e need the #x prefix, or the parser reads the digits as an exponent. border_radius wants a single f32, not an Inset. There is a catch with naming, too: a child deeper in the tree stays out of reach if any wrapper above it has no name, so Item{label.text: …} does nothing until every level on the path is labelled.
The skill points at two reference docs, AGENTS.md and splash.md. The height: Fit advice has an exception: under a parent with a fixed height, Fill is the right call.
What it helps with
- trace why a container collapsed to zero height
- make text visible again on a filled background
- fix a property override that is silently ignored
- get past a parse error on a hex colour with
e - set corner radius without breaking the layout
Example prompts for the agent
- My Makepad screen shows nothing at all — find where the height went to zero
- The label on my
RoundedViewis invisible even withdraw_text.colorset. What is batching doing here? - Overriding
title.texton theCardtemplate has no effect; the default still shows
How to install makepad-2.0-troubleshooting
1Skills CLI (Vercel)
npx skills add ZhangHanDong/makepad-skills --skill makepad-2.0-troubleshooting -a claude-code2Manually: put the files in place
~/.claude/skills/makepad-2.0-troubleshooting/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/makepad-2.0-troubleshooting/
1Skills CLI (Vercel)
npx skills add ZhangHanDong/makepad-skills --skill makepad-2.0-troubleshooting -a codex2Manually: put the files in place
.agents/skills/makepad-2.0-troubleshooting/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add ZhangHanDong/makepad-skills --skill makepad-2.0-troubleshooting -a cursor2Manually: put the files in place
.cursor/skills/makepad-2.0-troubleshooting/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install ZhangHanDong/makepad-skills makepad-2.0-troubleshooting2Manually: put the files in place
.github/skills/makepad-2.0-troubleshooting/SKILL.md1Skills CLI (Vercel)
npx skills add ZhangHanDong/makepad-skills --skill makepad-2.0-troubleshooting -a gemini-cli2Platform CLI
gemini skills install https://github.com/ZhangHanDong/makepad-skills --path skills/makepad-2.0-troubleshootingManually: put the files in place
.devin/skills/makepad-2.0-troubleshooting/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add ZhangHanDong/makepad-skills --skill makepad-2.0-troubleshooting -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-troubleshooting
How do I install makepad-2.0-troubleshooting in Claude Code?
Run npx skills add ZhangHanDong/makepad-skills --skill makepad-2.0-troubleshooting -a claude-code. The skill lands at ~/.claude/skills/makepad-2.0-troubleshooting/SKILL.md.
What does makepad-2.0-troubleshooting do?
It catalogues frequent Makepad 2.0 and Splash mistakes as symptom, cause and fix, so the agent proposes a working correction instead of guessing at your code.
Why is my child property override ignored?
Check the declaration. A child created with : is static and cannot be addressed, while := makes it named — and every container between the root and that child has to be named as well.