From antigravity-awesome-skills
Generates Makepad UI layout code and explains sizing, alignment, padding, margins, flow for widgets using Walk, Fit, Fill, Align patterns.
How this skill is triggered — by the user, by Claude, or both
Slash command
/antigravity-awesome-skills:makepad-layoutThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
> **Version:** makepad-widgets (dev branch) | **Last Updated:** 2026-01-19
Version: makepad-widgets (dev branch) | Last Updated: 2026-01-19
Check for updates: https://crates.io/crates/makepad-widgets
You are an expert at Makepad layout system. Help users by:
Walk, Align, Fit, Fill, padding, spacing, or container flow configuration.Refer to the local files for detailed documentation:
./references/layout-system.md - Complete layout reference./references/core-types.md - Walk, Align, Margin, Padding typesBefore answering questions, Claude MUST:
/sync-crate-skills makepad --force 更新文档"<View> {
width: Fill
height: Fill
flow: Down
padding: 16.0
spacing: 8.0
<Label> { text: "Item 1" }
<Label> { text: "Item 2" }
}
<View> {
width: Fill
height: Fill
align: { x: 0.5, y: 0.5 }
<Label> { text: "Centered" }
}
<View> {
width: Fill
height: Fit
flow: Right
spacing: 10.0
align: { y: 0.5 } // Vertically center items
<Button> { text: "Left" }
<View> { width: Fill } // Spacer
<Button> { text: "Right" }
}
<View> {
width: Fill
height: Fill
flow: Down
// Fixed header
<View> {
width: Fill
height: 60.0
}
// Flexible content
<View> {
width: Fill
height: Fill // Takes remaining space
}
}
| Property | Type | Description |
|---|---|---|
width | Size | Width of element |
height | Size | Height of element |
padding | Padding | Inner spacing |
margin | Margin | Outer spacing |
flow | Flow | Child layout direction |
spacing | f64 | Gap between children |
align | Align | Child alignment |
clip_x | bool | Clip horizontal overflow |
clip_y | bool | Clip vertical overflow |
| Value | Description |
|---|---|
Fit | Size to fit content |
Fill | Fill available space |
100.0 | Fixed size in pixels |
Fixed(100.0) | Explicit fixed size |
| Value | Description |
|---|---|
Down | Top to bottom (column) |
Right | Left to right (row) |
Overlay | Stack on top |
| Value | Position |
|---|---|
{ x: 0.0, y: 0.0 } | Top-left |
{ x: 0.5, y: 0.0 } | Top-center |
{ x: 1.0, y: 0.0 } | Top-right |
{ x: 0.0, y: 0.5 } | Middle-left |
{ x: 0.5, y: 0.5 } | Center |
{ x: 1.0, y: 0.5 } | Middle-right |
{ x: 0.0, y: 1.0 } | Bottom-left |
{ x: 0.5, y: 1.0 } | Bottom-center |
{ x: 1.0, y: 1.0 } | Bottom-right |
+---------------------------+
| margin |
| +---------------------+ |
| | padding | |
| | +---------------+ | |
| | | content | | |
| | +---------------+ | |
| +---------------------+ |
+---------------------------+
Fill for flexible containers, Fit for content-sized elementsflow: Down for vertical, flow: Right for horizontal<View> { width: Fill } as spacer in row layoutsalign to position children within containerFill takes all available space, Fit shrinks to contentnpx claudepluginhub sickn33/antigravity-awesome-skills --plugin antigravity-awesome-skillsGenerates Makepad UI layout code and explains sizing, alignment, padding, margins, flow for widgets using Walk, Fit, Fill, Align patterns.
Generates and explains Makepad UI layout code using Walk, Align, Fit, Fill, flow, padding, and spacing. Useful for centering, responsive sizing, and container composition.
Explains Makepad 2.0 layout turtle system: Walk sizing (width/height Fill, Fit, fixed, constraints) and Layout (flow, spacing, padding, align). Fixes height: Fit bugs causing 0px UI.