[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill-f33f7dc6-4f23-4444-8bbc-91695ab17ce2":3,"$fhXgskFgLQ0RKwVp2cRsd3DgDHQW-3CsheAg4KoKt8kU":43},{"id":4,"title":5,"description":6,"categoryId":7,"moduleId":8,"tags":9,"prompt":10,"icon":11,"source":12,"sourceUrl":13,"authorId":14,"authorName":15,"isPublic":16,"stars":17,"runs":18,"createdAt":19,"updatedAt":19,"module":20,"category":27,"packages":34},"f33f7dc6-4f23-4444-8bbc-91695ab17ce2","makepad-basics","|","cat_life_career","mod_other","sickn33,other","---\nname: makepad-basics\ndescription: |\n  CRITICAL: Use for Makepad getting started and app structure. Triggers on:\n  makepad, makepad getting started, makepad tutorial, live_design!, app_main!,\n  makepad project setup, makepad hello world, \"how to create makepad app\",\n  makepad 入门, 创建 makepad 应用, makepad 教程, makepad 项目结构\nrisk: unknown\nsource: \"https:\u002F\u002Fgithub.com\u002Fmakepad\u002Fmakepad\"\n---\n\n# Makepad Basics Skill\n\n> **Version:** makepad-widgets (dev branch) | **Last Updated:** 2026-01-19\n>\n> Check for updates: https:\u002F\u002Fcrates.io\u002Fcrates\u002Fmakepad-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- `.\u002Freferences\u002Fapp-structure.md` - Complete app boilerplate and structure\n- `.\u002Freferences\u002Fevent-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: \"本地文档不完整，建议运行 `\u002Fsync-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: \u003CRoot> {\n            main_window = \u003CWindow> {\n                body = \u003CView> {\n                    width: Fill, height: Fill\n                    flow: Down\n\n                    \u003CLabel> { 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:\u002F\u002Fgithub.com\u002Fmakepad\u002Fmakepad\", 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\u002F\u002F 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\u002FType | 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.\n","","imported","https:\u002F\u002Fgithub.com\u002Fsickn33\u002Fantigravity-awesome-skills","user_system_seed","SkillOPIC",true,224,1095,"2026-05-16 13:27:33",{"id":8,"name":21,"slug":22,"icon":23,"description":24,"sort":25,"createdAt":26},"其他","other","mdi-page-next-outline","其他类型Skill",5,"2026-05-16 12:53:40",{"id":7,"name":28,"slug":29,"icon":30,"description":31,"moduleId":8,"sort":32,"skillCount":33,"createdAt":26},"职场发展","career","mdi-briefcase-outline","面试准备、简历优化、职业规划",4,575,[35],{"id":36,"skillId":4,"version":37,"fileName":38,"fileSize":39,"filePath":40,"fileHash":41,"manifest":42,"createdAt":19},"47419df9-4bef-4c72-aa8d-243ef15476fb","1.0.0","makepad-basics.zip",2456,"uploads\u002Fskills\u002Ff33f7dc6-4f23-4444-8bbc-91695ab17ce2\u002Fmakepad-basics.zip","092096653a6137bc3057de8802a9ed5c4e2c462e97596f1f5fdf17e58b9fb417","[{\"path\":\"SKILL.md\",\"isDirectory\":false,\"size\":5016}]",{"code":44,"message":45,"data":46},200,"success",{"items":47,"stats":48,"page":51},[],{"averageRating":49,"totalRatings":49,"ratingCounts":50},0,[49,49,49,49,49],{"limit":52,"offset":49,"hasMore":53,"nextOffset":52,"ratedOnly":16},15,false]