Generate Makepad Rust UI Code

Makepad Basics Skill is an expert reference for the Rust makepad-widgets crate, covering project setup, basic app structure, and first-screen application wiring for the Makepad GPU-first, cross-platform UI framework (tracks the makepad-widgets dev branch). It generates Rust code following documented patterns and answers foundational questions before a developer moves on to more specific layout, widget, or shader topics.

Before answering, it is instructed to read local app-structure.md and event-handling.md reference files and incorporate their content, falling back to SKILL.md patterns plus built-in knowledge if a file is missing or empty (surfacing a documentation-sync command to the user in that case).

use makepad_widgets::*;

live_design! {
    use link::theme::*;
    use link::shaders::*;
    use link::widgets::*;

    App = {{App}} {
        ui: <Root> {
            main_window = <Window> {
                body = <View> {
                    width: Fill, height: Fill
                    flow: Down
                    <Label> { text: "Hello Makepad!" }
                }
            }
        }
    }
}

app_main!(App);

Four key patterns are documented with working code: the minimal app structure (live_design! block, app_main! entry point, LiveRegister and AppMain trait implementations); the Cargo.toml dependency setup pointing at the makepad/makepad dev branch on GitHub; handling button clicks by checking self.ui.button(id!(my_button)).clicked(&actions) inside handle_event; and accessing/modifying widgets by reference (self.ui.label(id!(my_label)), .set_text(...), self.ui.text_input(id!(my_input)).text()). An API reference table covers the six core macros/types (live_design!, app_main!, #[derive(Live)], WidgetRef, Cx, id!()) with a one-line description and example each. A platform setup table lists per-OS requirements: macOS and Windows work out of the box, Linux needs apt-get install clang libaudio-dev libpulse-dev libx11-dev libxcursor-dev, and Web needs cargo install wasm-pack.

Five rules govern code generation: always include use makepad_widgets::*;, use live_design! for all UI definitions, implement both LiveRegister and AppMain traits, use the id!() macro for widget references, and handle events through the handle_event method. Four conceptual points guide question-answering: live design means DSL changes reflect instantly without recompilation, Makepad is GPU-first with all rendering shader-based, the same code runs across Android/iOS/Linux/macOS/Windows/Web, and the UI Zoo example is the recommended reference for exploring available widgets.

Use this skill when getting started with Makepad, understanding basic app structure and boilerplate, or when the task involves project setup, live_design!, app_main!, or first-screen application wiring - as a foundation before moving into layout, widget, or shader-specific topics.

It is scoped to Makepad app basics and setup specifically, not deeper layout/DSL/shader/animation topics covered by sibling Makepad skills. It is not a substitute for environment-specific validation, testing, or expert review - if local reference documentation is missing, it flags this explicitly rather than silently guessing beyond its built-in knowledge.

Inputs: a request to scaffold a new Makepad app, wire up basic UI, or understand core Makepad concepts and macros.

Outputs: a working minimal Makepad app (live_design! block, App struct, trait implementations), Cargo.toml dependency setup, and event-handling or widget-access code snippets.

Part of the Makepad skill family alongside animation, DSL, layout, event/action, font, shader, deployment, and reference skills; references local app-structure.md and event-handling.md documentation kept in sync via a /sync-crate-skills makepad command.

Developers new to Makepad, or anyone scaffolding a Makepad app from scratch, who need correct app boilerplate, entry-point wiring, and platform-specific setup requirements.