Generate Makepad UI Layout Code

Makepad Layout Skill is an expert guide to Makepad's UI layout system - sizing, aligning, and positioning widgets via Walk, Align, Fit, Fill, padding, spacing, and flow direction. Before answering, it reads local reference files (layout-system.md, core-types.md) and incorporates their content; if those files are missing or empty, it still answers from its own built-in patterns while telling the user to run /sync-crate-skills makepad --force to refresh the docs.

Use it whenever a task involves sizing, aligning, or positioning widgets in a Makepad UI - anything touching Walk, Align, Fit, Fill, padding, spacing, or container flow configuration, including Makepad-specific centering, responsiveness, or composition problems. It is specific to Makepad's own model: unlike CSS flexbox, there is no flex-grow or flex-shrink, and Makepad uses a "turtle" layout model where elements are laid out sequentially rather than via a constraint solver.

Input: a widget layout requirement - center content, build a row with a spacer, split a fixed header from flexible content. Output: Rust view code following named patterns - a basic vertical container (flow: Down, padding, spacing), centered content (align: { x: 0.5, y: 0.5 }), a horizontal row with a <View> { width: Fill } spacer pushing elements apart, and a fixed-height header paired with a height: Fill flexible content area - built from a documented property set (width, height, padding, margin, flow, spacing, align, clip_x, clip_y), size values (Fit, Fill, a fixed pixel number, or Fixed(100.0)), flow directions (Down, Right, Overlay), and the nine standard alignment positions from top-left to bottom-right.

<View> {
    width: Fill
    height: Fill
    align: { x: 0.5, y: 0.5 }

    <Label> { text: "Centered" }
}

General rules it applies when writing code: use Fill for flexible containers and Fit for content-sized ones, set explicit dimensions on fixed-size elements, and remember that align positions a container's children, not the container itself.

Draws on the makepad-widgets crate, tracking its dev branch, and two bundled reference files for the layout system and core types, refreshed via the /sync-crate-skills makepad --force command when local docs are stale or missing.

Developers building Makepad UIs in Rust who need correct sizing, alignment, and flow-direction code - vertical stacks, centered content, horizontal rows with spacers, or fixed-header-plus-flexible-body layouts - or who want Makepad's layout model, Fill/Fit sizing and its turtle-based sequential layout distinct from CSS flexbox, explained clearly.