playbooks

home / skills / zhanghandong / makepad-skills / makepad-router

makepad-router skill

/skills/makepad-router

This skill routes Makepad questions to the appropriate sub-skills, enabling fast, accurate answers across widgets, layout, events, and shaders.

npx playbooks add skill zhanghandong/makepad-skills --skill makepad-router

Review the files below or copy the command above to add this skill to your agents.

Files (1)
SKILL.md
4.3 KB
---
name: makepad-router
description: "CRITICAL: Use for ALL Makepad/Robius questions including widgets, layout, events, and shaders.
Triggers on: makepad, robius, live_design, app_main, Widget, View, Button, Label, Image, TextInput,
ScrollView, RoundedView, SolidView, PortalList, Markdown, Html, TextFlow,
layout, Flow, Walk, padding, margin, width, height, Fit, Fill, align, spacing,
event, action, Hit, FingerDown, FingerUp, KeyDown, handle_event, click, tap,
animator, animation, state, transition, hover, pressed, ease,
shader, draw_bg, draw_text, Sdf2d, pixel, gradient, glow, shadow,
font, text_style, font_size, glyph, typography,
tokio, async, spawn, submit_async, SignalToUI, post_action,
apply_over, TextOrImage, modal, collapsible, drag drop,
AppState, persistence, theme, Scope,
deploy, package, APK, IPA, WASM, cargo makepad,
makepad widget, makepad 组件, makepad 按钮, makepad 布局, makepad 事件, makepad 动画, makepad 着色器,
创建组件, 自定义组件, 开发应用, 居中, 对齐, 点击事件, 悬停效果, 渐变, 阴影, 字体大小"
globs: ["**/live_design!*", "**/*.rs"]
---

# 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, `<Widget>`, `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, handle_event, click | **makepad-event-action** |
| animator, state, transition, hover, pressed | **makepad-animation** |
| shader, draw_bg, Sdf2d, gradient, glow, shadow | **makepad-shaders** |
| font, text_style, font_size, glyph | **makepad-font** |
| platform, macOS, Android, iOS, WASM | **makepad-platform** |
| tokio, async, spawn, submit_async | **robius-app-architecture** |
| apply_over, 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:

```toml
[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
```rust
#[derive(Live, LiveHook, Widget)]
pub struct MyWidget {
    #[deref] view: View,
    #[live] property: f64,
    #[rust] state: State,
    #[animator] animator: Animator,
}
```

### Async Pattern (Robius)
```rust
// UI -> Async
submit_async_request(MyRequest { ... });

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

Overview

This skill routes Makepad and Robius questions to the exact sub-skill(s) needed to produce focused, accurate answers. It inspects keywords and context in the user query and loads combinations of domain skills (layout, widgets, shaders, async patterns, deployment, etc.) so responses are precise and actionable. Use this skill as the single entry point for any Makepad/Robius topic.

How this skill works

The router scans the query for trigger tokens (widget names, layout terms, events, animation, shader, async, deploy, etc.) and matches them to a routing table that maps keywords to specific sub-skills. For complex requests it loads multiple skills together and enforces declared dependencies so conceptual coverage is complete (for example widget + layout + animation + shaders). It also supplies default project settings and common code patterns when creating new projects or components.

When to use it

  • Any question mentioning makepad or robius
  • Designing or debugging widgets, layouts, events, or shaders
  • Building app structure, async flows, or deployment pipelines
  • Composing multi-area requests (UI + animation + async + state)
  • When you want precise, skill-specific guidance without manual skill selection

Best practices

  • Include explicit keywords (widget names, event names, layout primitives, shader terms) to get exact routing
  • For component creation requests, describe intended behavior and animations to load the full context bundle
  • Ask for code snippets and target platform (WASM, Android, iOS) to tailor examples
  • Request error output or failing code when troubleshooting to route to reference/troubleshoot skills
  • Prefer stepwise goals (create -> integrate -> deploy) so router loads appropriate multi-skill workflows

Example use cases

  • Create a custom Button with hover and press animations — router loads widgets, animation, shaders, events
  • Design a responsive Flow layout with padding/spacing rules — router loads layout + dsl + widgets
  • Implement async data fetch and UI update using tokio/submit_async — router loads robius-app-architecture
  • Troubleshoot shader artifacts in draw_bg or Sdf2d code — router loads shaders + widgets + reference
  • Package app for Android/iOS/WASM — router loads deployment + platform skills

FAQ

What tokens trigger this router?

Common tokens include widget and layout names (Button, View, Flow), event and animation terms (FingerDown, handle_event, animator), shader and text terms (Sdf2d, draw_bg, font_size), async and platform terms (tokio, submit_async, APK, WASM).

How are multiple skills combined?

The router consults a context bundle table and loads all relevant skills and their declared dependencies to produce a unified answer covering UI, behavior, async flows, and deployment as needed.