Makepad Router

Makepad Question Router

> Version: 2.0.0 | Last Updated: 2026-01-21

INSTRUCTIONS FOR CLAUDE

When this skill is triggered, you MUST load the appropriate sub-skill(s) based on the question:

Routing Table

| Keywords | Load Skill | |----------|------------| | live_design!, app_main!, getting started, app structure | makepad-basics | | DSL, inheritance, `, Foo = { }` | makepad-dsl | | layout, Flow, Walk, padding, width, height, center, align | makepad-layout | | View, Button, Label, Image, TextInput, widget, Markdown, Html | makepad-widgets | | event, action, Hit, FingerDown, handleevent, click | makepad-event-action | | animator, state, transition, hover, pressed | makepad-animation | | shader, drawbg, Sdf2d, gradient, glow, shadow | makepad-shaders | | font, textstyle, fontsize, glyph | makepad-font | | platform, macOS, Android, iOS, WASM | makepad-platform | | tokio, async, spawn, submitasync | robius-app-architecture | | applyover, modal, collapsible, pageflip | robius-widget-patterns | | custom action, MatchEvent, post_action | robius-event-action | | AppState, persistence, theme switch | robius-state-management | | deploy, package, APK, IPA | makepad-deployment | | troubleshoot, error, debug | makepad-reference |

Context Bundle Loading

For complex tasks, load multiple skills:

| Context | Load These Skills | |---------|-------------------| | Create widget/component | makepad-widgets, makepad-dsl, makepad-layout, makepad-animation, makepad-shaders, makepad-event-action | | Build full app | makepad-basics, makepad-dsl, makepad-layout, makepad-widgets, makepad-event-action, robius-app-architecture | | UI design | makepad-dsl, makepad-layout, makepad-widgets, makepad-animation, makepad-shaders | | Production patterns | robius-app-architecture, robius-widget-patterns, robius-state-management |

Skill Dependencies

When loading a skill, also load its dependencies:

| Skill | Also Load | |-------|-----------| | makepad-widgets | makepad-layout, makepad-dsl | | makepad-animation | makepad-shaders | | makepad-shaders | makepad-widgets | | robius-widget-patterns | makepad-widgets, makepad-layout |

Example Workflow

User: "How do I create a custom button with hover animation?"

Analysis:
1. Keywords: custom, button, hover, animation
2. Context: Widget creation
3. Load: makepad-widgets, makepad-animation, makepad-shaders, makepad-event-action

Answer using patterns from all loaded skills.

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"]

Key Patterns Quick Reference

Widget Definition

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

Async Pattern (Robius)

// UI -> Async
submit_async_request(MyRequest { ... });

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

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: SageV1
• Source: SageV1/makepad-skills
• License: MIT
• Homepage: https://sagev1.github.io

Install and usage instructions live in the source repository linked above.