makepad-2.0-layout

What it does

Makes an agent implement Makepad 2.0 layout behavior by outlining how widgets size themselves (Walk) and how containers arrange children (Layout). It covers width/height semantics, margin, padding, flow directions, alignment, clipping, insets, and scrollable containers (ScrollYView, ScrollXView, ScrollXYView). It also explains the Filler spacer, common patterns, and overlays guidance for popups.

How it works

The skill instructs the agent to treat each container widget as having both Walk properties (size) and Layout properties (how children are laid out). It defines concrete syntax for sizing (width/height values like Fill, Fit, fixed numbers, and constrained Fill) and for layout (flow directions, spacing, padding, align, clip_x/clip_y). It includes examples showing how to implement common patterns (vertical pages, toolbars, card grids, split panels) and how to use ScrollYView, ScrollXView, and ScrollXYView with explicit viewport rules. It also details Inset usage for padding and margin, and how Filler pushes siblings with rules about when to place it between Fit siblings. It provides guidance for overlay popups using walk.abs_pos rather than margin tweaks. It prescribes that Scrollable containers use height: Fill to provide a fixed viewport for scrolling. It includes a lot of explicit code samples and descriptive rules.

When to use it

Use when constructing UI with Makepad 2.0 layout semantics, particularly in scenarios requiring precise control over widget sizing (width/height constraints) and container layouts (flow, spacing, alignment), as well as when implementing scrollable content or popup overlays. Trigger phrases include makepad layout, makepad width, makepad height, makepad flex, makepad flow, and related terms in Chinese such as 布局, 对齐, 间距, 填充, 排版, 滚动视图, 尺寸, 宽度, 高度.

What it can touch

The skill references tools: claude-code. It documents widgets like View, ScrollYView, ScrollXView, ScrollXYView, Filler, Hr, Card, Splitter, SolidView, ButtonFlatter, ButtonFlat, Image, Label, Inset, and Margin/Padding constructs. It specifies usage of concepts like width, height, flow, align, padding, margin, clip_x, clip_y, and walk.abs_pos for overlays. It does not prescribe executing external scripts beyond code blocks shown, and it quotes commands and file names exactly as written in the skill (e.g., View{...}, ScrollYView{...}, Inset{...}).

Caveats

The skill emphasizes critical behavior: ensure height: Fit on containers to avoid circular 0px sizing, and only use Filler between Fit siblings. It notes that ScrollYView uses height: Fill for its viewport. It warns about overlay popup anchoring using top-level overlays for independent float behavior rather than relying on local overflow. It does not discuss licensing or external risk beyond these usage cautions. All facts are drawn directly from the described behavior and examples in the skill.