{"id":"7aa615aa-1d3c-475c-bd81-68394d91789c","shortId":"sKuMKg","kind":"skill","title":"makepad-layout","tagline":"CRITICAL: Use for Makepad layout system. Triggers on:\nmakepad layout, makepad width, makepad height, makepad flex,\nmakepad padding, makepad margin, makepad flow, makepad align,\nFit, Fill, Size, Walk, \"how to center in makepad\",\nmakepad 布局, makepad 宽度, makepad 对齐, makepad 居中","description":"# Makepad Layout Skill\n\n> **Version:** makepad-widgets (dev branch) | **Last Updated:** 2026-01-19\n>\n> Check for updates: https://crates.io/crates/makepad-widgets\n\nYou are an expert at Makepad layout system. Help users by:\n- **Writing code**: Generate layout code following the patterns below\n- **Answering questions**: Explain layout concepts, sizing, flow directions\n\n## When to Use\n- You need to size, align, or position widgets in a Makepad UI.\n- The task involves `Walk`, `Align`, `Fit`, `Fill`, padding, spacing, or container flow configuration.\n- You want Makepad-specific layout solutions for centering, responsiveness, or composition.\n\n## Documentation\n\nRefer to the local files for detailed documentation:\n- `./references/layout-system.md` - Complete layout reference\n- `./references/core-types.md` - Walk, Align, Margin, Padding types\n\n## IMPORTANT: Documentation Completeness Check\n\n**Before answering questions, Claude MUST:**\n\n1. Read the relevant reference file(s) listed above\n2. If file read fails or file is empty:\n   - Inform user: \"本地文档不完整，建议运行 `/sync-crate-skills makepad --force` 更新文档\"\n   - Still answer based on SKILL.md patterns + built-in knowledge\n3. If reference file exists, incorporate its content into the answer\n\n## Key Patterns\n\n### 1. Basic Layout Container\n\n```rust\n<View> {\n    width: Fill\n    height: Fill\n    flow: Down\n    padding: 16.0\n    spacing: 8.0\n\n    <Label> { text: \"Item 1\" }\n    <Label> { text: \"Item 2\" }\n}\n```\n\n### 2. Centering Content\n\n```rust\n<View> {\n    width: Fill\n    height: Fill\n    align: { x: 0.5, y: 0.5 }\n\n    <Label> { text: \"Centered\" }\n}\n```\n\n### 3. Horizontal Row Layout\n\n```rust\n<View> {\n    width: Fill\n    height: Fit\n    flow: Right\n    spacing: 10.0\n    align: { y: 0.5 }  // Vertically center items\n\n    <Button> { text: \"Left\" }\n    <View> { width: Fill }  // Spacer\n    <Button> { text: \"Right\" }\n}\n```\n\n### 4. Fixed + Flexible Layout\n\n```rust\n<View> {\n    width: Fill\n    height: Fill\n    flow: Down\n\n    // Fixed header\n    <View> {\n        width: Fill\n        height: 60.0\n    }\n\n    // Flexible content\n    <View> {\n        width: Fill\n        height: Fill  // Takes remaining space\n    }\n}\n```\n\n## Layout Properties Reference\n\n| Property | Type | Description |\n|----------|------|-------------|\n| `width` | Size | Width of element |\n| `height` | Size | Height of element |\n| `padding` | Padding | Inner spacing |\n| `margin` | Margin | Outer spacing |\n| `flow` | Flow | Child layout direction |\n| `spacing` | f64 | Gap between children |\n| `align` | Align | Child alignment |\n| `clip_x` | bool | Clip horizontal overflow |\n| `clip_y` | bool | Clip vertical overflow |\n\n## Size Values\n\n| Value | Description |\n|-------|-------------|\n| `Fit` | Size to fit content |\n| `Fill` | Fill available space |\n| `100.0` | Fixed size in pixels |\n| `Fixed(100.0)` | Explicit fixed size |\n\n## Flow Directions\n\n| Value | Description |\n|-------|-------------|\n| `Down` | Top to bottom (column) |\n| `Right` | Left to right (row) |\n| `Overlay` | Stack on top |\n\n## Align Values\n\n| Value | Position |\n|-------|----------|\n| `{ x: 0.0, y: 0.0 }` | Top-left |\n| `{ x: 0.5, y: 0.0 }` | Top-center |\n| `{ x: 1.0, y: 0.0 }` | Top-right |\n| `{ x: 0.0, y: 0.5 }` | Middle-left |\n| `{ x: 0.5, y: 0.5 }` | Center |\n| `{ x: 1.0, y: 0.5 }` | Middle-right |\n| `{ x: 0.0, y: 1.0 }` | Bottom-left |\n| `{ x: 0.5, y: 1.0 }` | Bottom-center |\n| `{ x: 1.0, y: 1.0 }` | Bottom-right |\n\n## Box Model\n\n```\n+---------------------------+\n|         margin            |\n|  +---------------------+  |\n|  |      padding        |  |\n|  |  +---------------+  |  |\n|  |  |   content     |  |  |\n|  |  +---------------+  |  |\n|  +---------------------+  |\n+---------------------------+\n```\n\n## When Writing Code\n\n1. Use `Fill` for flexible containers, `Fit` for content-sized elements\n2. Set `flow: Down` for vertical, `flow: Right` for horizontal\n3. Use empty `<View> { width: Fill }` as spacer in row layouts\n4. Always set explicit dimensions on fixed-size elements\n5. Use `align` to position children within container\n\n## When Answering Questions\n\n1. Makepad uses a \"turtle\" layout model - elements laid out sequentially\n2. `Fill` takes all available space, `Fit` shrinks to content\n3. Unlike CSS flexbox, there's no flex-grow/shrink - use Fill/Fit\n4. Alignment applies to children, not the element itself\n\n## Limitations\n- Use this skill only when the task clearly matches the scope described above.\n- Do not treat the output as a substitute for environment-specific validation, testing, or expert review.\n- Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.","tags":["makepad","layout","antigravity","awesome","skills","sickn33","agent-skills","agentic-skills","ai-agent-skills","ai-agents","ai-coding","ai-workflows"],"capabilities":["skill","source-sickn33","skill-makepad-layout","topic-agent-skills","topic-agentic-skills","topic-ai-agent-skills","topic-ai-agents","topic-ai-coding","topic-ai-workflows","topic-antigravity","topic-antigravity-skills","topic-claude-code","topic-claude-code-skills","topic-codex-cli","topic-codex-skills"],"categories":["antigravity-awesome-skills"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/sickn33/antigravity-awesome-skills/makepad-layout","protocol":"skill","transport":"skills-sh","auth":{"type":"none","details":{"cli":"npx skills add sickn33/antigravity-awesome-skills","source_repo":"https://github.com/sickn33/antigravity-awesome-skills","install_from":"skills.sh"}},"qualityScore":"0.700","qualityRationale":"deterministic score 0.70 from registry signals: · indexed on github topic:agent-skills · 34726 github stars · SKILL.md body (4,656 chars)","verified":false,"liveness":"unknown","lastLivenessCheck":null,"agentReviews":{"count":0,"score_avg":null,"cost_usd_avg":null,"success_rate":null,"latency_p50_ms":null,"narrative_summary":null,"summary_updated_at":null},"enrichmentModel":"deterministic:skill-github:v1","enrichmentVersion":1,"enrichedAt":"2026-04-23T12:51:12.652Z","embedding":null,"createdAt":"2026-04-18T21:40:25.780Z","updatedAt":"2026-04-23T12:51:12.652Z","lastSeenAt":"2026-04-23T12:51:12.652Z","tsv":"'-01':57 '-19':58 '/crates/makepad-widgets':64 '/references/core-types.md':146 '/references/layout-system.md':142 '/shrink':546 '/sync-crate-skills':183 '0.0':394,396,403,410,415,434 '0.5':241,243,261,401,417,422,424,429,441 '1':161,210,227,462,515 '1.0':408,427,436,443,448,450 '10.0':258 '100.0':361,367 '16.0':222 '2':170,230,231,474,526 '2026':56 '3':197,246,484,536 '4':272,494,549 '5':504 '60.0':288 '8.0':224 'align':27,100,112,148,239,259,332,333,335,389,506,550 'alway':495 'answer':85,157,188,207,513 'appli':551 'ask':591 'avail':359,530 'base':189 'basic':211 'bool':338,344 'bottom':378,438,445,452 'bottom-cent':444 'bottom-left':437 'bottom-right':451 'boundari':599 'box':454 'branch':53 'built':194 'built-in':193 'center':34,129,232,245,263,406,425,446 'check':59,155 'child':324,334 'children':331,509,553 'clarif':593 'claud':159 'clear':566 'clip':336,339,342,345 'code':77,80,461 'column':379 'complet':143,154 'composit':132 'concept':89 'configur':120 'contain':118,213,467,511 'content':204,233,290,356,458,471,535 'content-s':470 'crates.io':63 'crates.io/crates/makepad-widgets':62 'criteria':602 'critic':4 'css':538 'describ':570 'descript':303,351,374 'detail':140 'dev':52 'dimens':498 'direct':92,326,372 'document':133,141,153 'element':308,313,473,503,522,556 'empti':178,486 'environ':582 'environment-specif':581 'exist':201 'expert':68,587 'explain':87 'explicit':368,497 'f64':328 'fail':174 'file':138,166,172,176,200 'fill':29,114,216,218,236,238,252,268,278,280,286,292,294,357,358,464,488,527 'fill/fit':548 'fit':28,113,254,352,355,468,532 'fix':273,283,362,366,369,501 'fixed-s':500 'flex':19,544 'flex-grow':543 'flexbox':539 'flexibl':274,289,466 'flow':25,91,119,219,255,281,322,323,371,476,480 'follow':81 'forc':185 'gap':329 'generat':78 'grow':545 'header':284 'height':17,217,237,253,279,287,293,309,311 'help':73 'horizont':247,340,483 'import':152 'incorpor':202 'inform':179 'inner':316 'input':596 'involv':110 'item':226,229,264 'key':208 'knowledg':196 'laid':523 'last':54 'layout':3,8,13,46,71,79,88,126,144,212,249,275,298,325,493,520 'left':266,381,399,420,439 'limit':558 'list':168 'local':137 'makepad':2,7,12,14,16,18,20,22,24,26,36,37,39,41,43,45,50,70,106,124,184,516 'makepad-layout':1 'makepad-specif':123 'makepad-widget':49 'margin':23,149,318,319,456 'match':567 'middl':419,431 'middle-left':418 'middle-right':430 'miss':604 'model':455,521 'must':160 'need':97 'outer':320 'output':576 'overflow':341,347 'overlay':385 'pad':21,115,150,221,314,315,457 'pattern':83,192,209 'permiss':597 'pixel':365 'posit':102,392,508 'properti':299,301 'question':86,158,514 'read':162,173 'refer':134,145,165,199,300 'relev':164 'remain':296 'requir':595 'respons':130 'review':588 'right':256,271,380,383,413,432,453,481 'row':248,384,492 'rust':214,234,250,276 'safeti':598 'scope':569 'sequenti':525 'set':475,496 'shrink':533 'size':30,90,99,305,310,348,353,363,370,472,502 'skill':47,561 'skill-makepad-layout' 'skill.md':191 'solut':127 'source-sickn33' 'space':116,223,257,297,317,321,327,360,531 'spacer':269,490 'specif':125,583 'stack':386 'still':187 'stop':589 'substitut':579 'success':601 'system':9,72 'take':295,528 'task':109,565 'test':585 'text':225,228,244,265,270 'top':376,388,398,405,412 'top-cent':404 'top-left':397 'top-right':411 'topic-agent-skills' 'topic-agentic-skills' 'topic-ai-agent-skills' 'topic-ai-agents' 'topic-ai-coding' 'topic-ai-workflows' 'topic-antigravity' 'topic-antigravity-skills' 'topic-claude-code' 'topic-claude-code-skills' 'topic-codex-cli' 'topic-codex-skills' 'treat':574 'trigger':10 'turtl':519 'type':151,302 'ui':107 'unlik':537 'updat':55,61 'use':5,95,463,485,505,517,547,559 'user':74,180 'valid':584 'valu':349,350,373,390,391 'version':48 'vertic':262,346,479 'walk':31,111,147 'want':122 'widget':51,103 'width':15,215,235,251,267,277,285,291,304,306,487 'within':510 'write':76,460 'x':240,337,393,400,407,414,421,426,433,440,447 'y':242,260,343,395,402,409,416,423,428,435,442,449 '宽度':40 '对齐':42 '居中':44 '布局':38 '建议运行':182 '更新文档':186 '本地文档不完整':181","prices":[{"id":"ae3eec3f-7d45-4ac1-b114-116a67802da0","listingId":"7aa615aa-1d3c-475c-bd81-68394d91789c","amountUsd":"0","unit":"free","nativeCurrency":null,"nativeAmount":null,"chain":null,"payTo":null,"paymentMethod":"skill-free","isPrimary":true,"details":{"org":"sickn33","category":"antigravity-awesome-skills","install_from":"skills.sh"},"createdAt":"2026-04-18T21:40:25.780Z"}],"sources":[{"listingId":"7aa615aa-1d3c-475c-bd81-68394d91789c","source":"github","sourceId":"sickn33/antigravity-awesome-skills/makepad-layout","sourceUrl":"https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/makepad-layout","isPrimary":false,"firstSeenAt":"2026-04-18T21:40:25.780Z","lastSeenAt":"2026-04-23T12:51:12.652Z"}],"details":{"listingId":"7aa615aa-1d3c-475c-bd81-68394d91789c","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"sickn33","slug":"makepad-layout","github":{"repo":"sickn33/antigravity-awesome-skills","stars":34726,"topics":["agent-skills","agentic-skills","ai-agent-skills","ai-agents","ai-coding","ai-workflows","antigravity","antigravity-skills","claude-code","claude-code-skills","codex-cli","codex-skills","cursor","cursor-skills","developer-tools","gemini-cli","gemini-skills","kiro","mcp","skill-library"],"license":"mit","html_url":"https://github.com/sickn33/antigravity-awesome-skills","pushed_at":"2026-04-23T06:41:03Z","description":"Installable GitHub library of 1,400+ agentic skills for Claude Code, Cursor, Codex CLI, Gemini CLI, Antigravity, and more. Includes installer CLI, bundles, workflows, and official/community skill collections.","skill_md_sha":"9b20bb0f2b74c1ed298ee4d1568d1a2744806a54","skill_md_path":"skills/makepad-layout/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/makepad-layout"},"layout":"multi","source":"github","category":"antigravity-awesome-skills","frontmatter":{"name":"makepad-layout","description":"CRITICAL: Use for Makepad layout system. Triggers on:\nmakepad layout, makepad width, makepad height, makepad flex,\nmakepad padding, makepad margin, makepad flow, makepad align,\nFit, Fill, Size, Walk, \"how to center in makepad\",\nmakepad 布局, makepad 宽度, makepad 对齐, makepad 居中"},"skills_sh_url":"https://skills.sh/sickn33/antigravity-awesome-skills/makepad-layout"},"updatedAt":"2026-04-23T12:51:12.652Z"}}