makepad-2.0-widgets — Claude Code skill: Makepad widget catalog
Tells your agent which widgets Makepad 2.0 ships and how to write them in Splash. Useful when you build UI and keep forgetting property names.
npx skills add ZhangHanDong/makepad-skills --skill makepad-2.0-widgets -a claude-codeWhat makepad-2.0-widgets does
The skill carries a catalog of Makepad 2.0 built-in widgets: containers, text, buttons, toggles, sliders, lists, modals and the dock system. They are written in Splash syntax and registered through script_mod!. Two reference files back it up: ./references/widget-catalog.md with the full list and properties, and ./references/widget-advanced.md covering PortalList, Dock, MapView and custom widgets. The agent is expected to read the relevant file before answering.
A separate section lists the mistakes that bite. Containers need height: Fit or the content collapses to zero. A colored container with text needs new_batch: true, otherwise the text sits behind the background. Label defaults to white and silently ignores an animator, so wrap it in a View. MapView needs a fixed height. Worth checking your layout when an element refuses to show up.
There are ready patterns for a card, a form input and a scrollable list to start from. Install works across Claude, Codex, Cursor, GitHub Copilot, Gemini CLI and OpenCode, each with its own SKILL.md path. The source text is truncated, so check the repository for the full set of examples.
What it helps with
- recall the exact widget name for vertical scrolling
- build a card with background and rounded corners without property mistakes
- figure out why text disappeared behind a container background
- pick between
PortalListandFlatListfor a long list - put together a modal dialog or dock panel in Makepad
Example prompts for the agent
- Show me the Makepad 2.0 widget catalog and their properties
- How do I build a scrollable list in Makepad with PortalList?
- Why is my Label invisible inside a RoundedView with a colored background?
How to install makepad-2.0-widgets
1Skills CLI (Vercel)
npx skills add ZhangHanDong/makepad-skills --skill makepad-2.0-widgets -a claude-code2Manually: put the files in place
~/.claude/skills/makepad-2.0-widgets/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/makepad-2.0-widgets/
1Skills CLI (Vercel)
npx skills add ZhangHanDong/makepad-skills --skill makepad-2.0-widgets -a codex2Manually: put the files in place
.agents/skills/makepad-2.0-widgets/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add ZhangHanDong/makepad-skills --skill makepad-2.0-widgets -a cursor2Manually: put the files in place
.cursor/skills/makepad-2.0-widgets/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install ZhangHanDong/makepad-skills makepad-2.0-widgets2Manually: put the files in place
.github/skills/makepad-2.0-widgets/SKILL.md1Skills CLI (Vercel)
npx skills add ZhangHanDong/makepad-skills --skill makepad-2.0-widgets -a gemini-cli2Platform CLI
gemini skills install https://github.com/ZhangHanDong/makepad-skills --path skills/makepad-2.0-widgetsManually: put the files in place
.devin/skills/makepad-2.0-widgets/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add ZhangHanDong/makepad-skills --skill makepad-2.0-widgets -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-widgets
How do I install makepad-2.0-widgets in Claude?
Run npx skills add ZhangHanDong/makepad-skills --skill makepad-2.0-widgets -a claude-code. The skill file lands at ~/.claude/skills/makepad-2.0-widgets/SKILL.md.
What does makepad-2.0-widgets do?
It gives the agent a reference for Makepad 2.0 widgets and the rules for using them in Splash, so it stops inventing property names.
Which platforms are supported?
Claude, Codex, Cursor, GitHub Copilot, Gemini CLI and OpenCode. GitHub Copilot uses a different command: gh skill install ZhangHanDong/makepad-skills makepad-2.0-widgets.
