makepad-2.0-layout
by ZhangHanDongmakepad-2.0-layout is a Makepad 2.0 layout skill for translating UI ideas into valid Walk and Layout code. It helps with sizing, flow, spacing, padding, alignment, and scroll-container behavior, with practical guidance for design implementation, install, and usage. Use it when you need Makepad-specific layout decisions instead of generic CSS advice.
This skill scores 76/100, which means it is a solid but not premium directory listing: users get a clearly triggerable Makepad 2.0 layout guide with real examples and pattern references, but they should expect a focused, somewhat specialized skill rather than a broadly complete UI toolkit. It is worth installing if you work in Makepad and want fewer layout-syntax mistakes than a generic prompt would allow.
- Strong triggerability: the frontmatter explicitly says to use it for Makepad 2.0 layout and lists many concrete trigger phrases, including English and Chinese terms.
- Good operational depth: the body is large, organized with 8 H2s and 21 H3s, and explains the layout turtle model plus Walk/Layout concepts with code examples.
- Useful reference support: includes a dedicated references/layout-patterns.md file with working layout patterns and syntax notes.
- Narrow scope: it is specifically about Makepad 2.0 layout, so it will not help much outside sizing, flow, spacing, alignment, and scroll-view patterns.
- No install command or scripts are provided, so users must rely on the written guidance rather than any executable setup or validation workflow.
Overview of makepad-2.0-layout skill
What makepad-2.0-layout is for
The makepad-2.0-layout skill helps you work with Makepad 2.0’s layout turtle model, where sizing and arrangement are handled through Walk and Layout rather than CSS flexbox or grid. It is most useful when you need to translate a UI idea into valid Makepad layout code without guessing at Fill, Fit, Flow.Down, spacing, padding, alignment, or scroll-container behavior.
Who should install it
Install the makepad-2.0-layout skill if you are building Makepad UI, porting a layout from web/UI tooling, or repeatedly getting stuck on widget sizing and container flow. It is a strong fit for developers who need practical makepad-2.0-layout usage guidance for screens, panels, toolbars, lists, and nested views.
What makes it different
The main differentiator is that this makepad-2.0-layout skill is centered on Makepad-specific syntax and constraints, not generic UI advice. It surfaces the rule set that matters most for adoption: how widget size is claimed, how containers place children, and how scroll views interact with height and flow. That makes it more decision-useful than a quick repo skim when your blocker is “why does this view not size or scroll correctly?”
How to Use makepad-2.0-layout skill
Install and read first
Use the standard install flow for your skills setup, for example: npx skills add ZhangHanDong/makepad-skills --skill makepad-2.0-layout. After install, read skills/makepad-2.0-layout/SKILL.md first, then open references/layout-patterns.md for concrete examples. In this repo, those two files are the highest-signal starting points for makepad-2.0-layout install and immediate makepad-2.0-layout usage.
Turn a rough goal into a usable prompt
Good inputs describe the screen goal, the container type, and the sizing intent. For example, instead of asking for “a login page,” ask for: “Build a Makepad 2.0 login form with a centered card, vertical stack, fixed button height, text fields that fill width, and the card height fitting content.” That gives the skill enough context to choose between Fill and Fit, set flow, and avoid layout ambiguity.
Start with layout constraints, not visuals
When using the skill for Design Implementation, lead with constraints that affect the final structure: which part should stretch, which should shrink, where spacing belongs, and whether the content can scroll. The most common source of bad output is underspecified height behavior, especially inside containers and scroll views. If a section must not expand indefinitely, say so directly.
Match your request to Makepad’s layout model
The makepad-2.0-layout guide works best when you ask in Makepad terms: width: Fill, height: Fit, flow: Down, spacing, padding, align, and ScrollYView. If you are migrating from CSS, describe the intended effect, then ask for the equivalent Makepad layout structure rather than the CSS rule itself. That reduces translation errors and keeps the output aligned with the turtle model.
makepad-2.0-layout skill FAQ
Is this skill only for Makepad 2.0 projects?
Yes, this makepad-2.0-layout skill is for Makepad 2.0 layout work. It is not a general UI layout helper and should not be treated as a drop-in replacement for CSS or other framework patterns.
Do I need to be an expert to use it well?
No. Beginners can use it if they provide a concrete UI target and a few constraints. The skill is most helpful when you know the rough screen shape but are unsure how to express it in Makepad layout syntax.
When should I not use it?
Do not use it for visual design-only tasks, non-Makepad frameworks, or problems where layout behavior is already fully solved. If your issue is primarily branding, copy, or animation timing, the makepad-2.0-layout guide will add less value than a more specialized prompt.
How is it better than a normal prompt?
A normal prompt often produces generic flexbox language or vague structure. The makepad-2.0-layout skill is better when you need exact container behavior, sizing defaults, and scroll-aware layout decisions that match Makepad’s syntax and model.
How to Improve makepad-2.0-layout skill
Provide the missing dimensions up front
To get better makepad-2.0-layout usage results, specify which elements should be fixed, which should fit content, and which should absorb leftover space. A stronger input says: “Sidebar is 280px wide, content area fills remaining width, list scrolls vertically, header stays fit-height.” That lets the skill choose correct Walk values without backtracking.
State the nesting and flow explicitly
Many layout bugs come from unclear parent-child structure. Tell the skill whether children should stack vertically, sit in a row, or mix both across nested containers. If a section contains a header plus a scrolling body, mention both layers so the output uses the right flow and height behavior.
Check the first draft against Makepad constraints
Common failure modes are treating Fit like CSS auto-height, forgetting that scroll containers need a bounded height, and adding spacing in the wrong layer. After the first output, ask for a correction pass focused on one issue at a time, such as “fix the scroll region height” or “convert this row into a centered vertical stack.” Iterative tightening usually produces better Makepad code than one broad rewrite.