Help us improve
Share bugs, ideas, or general feedback.
From antigravity-bundle-makepad-builder
Generates Makepad UI layout code and explains sizing, alignment, padding, margins, flow for widgets using Walk, Fit, Fill, Align patterns.
npx claudepluginhub sickn33/antigravity-awesome-skills --plugin antigravity-bundle-makepad-builderHow this skill is triggered — by the user, by Claude, or both
Slash command
/antigravity-bundle-makepad-builder: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
Generates Makepad UI layout code and explains sizing, alignment, padding, margins, flow for widgets using Walk, Fit, Fill, Align patterns.
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.
Guides Next.js Cache Components and Partial Prerendering (PPR): 'use cache' directives, cacheLife(), cacheTag(), revalidateTag() for caching, invalidation, static/dynamic optimization. Auto-activates on cacheComponents: true.
Share bugs, ideas, or general feedback.
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 content