CRITICAL: Use for Makepad layout system. Triggers on: makepad layout, makepad width, makepad height, makepad flex, makepad padding, makepad margin, makepad flow, makepad align, Fit, Fill, Size, Walk, "how to center in makepad", makepad 布局, makepad 宽度, makepad 对齐, makepad 居中
Generates Makepad layout code for responsive UIs using Fill, Fit, and flow directions.
/plugin marketplace add ZhangHanDong/makepad-skills/plugin install zhanghandong-makepad-skills@ZhangHanDong/makepad-skillsThis skill inherits all available tools. When active, it can use any tool Claude has access to.
references/core-types.mdreferences/layout-system.mdVersion: 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 contentThis skill should be used when the user asks to "create a hookify rule", "write a hook rule", "configure hookify", "add a hookify rule", or needs guidance on hookify rule syntax and patterns.
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.