Back to list
ZhangHanDong

makepad-router

by ZhangHanDong

Build App with Makepad and AI skills

677🍴 76📅 Jan 23, 2026

SKILL.md


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

KeywordsLoad Skill
live_design!, app_main!, getting started, app structuremakepad-basics
DSL, inheritance, <Widget>, Foo = { }makepad-dsl
layout, Flow, Walk, padding, width, height, center, alignmakepad-layout
View, Button, Label, Image, TextInput, widget, Markdown, Htmlmakepad-widgets
event, action, Hit, FingerDown, handle_event, clickmakepad-event-action
animator, state, transition, hover, pressedmakepad-animation
shader, draw_bg, Sdf2d, gradient, glow, shadowmakepad-shaders
font, text_style, font_size, glyphmakepad-font
platform, macOS, Android, iOS, WASMmakepad-platform
tokio, async, spawn, submit_asyncrobius-app-architecture
apply_over, modal, collapsible, pagefliprobius-widget-patterns
custom action, MatchEvent, post_actionrobius-event-action
AppState, persistence, theme switchrobius-state-management
deploy, package, APK, IPAmakepad-deployment
troubleshoot, error, debugmakepad-reference

Context Bundle Loading

For complex tasks, load multiple skills:

ContextLoad These Skills
Create widget/componentmakepad-widgets, makepad-dsl, makepad-layout, makepad-animation, makepad-shaders, makepad-event-action
Build full appmakepad-basics, makepad-dsl, makepad-layout, makepad-widgets, makepad-event-action, robius-app-architecture
UI designmakepad-dsl, makepad-layout, makepad-widgets, makepad-animation, makepad-shaders
Production patternsrobius-app-architecture, robius-widget-patterns, robius-state-management

Skill Dependencies

When loading a skill, also load its dependencies:

SkillAlso Load
makepad-widgetsmakepad-layout, makepad-dsl
makepad-animationmakepad-shaders
makepad-shadersmakepad-widgets
robius-widget-patternsmakepad-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();

Score

Total Score

80/100

Based on repository quality metrics

SKILL.md

SKILL.mdファイルが含まれている

+20
LICENSE

ライセンスが設定されている

+10
説明文

100文字以上の説明がある

0/10
人気

GitHub Stars 500以上

+10
最近の活動

1ヶ月以内に更新

+10
フォーク

10回以上フォークされている

+5
Issue管理

オープンIssueが50未満

+5
言語

プログラミング言語が設定されている

+5
タグ

1つ以上のタグが設定されている

+5

Reviews

💬

Reviews coming soon