{"id":"668ce612-4ad1-4f2f-b027-162cc8907a2f","shortId":"MC8K8t","kind":"skill","title":"makepad-basics","tagline":"CRITICAL: Use for Makepad getting started and app structure. Triggers on:\nmakepad, makepad getting started, makepad tutorial, live_design!, app_main!,\nmakepad project setup, makepad hello world, \"how to create makepad app\",\nmakepad 入门, 创建 makepad 应用, makepad 教程, makepad 项目结构","description":"# Makepad Basics 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 the Rust `makepad-widgets` crate. Help users by:\n- **Writing code**: Generate Rust code following the patterns below\n- **Answering questions**: Explain concepts, troubleshoot issues, reference documentation\n\n## When to Use\n- You need to get started with Makepad or understand basic app structure and boilerplate.\n- The task involves project setup, `live_design!`, `app_main!`, or first-screen application wiring.\n- You want foundational Makepad guidance before moving into more specific layout, widget, or shader topics.\n\n## Documentation\n\nRefer to the local files for detailed documentation:\n- `./references/app-structure.md` - Complete app boilerplate and structure\n- `./references/event-handling.md` - Event handling patterns\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 App Structure\n\n```rust\nuse makepad_widgets::*;\n\nlive_design! {\n    use link::theme::*;\n    use link::shaders::*;\n    use link::widgets::*;\n\n    App = {{App}} {\n        ui: <Root> {\n            main_window = <Window> {\n                body = <View> {\n                    width: Fill, height: Fill\n                    flow: Down\n\n                    <Label> { text: \"Hello Makepad!\" }\n                }\n            }\n        }\n    }\n}\n\napp_main!(App);\n\n#[derive(Live, LiveHook)]\npub struct App {\n    #[live] ui: WidgetRef,\n}\n\nimpl LiveRegister for App {\n    fn live_register(cx: &mut Cx) {\n        crate::makepad_widgets::live_design(cx);\n    }\n}\n\nimpl AppMain for App {\n    fn handle_event(&mut self, cx: &mut Cx, event: &Event) {\n        self.ui.handle_event(cx, event, &mut Scope::empty());\n    }\n}\n```\n\n### 2. Cargo.toml Setup\n\n```toml\n[package]\nname = \"my_app\"\nversion = \"0.1.0\"\nedition = \"2024\"\n\n[dependencies]\nmakepad-widgets = { git = \"https://github.com/makepad/makepad\", branch = \"dev\" }\n```\n\n### 3. Handling Button Clicks\n\n```rust\nimpl AppMain for App {\n    fn handle_event(&mut self, cx: &mut Cx, event: &Event) {\n        let actions = self.ui.handle_event(cx, event, &mut Scope::empty());\n\n        if self.ui.button(id!(my_button)).clicked(&actions) {\n            log!(\"Button clicked!\");\n        }\n    }\n}\n```\n\n### 4. Accessing and Modifying Widgets\n\n```rust\n// Get widget references\nlet label = self.ui.label(id!(my_label));\nlabel.set_text(\"Updated text\");\n\nlet input = self.ui.text_input(id!(my_input));\nlet text = input.text();\n```\n\n## API Reference Table\n\n| Macro/Type | Description | Example |\n|------------|-------------|---------|\n| `live_design!` | Defines UI in DSL | `live_design! { App = {{App}} { ... } }` |\n| `app_main!` | Entry point macro | `app_main!(App);` |\n| `#[derive(Live)]` | Derive live data | `#[derive(Live, LiveHook)]` |\n| `WidgetRef` | Reference to UI tree | `#[live] ui: WidgetRef` |\n| `Cx` | Context for rendering | `fn handle_event(&mut self, cx: &mut Cx, ...)` |\n| `id!()` | Widget ID macro | `self.ui.button(id!(my_button))` |\n\n## Platform Setup\n\n| Platform | Requirements |\n|----------|--------------|\n| macOS | Works out of the box |\n| Windows | Works out of the box |\n| Linux | `apt-get install clang libaudio-dev libpulse-dev libx11-dev libxcursor-dev` |\n| Web | `cargo install wasm-pack` |\n\n## When Writing Code\n\n1. Always include required imports: `use makepad_widgets::*;`\n2. Use `live_design!` macro for all UI definitions\n3. Implement `LiveRegister` and `AppMain` traits\n4. Use `id!()` macro for widget references\n5. Handle events through `handle_event` method\n\n## When Answering Questions\n\n1. Emphasize live design - changes in DSL reflect instantly without recompilation\n2. Makepad is GPU-first - all rendering is shader-based\n3. Cross-platform: same code runs on Android, iOS, Linux, macOS, Windows, Web\n4. Recommend UI Zoo example for widget exploration\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","basics","antigravity","awesome","skills","sickn33","agent-skills","agentic-skills","ai-agent-skills","ai-agents","ai-coding","ai-workflows"],"capabilities":["skill","source-sickn33","skill-makepad-basics","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-basics","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,571 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.326Z","embedding":null,"createdAt":"2026-04-18T21:40:22.020Z","updatedAt":"2026-04-23T12:51:12.326Z","lastSeenAt":"2026-04-23T12:51:12.326Z","tsv":"'-01':57 '-19':58 '/crates/makepad-widgets':64 '/makepad/makepad':322 '/references/app-structure.md':152 '/references/event-handling.md':158 '/sync-crate-skills':193 '0.1.0':312 '1':171,220,495,535 '2':180,303,503,546 '2024':314 '2026':56 '3':207,325,512,558 '4':363,518,572 '5':525 'access':364 'action':345,359 'alway':496 'android':566 'answer':88,167,198,217,533 'api':392 'app':11,23,35,109,120,154,222,239,240,254,256,262,269,285,310,333,406,407,408,413,415 'applic':126 'appmain':283,331,516 'apt':470 'apt-get':469 'ask':613 'base':199,557 'basic':3,46,108,221 'bodi':244 'boilerpl':112,155 'boundari':621 'box':461,467 'branch':53,323 'built':204 'built-in':203 'button':327,357,361,451 'cargo':487 'cargo.toml':304 'chang':539 'check':59,165 'clang':473 'clarif':615 'claud':169 'clear':588 'click':328,358,362 'code':80,83,494,563 'complet':153,164 'concept':91 'content':214 'context':433 'crate':75,276 'crates.io':63 'crates.io/crates/makepad-widgets':62 'creat':33 'criteria':624 'critic':4 'cross':560 'cross-platform':559 'cx':273,275,281,291,293,298,339,341,348,432,441,443 'data':420 'defin':400 'definit':511 'depend':315 'deriv':257,416,418,421 'describ':592 'descript':396 'design':22,119,229,280,399,405,506,538 'detail':150 'dev':52,324,476,479,482,485 'document':95,143,151,163 'dsl':403,541 'edit':313 'emphas':536 'empti':188,302,352 'entri':410 'environ':604 'environment-specif':603 'event':159,288,294,295,297,299,336,342,343,347,349,438,527,530 'exampl':397,576 'exist':211 'expert':68,609 'explain':90 'explor':579 'fail':184 'file':148,176,182,186,210 'fill':246,248 'first':124,551 'first-screen':123 'flow':249 'fn':270,286,334,436 'follow':84 'forc':195 'foundat':130 'generat':81 'get':8,17,102,369,471 'git':319 'github.com':321 'github.com/makepad/makepad':320 'gpu':550 'gpu-first':549 'guidanc':132 'handl':160,287,326,335,437,526,529 'height':247 'hello':29,252 'help':76 'id':355,375,386,444,446,449,520 'impl':266,282,330 'implement':513 'import':162,499 'includ':497 'incorpor':212 'inform':189 'input':383,385,388,618 'input.text':391 'instal':472,488 'instant':543 'involv':115 'io':567 'issu':93 'key':218 'knowledg':206 'label':373,377 'label.set':378 'last':54 'layout':138 'let':344,372,382,389 'libaudio':475 'libaudio-dev':474 'libpuls':478 'libpulse-dev':477 'libx11':481 'libx11-dev':480 'libxcursor':484 'libxcursor-dev':483 'limit':580 'link':231,234,237 'linux':468,568 'list':178 'live':21,118,228,258,263,271,279,398,404,417,419,422,429,505,537 'livehook':259,423 'liveregist':267,514 'local':147 'log':360 'maco':456,569 'macro':412,447,507,521 'macro/type':395 'main':24,121,242,255,409,414 'makepad':2,7,15,16,19,25,28,34,36,39,41,43,45,50,73,105,131,194,226,253,277,317,501,547 'makepad-bas':1 'makepad-widget':49,72,316 'match':589 'method':531 'miss':626 'modifi':366 'move':134 'must':170 'mut':274,289,292,300,337,340,350,439,442 'name':308 'need':100 'output':598 'pack':491 'packag':307 'pattern':86,161,202,219 'permiss':619 'platform':452,454,561 'point':411 'project':26,116 'pub':260 'question':89,168,534 'read':172,183 'recommend':573 'recompil':545 'refer':94,144,175,209,371,393,425,524 'reflect':542 'regist':272 'relev':174 'render':435,553 'requir':455,498,617 'review':610 'run':564 'rust':71,82,224,329,368 'safeti':620 'scope':301,351,591 'screen':125 'self':290,338,440 'self.ui.button':354,448 'self.ui.handle':296,346 'self.ui.label':374 'self.ui.text':384 'setup':27,117,305,453 'shader':141,235,556 'shader-bas':555 'skill':47,583 'skill-makepad-basics' 'skill.md':201 'source-sickn33' 'specif':137,605 'start':9,18,103 'still':197 'stop':611 'struct':261 'structur':12,110,157,223 'substitut':601 'success':623 'tabl':394 'task':114,587 'test':607 'text':251,379,381,390 'theme':232 'toml':306 'topic':142 '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':517 'treat':596 'tree':428 'trigger':13 'troubleshoot':92 'tutori':20 'ui':241,264,401,427,430,510,574 'understand':107 'updat':55,61,380 'use':5,98,225,230,233,236,500,504,519,581 'user':77,190 'valid':606 'version':48,311 'want':129 'wasm':490 'wasm-pack':489 'web':486,571 'widget':51,74,139,227,238,278,318,367,370,445,502,523,578 'widgetref':265,424,431 'width':245 'window':243,462,570 'wire':127 'without':544 'work':457,463 'world':30 'write':79,493 'zoo':575 '入门':37 '创建':38 '应用':40 '建议运行':192 '教程':42 '更新文档':196 '本地文档不完整':191 '项目结构':44","prices":[{"id":"74d34d0a-1e81-4612-b796-13b2234162f4","listingId":"668ce612-4ad1-4f2f-b027-162cc8907a2f","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:22.020Z"}],"sources":[{"listingId":"668ce612-4ad1-4f2f-b027-162cc8907a2f","source":"github","sourceId":"sickn33/antigravity-awesome-skills/makepad-basics","sourceUrl":"https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/makepad-basics","isPrimary":false,"firstSeenAt":"2026-04-18T21:40:22.020Z","lastSeenAt":"2026-04-23T12:51:12.326Z"}],"details":{"listingId":"668ce612-4ad1-4f2f-b027-162cc8907a2f","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"sickn33","slug":"makepad-basics","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":"0038e59764258338835a862376b4e6f0465a8b89","skill_md_path":"skills/makepad-basics/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/makepad-basics"},"layout":"multi","source":"github","category":"antigravity-awesome-skills","frontmatter":{"name":"makepad-basics","description":"CRITICAL: Use for Makepad getting started and app structure. Triggers on:\nmakepad, makepad getting started, makepad tutorial, live_design!, app_main!,\nmakepad project setup, makepad hello world, \"how to create makepad app\",\nmakepad 入门, 创建 makepad 应用, makepad 教程, makepad 项目结构"},"skills_sh_url":"https://skills.sh/sickn33/antigravity-awesome-skills/makepad-basics"},"updatedAt":"2026-04-23T12:51:12.326Z"}}