makepad-layout – skill Khác cho agent AI

Supporting material availability

This catalog copy contains the inline guidance below, but does not include the following supporting paths. They are external prerequisites, not bundled files:

• ./references/layout-system.md
• ./references/core-types.md

Ask for the original supporting material or an existing installation before using a step that depends on these paths; this catalog does not identify a verified download source for them. Resolve each path relative to that installation, inspect its contents, and verify any applicable license and execution prerequisites. Do not run a command or claim a referenced procedure was followed until its required file exists. Do not fabricate the missing scripts or treat an unrelated file with the same name as equivalent. Independent steps fully documented here can proceed within the user’s authorized scope; report any dependent step as unavailable.

Makepad Layout Skill

> 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:

• Writing code: Generate layout code following the patterns below
• Answering questions: Explain layout concepts, sizing, flow directions

When to Use

• You need to size, align, or position widgets in a Makepad UI.
• The task involves Walk, Align, Fit, Fill, padding, spacing, or container flow configuration.
• You want Makepad-specific layout solutions for centering, responsiveness, or composition.

Documentation

Refer to the local files for detailed documentation:

• ./references/layout-system.md - Complete layout reference
• ./references/core-types.md - Walk, Align, Margin, Padding types

IMPORTANT: Documentation Completeness Check

Before answering questions, Claude MUST:

1. Read the relevant reference file(s) listed above

2. If file read fails or file is empty:

• Report missing references; do not invent or run an unbundled force-sync command.
• Still answer based on SKILL.md patterns + built-in knowledge

3. If reference file exists, incorporate its content into the answer

Patterns and enum/property names below describe a historical dev revision; verify the actual pinned crate source. Render at representative viewport/text scale and inspect clipping, overflow, keyboard focus and content sizing; a Fill/Fit layout sketch is not proof of responsiveness or accessibility.

Key Patterns

1. Basic Layout Container

<View> {
    width: Fill
    height: Fill
    flow: Down
    padding: 16.0
    spacing: 8.0

    <Label> { text: "Item 1" }
    <Label> { text: "Item 2" }
}

2. Centering Content

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

    <Label> { text: "Centered" }
}

3. Horizontal Row Layout

<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" }
}

4. Fixed + Flexible Layout

<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
    }
}

Layout Properties Reference

| 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 |

Size Values

| Value | Description |

|-------|-------------|

| Fit | Size to fit content |

| Fill | Fill available space |

| 100.0 | Fixed size in pixels |

| Fixed(100.0) | Explicit fixed size |

Flow Directions

| Value | Description |

|-------|-------------|

| Down | Top to bottom (column) |

| Right | Left to right (row) |

| Overlay | Stack on top |

Align Values

| 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 |

Box Model

+---------------------------+
|         margin            |
|  +---------------------+  |
|  |      padding        |  |
|  |  +---------------+  |  |
|  |  |   content     |  |  |
|  |  +---------------+  |  |
|  +---------------------+  |
+---------------------------+

When Writing Code

1. Use Fill for flexible containers, Fit for content-sized elements

2. Set flow: Down for vertical, flow: Right for horizontal

3. Use empty <View> { width: Fill } as spacer in row layouts

4. Always set explicit dimensions on fixed-size elements

5. Use align to position children within container

When Answering Questions

1. Makepad uses a "turtle" layout model - elements laid out sequentially

2. Fill takes all available space, Fit shrinks to content

3. Unlike CSS flexbox, there's no flex-grow/shrink - use Fill/Fit

4. Alignment applies to children, not the element itself

Limitations

• Use this skill only when the task clearly matches the scope described above.
• Do not treat the output as a substitute for environment-specific validation, testing, or expert review.
• Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.