Makepad Skills - Claude Instructions

CRITICAL: Hook-Based Skill Loading

IMPORTANT: When you see a message starting with [makepad-skills] in the conversation, you MUST:

1. Read the routing instruction - e.g., [makepad-skills] Routing to: makepad-widgets makepad-layout
2. Immediately call the Skill tool for EACH skill listed before doing anything else
3. Do not skip this step - the skills contain essential Makepad knowledge

Example:

[makepad-skills] Routing to: makepad-widgets makepad-layout

→ Call Skill(makepad-widgets) then Skill(makepad-layout) FIRST, then answer the question.

Skill Routing

For Makepad/Robius/MolyKit questions, use context detection and skill dependencies to load multiple related skills.

Context Detection (Load Skill Bundles)

When user intent matches these contexts, load the entire skill bundle:

Skill Dependencies (Auto-Load Related Skills)

When loading a skill, automatically include its dependencies:

Single Skill Keywords (Fallback)

For specific questions, match keywords to individual skills:

Extended Skills

Note: Production patterns are integrated into robius-* skills:

• Widget patterns (modal, collapsible, drag-drop) → robius-widget-patterns/_base/
• State patterns (theme switching, state machine) → robius-state-management/_base/
• Async patterns (streaming, tokio) → robius-app-architecture/_base/

Usage Examples

Full App Development (Bundle)

User: "我想从零开发一个 Makepad 应用"
-> Detect: Full app context
-> Load: makepad-basics, makepad-dsl, makepad-layout, makepad-widgets,
         makepad-event-action, robius-app-architecture
-> Answer with complete app structure, widgets, events, and async patterns

Widget Creation (Bundle)

User: "帮我创建一个自定义按钮组件"
-> Detect: Widget creation context
-> Load: makepad-widgets, makepad-dsl, makepad-layout, makepad-animation,
         makepad-shaders, makepad-font, makepad-event-action
-> Answer with widget structure, styling, animations, and event handling

Simple Question (Single + Dependencies)

User: "如何设置字体大小"
-> Match: makepad-font
-> Auto-load dependency: makepad-widgets
-> Load: makepad-font, makepad-widgets
-> Answer with text_style, font_size, and widget context

Production App (Bundle)

User: "参考 Robrix 的最佳实践"
-> Detect: Production context
-> Load: robius-app-architecture, robius-widget-patterns,
         robius-state-management, robius-event-action
         + dependencies: makepad-basics, makepad-widgets, makepad-layout, makepad-event-action
-> Answer with production-ready patterns from Robrix/Moly codebases

Key Patterns

Makepad Widget Definition

#[derive(Live, LiveHook, Widget)]
pub struct MyWidget {
    #[deref] view: View,
    #[live] property: f64,
    #[rust] internal_state: State,
    #[animator] animator: Animator,
}

Robius Async Pattern

// UI -> Async
submit_async_request(MatrixRequest::SendMessage { ... });

// Async -> UI
Cx::post_action(MessageSentAction { ... });
SignalToUI::set_ui_signal();

MolyKit Cross-Platform Async

// Platform-agnostic spawning
spawn(async move {
    let result = fetch_data().await;
    Cx::post_action(DataReady(result));
    SignalToUI::set_ui_signal();
});

Default Project Settings

When creating Makepad projects:

[package]
edition = "2024"

[dependencies]
makepad-widgets = { git = "https://github.com/makepad/makepad", branch = "dev" }

[features]
default = []
nightly = ["makepad-widgets/nightly"]

Source Codebases

For deeper reference, check these codebases:

• Makepad: /path/to/makepad - Framework source
• Robrix: /path/to/robrix - Matrix client example
• Moly: /path/to/moly - AI chat example
• MolyKit: /path/to/moly/moly-kit - AI chat toolkit