{"id":"49a06980-8eba-4d8e-ac18-2683153d631a","shortId":"DyBn7j","kind":"skill","title":"makepad-widgets","tagline":"Version: makepad-widgets (dev branch) | Last Updated: 2026-01-19 > > Check for updates: https://crates.io/crates/makepad-widgets","description":"# Makepad Widgets 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 widgets. Help users by:\n- **Writing code**: Generate widget code following the patterns below\n- **Answering questions**: Explain widget properties, variants, and usage\n\n## When to Use\n- You need to work with core or advanced widgets in Makepad.\n- The task involves widget selection, properties, variants, composition, or widget-specific behavior.\n- You want examples for `View`, `Button`, labels, rich text, or other `makepad-widgets` building blocks.\n\n## Documentation\n\nRefer to the local files for detailed documentation:\n- `./references/widgets-core.md` - Core widgets (View, Button, Label, etc.)\n- `./references/widgets-advanced.md` - Helper and advanced widgets\n- `./references/widgets-richtext.md` - Rich text widgets (Markdown, Html, TextFlow)\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. View (Basic Container)\n\n```rust\n<View> {\n    width: Fill\n    height: Fill\n    flow: Down\n    padding: 16.0\n    show_bg: true\n    draw_bg: { color: #1A1A1A }\n\n    <Label> { text: \"Content\" }\n}\n```\n\n### 2. Button\n\n```rust\n<Button> {\n    text: \"Click Me\"\n    draw_bg: {\n        color: #0066CC\n        color_hover: #0088FF\n        border_radius: 4.0\n    }\n    draw_text: {\n        color: #FFFFFF\n        text_style: { font_size: 14.0 }\n    }\n}\n```\n\n### 3. Label with Styling\n\n```rust\n<Label> {\n    width: Fit\n    height: Fit\n    text: \"Hello World\"\n    draw_text: {\n        color: #FFFFFF\n        text_style: {\n            font_size: 16.0\n            line_spacing: 1.4\n        }\n    }\n}\n```\n\n### 4. Image\n\n```rust\n<Image> {\n    width: 200.0\n    height: 150.0\n    source: dep(\"crate://self/resources/photo.png\")\n    fit: Contain\n}\n```\n\n### 5. TextInput\n\n```rust\n<TextInput> {\n    width: Fill\n    height: Fit\n    text: \"Default value\"\n    draw_text: {\n        text_style: { font_size: 14.0 }\n    }\n}\n```\n\n## Widget Traits (from source)\n\n```rust\npub trait WidgetNode: LiveApply {\n    fn find_widgets(&self, path: &[LiveId], cached: WidgetCache, results: &mut WidgetSet);\n    fn walk(&mut self, cx: &mut Cx) -> Walk;\n    fn area(&self) -> Area;\n    fn redraw(&mut self, cx: &mut Cx);\n}\n\npub trait Widget: WidgetNode {\n    fn handle_event(&mut self, cx: &mut Cx, event: &Event, scope: &mut Scope) {}\n    fn draw_walk(&mut self, cx: &mut Cx2d, scope: &mut Scope, walk: Walk) -> DrawStep;\n    fn draw(&mut self, cx: &mut Cx2d, scope: &mut Scope) -> DrawStep;\n    fn widget(&self, path: &[LiveId]) -> WidgetRef;\n}\n```\n\n## All Built-in Widgets (84 files in widgets/src/)\n\n| Category | Widgets |\n|----------|---------|\n| **Basic** | `View`, `Label`, `Button`, `Icon`, `Image` |\n| **Input** | `TextInput`, `CheckBox`, `RadioButton`, `Slider`, `DropDown`, `ColorPicker` |\n| **Container** | `ScrollBars`, `PortalList`, `FlatList`, `StackNavigation`, `Dock`, `Splitter` |\n| **Navigation** | `TabBar`, `Tab`, `FoldHeader`, `FoldButton`, `ExpandablePanel` |\n| **Overlay** | `Modal`, `Tooltip`, `PopupMenu`, `PopupNotification` |\n| **Media** | `Video`, `RotatedImage`, `ImageBlend`, `MultiImage` |\n| **Layout** | `AdaptiveView`, `SlidePanel`, `PageFlip`, `SlidesView` |\n| **Special** | `Markdown`, `Html`, `TextFlow`, `WebView`, `KeyboardView` |\n| **Utility** | `LoadingSpinner`, `DesktopButton`, `LinkLabel`, `ScrollShadow` |\n\n## Core Widgets Reference\n\n| Widget | Purpose | Key Properties |\n|--------|---------|----------------|\n| `View` | Container | `flow`, `align`, `show_bg`, `draw_bg`, `optimize` |\n| `Button` | Clickable | `text`, `draw_bg`, `draw_text`, `draw_icon` |\n| `Label` | Text display | `text`, `draw_text` |\n| `Image` | Image display | `source`, `fit` |\n| `TextInput` | Text entry | `text`, `draw_text`, `draw_cursor`, `draw_selection` |\n| `CheckBox` | Toggle | `text`, `selected` |\n| `RadioButton` | Selection | `text`, `selected` |\n| `Slider` | Value slider | `min`, `max`, `step` |\n| `DropDown` | Select menu | `labels`, `selected` |\n| `PortalList` | Virtual list | Efficient scrolling for large lists |\n| `Modal` | Dialog | Overlay dialog boxes |\n| `Tooltip` | Hint | Hover tooltips |\n\n## View Variants\n\n| Variant | Description |\n|---------|-------------|\n| `SolidView` | Solid background color |\n| `RoundedView` | Rounded corners |\n| `RoundedAllView` | Individual corner control |\n| `RectView` | Rectangle with border/gradient |\n| `CircleView` | Circle/ellipse shape |\n| `GradientXView` | Horizontal gradient |\n| `GradientYView` | Vertical gradient |\n| `RoundedShadowView` | Rounded with shadow |\n| `ScrollXView` | Horizontal scroll |\n| `ScrollYView` | Vertical scroll |\n| `ScrollXYView` | Both directions scroll |\n| `CachedView` | Texture-cached |\n\n## Button Variants\n\n| Variant | Description |\n|---------|-------------|\n| `ButtonFlat` | Flat style |\n| `ButtonFlatIcon` | Flat with icon |\n| `ButtonFlatter` | No background |\n| `ButtonGradientX` | Horizontal gradient |\n| `ButtonGradientY` | Vertical gradient |\n| `ButtonIcon` | Standard with icon |\n\n## ImageFit Values\n\n| Value | Description |\n|-------|-------------|\n| `Stretch` | Stretch to fill |\n| `Contain` | Fit within, preserve ratio |\n| `Cover` | Cover area, may crop |\n| `Fill` | Fill without ratio |\n\n## When Writing Code\n\n1. Always set `width` and `height` on widgets\n2. Use `show_bg: true` to enable background rendering\n3. Access `draw_bg`, `draw_text`, `draw_icon` for shader uniforms\n4. Use `dep(\"crate://self/...\")` for resource paths\n5. Choose appropriate View variant for visual needs\n\n## When Answering Questions\n\n1. Recommend UI Zoo example for widget exploration\n2. View is the base container - most visual widgets inherit from it\n3. Draw shaders (`draw_bg`, `draw_text`) control appearance\n4. All widgets support animation through `animator` property\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","widgets","antigravity","awesome","skills","sickn33","agent-skills","agentic-skills","ai-agent-skills","ai-agents","ai-coding","ai-workflows"],"capabilities":["skill","source-sickn33","skill-makepad-widgets","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-widgets","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 (6,511 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:13.043Z","embedding":null,"createdAt":"2026-04-18T21:40:30.350Z","updatedAt":"2026-04-23T12:51:13.043Z","lastSeenAt":"2026-04-23T12:51:13.043Z","tsv":"'-01':13,33 '-19':14,34 '/crates/makepad-widgets':20,40 '/references/widgets-advanced.md':127 '/references/widgets-core.md':120 '/references/widgets-richtext.md':132 '/sync-crate-skills':170 '0066cc':228 '0088ff':231 '1':148,197,624,670 '1.4':267 '14.0':243,296 '150.0':274 '16.0':209,264 '1a1a1a':216 '2':157,219,632,678 '200.0':272 '2026':12,32 '3':184,244,641,690 '4':268,652,699 '4.0':234 '5':280,659 '84':389 'access':642 'adaptiveview':432 'advanc':78,130 'align':457 'alway':625 'anim':703,705 'answer':60,144,175,194,668 'appear':698 'appropri':661 'area':326,328,614 'ask':740 'background':535,588,639 'base':176,682 'basic':199,395 'behavior':94 'bg':211,214,226,459,461,467,635,644,694 'block':110 'border':232 'border/gradient':547 'boundari':748 'box':524 'branch':9,29 'build':109 'built':181,386 'built-in':180,385 'button':100,124,220,398,463,575 'buttonflat':579 'buttonflaticon':582 'buttonflatt':586 'buttongradienti':592 'buttongradientx':589 'buttonicon':595 'cach':312,574 'cachedview':571 'categori':393 'check':15,35,142 'checkbox':403,493 'choos':660 'circle/ellipse':549 'circleview':548 'clarif':742 'claud':146 'clear':715 'click':223 'clickabl':464 'code':52,55,623 'color':215,227,229,237,258,536 'colorpick':407 'complet':141 'composit':89 'contain':200,279,408,455,607,683 'content':191,218 'control':543,697 'core':76,121,447 'corner':539,542 'cover':612,613 'crates.io':19,39 'crates.io/crates/makepad-widgets':18,38 'criteria':751 'crop':616 'cursor':490 'cx':321,323,333,335,345,347,358,371 'cx2d':360,373 'default':288 'dep':276,654 'describ':719 'descript':532,578,602 'desktopbutton':444 'detail':118 'dev':8,28 'dialog':521,523 'direct':569 'display':474,480 'dock':413 'document':111,119,140 'draw':213,225,235,256,290,354,368,460,466,468,470,476,487,489,491,643,645,647,691,693,695 'drawstep':366,377 'dropdown':406,507 'effici':515 'empti':165 'enabl':638 'entri':485 'environ':731 'environment-specif':730 'etc':126 'event':342,348,349 'exampl':97,674 'exist':188 'expandablepanel':420 'expert':44,736 'explain':62 'explor':677 'fail':161 'ffffff':238,259 'file':116,153,159,163,187,390 'fill':203,205,284,606,617,618 'find':307 'fit':250,252,278,286,482,608 'flat':580,583 'flatlist':411 'flow':206,456 'fn':306,317,325,329,340,353,367,378 'foldbutton':419 'foldhead':418 'follow':56 'font':241,262,294 'forc':172 'generat':53 'gradient':553,556,591,594 'gradientxview':551 'gradientyview':554 'handl':341 'height':204,251,273,285,629 'hello':254 'help':48 'helper':128 'hint':526 'horizont':552,562,590 'hover':230,527 'html':137,438 'icon':399,471,585,598,648 'imag':269,400,478,479 'imageblend':429 'imagefit':599 'import':139 'incorpor':189 'individu':541 'inform':166 'inherit':687 'input':401,745 'involv':84 'key':195,452 'keyboardview':441 'knowledg':183 'label':101,125,245,397,472,510 'larg':518 'last':10,30 'layout':431 'limit':707 'line':265 'linklabel':445 'list':155,514,519 'liveappli':305 'liveid':311,382 'loadingspinn':443 'local':115 'makepad':2,6,21,26,46,81,107,171 'makepad-widget':1,5,25,106 'markdown':136,437 'match':716 'max':505 'may':615 'media':426 'menu':509 'min':504 'miss':753 'modal':422,520 'multiimag':430 'must':147 'mut':315,319,322,331,334,343,346,351,356,359,362,369,372,375 'navig':415 'need':72,666 'optim':462 'output':725 'overlay':421,522 'pad':208 'pageflip':434 'path':310,381,658 'pattern':58,179,196 'permiss':746 'popupmenu':424 'popupnotif':425 'portallist':410,512 'preserv':610 'properti':64,87,453,706 'pub':302,336 'purpos':451 'question':61,145,669 'radiobutton':404,497 'radius':233 'ratio':611,620 'read':149,160 'recommend':671 'rectangl':545 'rectview':544 'redraw':330 'refer':112,152,186,449 'relev':151 'render':640 'requir':744 'resourc':657 'result':314 'review':737 'rich':102,133 'rotatedimag':428 'round':538,558 'roundedallview':540 'roundedshadowview':557 'roundedview':537 'rust':201,221,248,270,282,301 'safeti':747 'scope':350,352,361,363,374,376,718 'scroll':516,563,566,570 'scrollbar':409 'scrollshadow':446 'scrollxview':561 'scrollxyview':567 'scrollyview':564 'select':86,492,496,498,500,508,511 'self':309,320,327,332,344,357,370,380,655 'self/resources/photo.png':277 'set':626 'shader':650,692 'shadow':560 'shape':550 'show':210,458,634 'size':242,263,295 'skill':23,710 'skill-makepad-widgets' 'skill.md':178 'slidepanel':433 'slider':405,501,503 'slidesview':435 'solid':534 'solidview':533 'sourc':275,300,481 'source-sickn33' 'space':266 'special':436 'specif':93,732 'splitter':414 'stacknavig':412 'standard':596 'step':506 'still':174 'stop':738 'stretch':603,604 'style':240,247,261,293,581 'substitut':728 'success':750 'support':702 'tab':417 'tabbar':416 'task':83,714 'test':734 'text':103,134,217,222,236,239,253,257,260,287,291,292,465,469,473,475,477,484,486,488,495,499,646,696 'textflow':138,439 'textinput':281,402,483 'textur':573 'texture-cach':572 'toggl':494 'tooltip':423,525,528 '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' 'trait':298,303,337 'treat':723 'true':212,636 'ui':672 'uniform':651 'updat':11,17,31,37 'usag':67 'use':70,633,653,708 'user':49,167 'util':442 'valid':733 'valu':289,502,600,601 'variant':65,88,530,531,576,577,663 'version':4,24 'vertic':555,565,593 'video':427 'view':99,123,198,396,454,529,662,679 'virtual':513 'visual':665,685 'walk':318,324,355,364,365 'want':96 'webview':440 'widget':3,7,22,27,47,54,63,79,85,92,108,122,131,135,297,308,338,379,388,394,448,450,631,676,686,701 'widget-specif':91 'widgetcach':313 'widgetnod':304,339 'widgetref':383 'widgets/src':392 'widgetset':316 'width':202,249,271,283,627 'within':609 'without':619 'work':74 'world':255 'write':51,622 'zoo':673 '建议运行':169 '更新文档':173 '本地文档不完整':168","prices":[{"id":"00c60298-f795-44ac-a2f4-4f51da887daf","listingId":"49a06980-8eba-4d8e-ac18-2683153d631a","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:30.350Z"}],"sources":[{"listingId":"49a06980-8eba-4d8e-ac18-2683153d631a","source":"github","sourceId":"sickn33/antigravity-awesome-skills/makepad-widgets","sourceUrl":"https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/makepad-widgets","isPrimary":false,"firstSeenAt":"2026-04-18T21:40:30.350Z","lastSeenAt":"2026-04-23T12:51:13.043Z"}],"details":{"listingId":"49a06980-8eba-4d8e-ac18-2683153d631a","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"sickn33","slug":"makepad-widgets","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":"8a23faf2bde1fd0b57d0542b89543ed7380772d4","skill_md_path":"skills/makepad-widgets/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/makepad-widgets"},"layout":"multi","source":"github","category":"antigravity-awesome-skills","frontmatter":{"name":"makepad-widgets","description":"Version: makepad-widgets (dev branch) | Last Updated: 2026-01-19 > > Check for updates: https://crates.io/crates/makepad-widgets"},"skills_sh_url":"https://skills.sh/sickn33/antigravity-awesome-skills/makepad-widgets"},"updatedAt":"2026-04-23T12:51:13.043Z"}}