makepad-2.0-layout — Claude Code skill for layout and setup
This skill guides an agent through sizing widgets and arranging children in Makepad 2.0. Use it when building a screen or tracing an invisible container.
npx skills add ZhangHanDong/makepad-skills --skill makepad-2.0-layout -a claude-codeWhat makepad-2.0-layout does
The skill covers Makepad 2.0’s layout model: Walk controls a widget’s size, while Layout arranges its children. It helps an agent choose Fill or Fit, set flow direction, adjust spacing and padding, and align content. These are Makepad rules, not CSS flexbox or grid.
A key case is a Fill height inside a parent sized with Fit: the child’s height can resolve to zero, leaving the UI invisible. The guidance recommends setting height: Fit on containers in that situation; ScrollYView is an exception and uses height: Fill. The skill also covers fixed and constrained sizing, wrapping flow, and overlay layouts.
What it helps with
- size a widget with
FillorFit - arrange children in a row or column
- set container padding and widget margins
- trace a container that collapses to zero height
- align children within a container
Example prompts for the agent
- Build a Makepad 2.0 screen with a form and heading stacked vertically; choose suitable container heights.
- Inspect this Makepad layout and find why a container with
height: Filldisappears. - Arrange these cards in a row that wraps, with consistent gaps.
How to install makepad-2.0-layout
1Skills CLI (Vercel)
npx skills add ZhangHanDong/makepad-skills --skill makepad-2.0-layout -a claude-code2Manually: put the files in place
~/.claude/skills/makepad-2.0-layout/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/makepad-2.0-layout/
1Skills CLI (Vercel)
npx skills add ZhangHanDong/makepad-skills --skill makepad-2.0-layout -a codex2Manually: put the files in place
.agents/skills/makepad-2.0-layout/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add ZhangHanDong/makepad-skills --skill makepad-2.0-layout -a cursor2Manually: put the files in place
.cursor/skills/makepad-2.0-layout/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install ZhangHanDong/makepad-skills makepad-2.0-layout2Manually: put the files in place
.github/skills/makepad-2.0-layout/SKILL.md1Skills CLI (Vercel)
npx skills add ZhangHanDong/makepad-skills --skill makepad-2.0-layout -a gemini-cli2Platform CLI
gemini skills install https://github.com/ZhangHanDong/makepad-skills --path skills/makepad-2.0-layoutManually: put the files in place
.devin/skills/makepad-2.0-layout/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add ZhangHanDong/makepad-skills --skill makepad-2.0-layout -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-layout
How do I install makepad-2.0-layout in Claude Code?
Run npx skills add ZhangHanDong/makepad-skills --skill makepad-2.0-layout -a claude-code. The skill file is placed at ~/.claude/skills/makepad-2.0-layout/SKILL.md.
What does makepad-2.0-layout do?
It guides Makepad 2.0 layout work, including widget sizing, child flow, spacing, padding, and alignment. It also explains why some Fill heights collapse to zero inside Fit containers.
Why can a Makepad container become invisible?
A container using height: Fill inside a parent sized with Fit can end up with zero height. The guidance uses height: Fit for such containers, while ScrollYView uses Fill.
