makepad-router
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 着色器, 创建组件, 自定义组件, 开发应用, 居中, 对齐, 点击事件, 悬停效果, 渐变, 阴影, 字体大小
Best use case
makepad-router is best used when you need a repeatable AI agent workflow instead of a one-off prompt.
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 着色器, 创建组件, 自定义组件, 开发应用, 居中, 对齐, 点击事件, 悬停效果, 渐变, 阴影, 字体大小
Teams using makepad-router should expect a more consistent output, faster repeated execution, less prompt rewriting.
When to use this skill
- You want a reusable workflow that can be run more than once with consistent structure.
When not to use this skill
- You only need a quick one-off answer and do not need a reusable workflow.
- You cannot install or maintain the underlying files, dependencies, or repository context.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/makepad-router/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How makepad-router Compares
| Feature / Agent | makepad-router | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/A |
Frequently Asked Questions
What does this skill do?
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 着色器, 创建组件, 自定义组件, 开发应用, 居中, 对齐, 点击事件, 悬停效果, 渐变, 阴影, 字体大小
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
SKILL.md Source
# 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();
```Related Skills
openrouter-research
Research OpenRouter API docs, available Grok model IDs, vision capability for the judge service, and integration patterns. Use when implementing openrouter_tool.py, when checking which Grok model supports vision/image input for judge_service.py, when OpenRouter returns unexpected errors, or when verifying model availability and context limits.
fastapi-router-py
Create FastAPI routers with CRUD operations, authentication dependencies, and proper response models. Use when building REST API endpoints, creating new routes, implementing CRUD operations, or add...
agentbox-openrouter
Set up OpenRouter as your LLM provider. Guides through account creation, API key setup, config, and making it the default model. Use when a user wants to use OpenRouter models like Claude Sonnet 4.5.
bgo
Automates the complete Blender build-go workflow, from building and packaging your extension/add-on to removing old versions, installing, enabling, and launching Blender for quick testing and iteration.
web-design-guidelines
Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices".
voxanne-branding-expert
Strategic branding, business development, and UI/UX design expertise for Voxanne AI. Combines business strategy, visual design principles, and market positioning to create enterprise-grade branding assets and go-to-market strategies. Use when designing logos, creating brand guidelines, developing marketing strategies, or positioning products against competitors like ChatGPT, Anthropic, and Google.
vibe-techdesign
Create a Technical Design Document for your MVP. Use when the user wants to plan architecture, choose tech stack, or says "plan technical design", "choose tech stack", or "how should I build this".
vapor-ui
Vapor UI design system component and icon guide, UI mockup generator, and Figma design converter. Provides component catalog, icon lookup, usage patterns, props documentation, and converts Figma designs to production-ready vapor-ui code. Use when user asks "vapor-ui components", "vapor-ui icons", "아이콘 찾기", "vapor-ui 사용법", "vapor-ui를 사용해서 시안 구현", "convert figma", "figma to code", "implement design from figma", provides a Figma URL, or mentions specific components like "Button", "Input", "Modal".
ux-visualizer
Analyzes source code or requirements to generate high-fidelity screen and state transition diagrams. Specialized in SPA state mapping.
ux-ui-exp
UI/UX design intelligence with Bootstrap 5, Font Awesome, SweetAlert2. Use: /ux-ui-exp {command}
ux-spec-author
Converts UX/design intent into testable design specifications that feed requirements. Use when defining user flows, accessibility, or design constraints.
ux-expert-dialogue
Runs interactive expert review sessions where a senior UX composite persona (Nielsen, Krug, Kahneman, Cialdini, Ilincev) challenges decisions, provides direct critique with data-backed reasoning, and brainstorms alternatives section-by-section. Use when creating a new website/landing page and need expert challenge, want section-by-section review with quantified impact estimates, need an opponent who questions assumptions, brainstorming design alternatives, or preparing for major redesign or launch. Trigger phrases include "expert review", "critique my design", "challenge my assumptions", "section-by-section review". NOT for quick fixes with known solutions (use ux-optimization), implementing proven patterns directly, or when you want agreement rather than challenge.