Generates Rust code for Makepad UI layouts and explains sizing (Fit/Fill), flow directions, alignment, padding, margins, and centering techniques.
From antigravity-bundle-makepad-buildernpx claudepluginhub sickn33/antigravity-awesome-skills --plugin antigravity-bundle-makepad-builderThis skill uses the workspace's default tool permissions.
Guides Next.js Cache Components and Partial Prerendering (PPR) with cacheComponents enabled. Implements 'use cache', cacheLife(), cacheTag(), revalidateTag(), static/dynamic optimization, and cache debugging.
Migrates code, prompts, and API calls from Claude Sonnet 4.0/4.5 or Opus 4.1 to Opus 4.5, updating model strings on Anthropic, AWS, GCP, Azure platforms.
Optimizes cloud costs on AWS, Azure, GCP via rightsizing, tagging strategies, reserved instances, spot usage, and spending analysis. Use for expense reduction and governance.
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:
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