makepad-basics

name	makepad-basics
description	|
type	skill
created	2026-02-27T00:00:00.000Z
domain	software-development
category	frontend
risk	unknown
source	https://github.com/makepad/makepad
tags	["skill","software-development","frontend","makepad","basics"]

Makepad Basics Skill

Version: makepad-widgets (dev branch) | Last Updated: 2026-01-19

Check for updates: https://crates.io/crates/makepad-widgets

You are an expert at the Rust makepad-widgets crate. Help users by:

• Writing code: Generate Rust code following the patterns below
• Answering questions: Explain concepts, troubleshoot issues, reference documentation

When to Use

• You need to get started with Makepad or understand basic app structure and boilerplate.
• The task involves project setup, live_design!, app_main!, or first-screen application wiring.
• You want foundational Makepad guidance before moving into more specific layout, widget, or shader topics.

Documentation

Refer to the local files for detailed documentation:

• ./references/app-structure.md - Complete app boilerplate and structure
• ./references/event-handling.md - Event handling patterns

IMPORTANT: Documentation Completeness Check

Before answering questions, Claude MUST:

1. Read the relevant reference file(s) listed above
2. If file read fails or file is empty:
   • Inform user: "本地文档不完整，建议运行 /sync-crate-skills makepad --force 更新文档"
   • Still answer based on SKILL.md patterns + built-in knowledge
3. If reference file exists, incorporate its content into the answer

Key Patterns

1. Basic App Structure

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);

#[derive(Live, LiveHook)]
pub struct App {
     ui: WidgetRef,
}

    {
     (cx: & Cx) {
        crate::makepad_widgets::(cx);
    }
}

    {
     (& , cx: & Cx, event: &Event) {
        .ui.(cx, event, & Scope::());
    }
}