makepad-dsl
Helps your agent use Makepad's description language (DSL) and understand how components are created and inherited. Essential for building complex interfaces.
What it does
This tool helps write and understand the special language (DSL) used in the Makepad framework to create interfaces. It allows defining how visual elements look and behave.
When to use it
- ✓When you need to create a new button with a specific style in Makepad.
- ✓When trying to understand how a visual component in Makepad inherits characteristics from another.
- ✓If you want to define a reusable pattern for multiple elements in your Makepad application.
Example of what to ask your AI
“Create a blue button that inherits from the default Makepad button, but with white text.”
Want more? Open the sections below.
How to use
The easiest way: copy the message below and paste it into Claude, ChatGPT, Cursor or any AI. It reads the skill and follows the instructions.
Skill link
Ready-to-paste message
How it works
The tool uses code examples and syntax rules to generate or explain Makepad DSL code. It understands how to define objects, how they can inherit from others, and how to connect these styles with Rust code.
Installation
Easiest way: copy the skill link and paste it into Claude, ChatGPT or Cursor asking it to follow the instructions.
In the terminal (Claude Code, Codex, Cursor), in your project folder:
npx skills add sickn33/agentic-awesome-skills --skill makepad-dslOr download just the file:
curl -L https://raw.githubusercontent.com/sickn33/agentic-awesome-skills/main/plugins/agentic-awesome-skills-claude/skills/makepad-dsl/SKILL.md -o SKILL.mdTechnical content (original SKILL.md)
Original text by the author, straight from GitHub.
Supporting material availability
This catalog copy contains the inline guidance below, but does not include the following supporting paths. They are external prerequisites, not bundled files:
./references/dsl-syntax.md./references/inheritance.md
Ask for the original supporting material or an existing installation before using a step that depends on these paths; this catalog does not identify a verified download source for them. Resolve each path relative to that installation, inspect its contents, and verify any applicable license and execution prerequisites. Do not run a command or claim a referenced procedure was followed until its required file exists. Do not fabricate the missing scripts or treat an unrelated file with the same name as equivalent. Independent steps fully documented here can proceed within the user’s authorized scope; report any dependent step as unavailable.
Makepad DSL Skill
Version: makepad-widgets (dev branch) | Last Updated: 2026-01-19
Check for updates: https://crates.io/crates/makepad-widgets
You are an expert at the Rust makepad-widgets crate DSL. Help users by:
- Writing code: Generate DSL code following the patterns below
- Answering questions: Explain DSL syntax, inheritance, property overriding
When to Use
- You need help with Makepad
live_design!syntax, object definitions, or inheritance patterns. - The task involves widget declarations, property overrides, prototypes, or DSL composition rules.
- You want Makepad DSL-specific examples rather than generic Rust syntax advice.
Documentation
Refer to the local files for detailed documentation:
./references/dsl-syntax.md- Complete DSL syntax reference./references/inheritance.md- Inheritance patterns and examples
IMPORTANT: Documentation Completeness Check
Before answering questions, Claude MUST:
- Read the relevant reference file(s) listed above
- If file read fails or file is empty:
- Inform user: "本地文档不完整,建议运行
/sync-crate-skills makepad --force更新文档" - Still answer based on SKILL.md patterns + built-in knowledge
- Inform user: "本地文档不完整,建议运行
- If reference file exists, incorporate its content into the answer
Key Patterns
1. Anonymous Object
{
width: 100.0
height: 50.0
color: #FF0000
}
2. Named Object (Prototype)
MyButton = {
width: Fit
height: 40.0
padding: 10.0
draw_bg: { color: #333333 }
}
3. Inheritance with Override
PrimaryButton = <MyButton> {
draw_bg: { color: #0066CC } // Override parent color
draw_text: { color: #FFFFFF } // Add new property
}
4. Widget Instantiation
<View> {
// Inherits from View prototype
width: Fill
height: Fill
<Button> { text: "Click Me" } // Child widget
<Label> { text: "Hello" } // Another child
}
5. Linking Rust Struct to DSL
// In live_design!
MyWidget = {{MyWidget}} {
// DSL properties
width: 100.0
}
// In Rust
#[derive(Live, LiveHook, Widget)]
pub struct MyWidget {
#[deref] view: View,
#[live] width: f64,
}
DSL Syntax Reference
| Syntax | Description | Example |
|---|---|---|
{ ... } |
Anonymous object | { width: 100.0 } |
Name = { ... } |
Named prototype | MyStyle = { color: #FFF } |
<Name> { ... } |
Inherit from prototype | <MyStyle> { size: 10.0 } |
{{RustType}} |
Link to Rust struct | App = {{App}} { ... } |
name = <Widget> |
Named child widget | btn = <Button> { } |
dep("...") |
Resource dependency | dep("crate://self/img.png") |
Property Types
| Type | Example | Description |
|---|---|---|
| Number | width: 100.0 |
Float value |
| Color | color: #FF0000FF |
RGBA hex color |
| String | text: "Hello" |
Text string |
| Enum | flow: Down |
Enum variant |
| Size | width: Fit |
Fit, Fill, or numeric |
| Object | padding: { top: 10.0 } |
Nested object |
| Array | labels: ["A", "B"] |
List of values |
Inheritance Rules
- Eager Copy: All parent properties are copied immediately
- Override: Child can override any parent property
- Extend: Child can add new properties
- Nested Override: Override nested objects partially
Parent = {
a: 1
nested: { x: 10, y: 20 }
}
Child = <Parent> {
a: 2 // Override a
b: 3 // Add new property
nested: { x: 30 } // Override only x, y remains 20
}
…
FAQ
What is 'live_design!'?
It's a Rust macro that allows embedding Makepad DSL code directly into your project, making it easier to create visual interfaces.
How does inheritance work in Makepad DSL?
It works like in other languages: a new style can 'inherit' from an existing style, copying its properties and allowing you to modify or add new ones.
Can I change the color of an existing element?
Yes, you can 'override' properties of a parent style to change its appearance or behavior.
Details
Original description by the author
CRITICAL: Use for Makepad DSL syntax and inheritance. Triggers on: makepad dsl, live_design, makepad inheritance, makepad prototype, "<Widget>", "Foo = { }", makepad object, makepad property, makepad DSL 语法, makepad 继承, makepad 原型, 如何定义 makepad 组件
Popularity
- GitHub stars
- 48k
- Ranking position
- #3533
- License
- MIT
- Updated
- 10/15/2026
Comments
- …
More skills from this repository
00-andruia-consultant
Helps your agent start or improve AI projects. It analyzes code, suggests tools, and creates action plans in Spanish.
sickn33/agentic-awesome-skills
007
Lets your agent perform security audits and threat modeling. It's useful for protecting projects against attacks and vulnerabilities.
sickn33/agentic-awesome-skills
10-andruia-skill-smith
Helps your agent create or improve AI tools. It defines how tools work, writes documentation, and validates the structure.
sickn33/agentic-awesome-skills
20-andruia-niche-intelligence
Lets your agent create a summary about a specific industry. It's useful for understanding the context, rules, usage patterns, and risks of a project, using reliable sources.
sickn33/agentic-awesome-skills
Similar skills
angular-developer
Helps your agent create Angular code and give project structure advice. Useful for starting new projects, creating code parts, or improving performance and accessibility.
affaan-m/ECC
frontend-a11y
Helps your agent make web interfaces accessible to everyone. It ensures websites and apps work well with screen readers and keyboard navigation.
affaan-m/ECC
frontend-patterns
Has your agent apply modern patterns in frontend development. It optimizes performance, manages state, and follows best practices in React and Next.js.
affaan-m/ECC