makepad-2-0-dsl
makepad-2-0-dsl is an code AI skill with a core value of Makepad 2. It
helps developers solve real-world problems in the code domain, boosting
efficiency, automating repetitive tasks, and optimizing workflows.
Makepad 2.0 guidance for dsl; use when building or debugging Makepad UI code.
Quick Facts
mkdir -p ./skills/makepad-2-0-dsl && curl -sfL https://raw.githubusercontent.com/sickn33/antigravity-awesome-skills/main/skills/makepad-2-0-dsl/SKILL.md -o ./skills/makepad-2-0-dsl/SKILL.mdRun in terminal / PowerShell. Requires curl (Unix) or PowerShell 5+ (Windows).
Skill Content
Limitations
- Verify against current Makepad 2.0 docs; upstream APIs change frequently.
- Do not run bundled scripts without explicit user approval.
When to Use
- Use when this upstream workflow matches the user's stated goal.
- Use when the task requires the procedures documented in this skill.
# Makepad 2.0 DSL Syntax Skill
Overview
Makepad 2.0 replaced the compile-time `live_design!` macro with the runtime `script_mod!` macro, powered by the Splash scripting language. This skill covers the complete DSL syntax, property system, registration patterns, and common pitfalls.
Key Syntax Rules
Property Assignment: Colon, NOT Equals
key: value // CORRECT - colon syntax
key = value // WRONG - old 1.x syntax, no longer worksProperties are whitespace/newline separated. No commas between siblings.
View{
width: Fill
height: Fit
flow: Down
spacing: 10
padding: 15
}Named Instances: `:=` Operator
Use `:=` to create addressable, named widget instances:
my_button := Button{ text: "Click me" }
title := Label{ text: "Hello" }Named instances are:
- Addressable from Rust code via `id!(my_button)` or `ids!(my_button)`
- Overridable via dot-path syntax: `MyTemplate{ title.text: "New text" }`
- Stored in the script object's `vec` (not `map`)
Regular properties use `:` and go into `map`:
width: Fill // regular property -> map
label := Label{} // named child -> vecMerge Operator: `+:`
The `+:` operator extends/merges with the parent instead of replacing:
draw_bg +: {
color: #f00 // Only overrides color, keeps all other draw_bg properties
}Without `+:`, you REPLACE the entire property:
draw_bg: { color: #f00 } // REPLACES all of draw_bg - loses hover, border, etc.
draw_bg +: { color: #f00 } // MERGES - only changes color, keeps everything elseDot-Path Shorthand
Dot-path is syntactic sugar for merge:
draw_bg.color: #f00
// is equivalent to:
draw_bg +: { color: #f00 }
draw_text.text_style.font_size: 14
// is equivalent to:
draw_text +: { text_style +: { font_size: 14 } }Let Bindings: Local Templates
`let` creates local, reusable templates within a `script_mod!` block:
let MyCard = RoundedView{
width: Fill height: Fit
padding: 16 flow: Down spacing: 8
draw_bg.color: #2a2a3d
draw_bg.border_radius: 8.0
title := Label{ text: "Default Title" draw_text.color: #fff }
body := Label{ text: "" draw_text.color: #aaa }
}
// Instantiate and override:
MyCard{ title.text: "Card 1" body.text: "Content here" }
MyCard{ title.text: "Card 2" body.text: "More content" }**IMPORTANT**: `let` bindings are LOCAL to the `script_mod!` block. They cannot be accessed from other `script_mod!` blocks. To share across modules, store in `mod.widgets.*`.
Spread Operator: `..`
Inherit all properties from another definition:
set_type_default() do #(DrawMyShader::script_shader(vm)){
..mod.draw.DrawQuad // Inherit from DrawQuad
}Script Module Structure
Basic App Structure
use makepad_widgets::*;
app_main!(App);
script_mod!{
use mod.prelude.widgets.*
load_all_resources() do #(App::script_component(vm)){
ui: Root{
main_window := Window{
window.inner_size: vec2(800, 600)
body +: {
// UI content here
my_button := Button{ text: "Click" }
}
}
}
}
}
impl App {
fn run(vm: &mut ScriptVm) -> Self {
crate::makepad_widgets::script_mod(vm); // 1. Register base widgets
App::from_script_mod(vm, self::script_mod)
}
}
#[derive(Script, ScriptHook)]
pub struct App {
#[source] source: ScriptObjectRef, // REQUIRED for Script-derived structs
#[live] ui: WidgetRef,
}
impl MatchEvent for App {
fn handle_actions(&mut self, cx: &mut Cx, actions: &Actions) {
if self.ui.button(ids!(🎯 Best For
- Debugging engineers
- QA teams
- UI designers
- Product designers
- Claude users
💡 Use Cases
- Tracing runtime errors in production logs
- Identifying memory leaks
- Generating component mockups
- Creating design system tokens
📖 How to Use This Skill
- 1
Install the Skill
Copy the install command from the Terminal tab and run it. The SKILL.md file downloads to your local skills directory.
- 2
Load into Your AI Assistant
Open Claude and reference the skill. Paste the SKILL.md content or use the system prompt tab.
- 3
Apply makepad-2-0-dsl to Your Work
Open your project in the AI assistant and ask it to apply the skill. Start with a small module to verify the output quality.
- 4
Review and Refine
Review AI suggestions before committing. Run tests, check for regressions, and iterate on the skill output.
❓ Frequently Asked Questions
Can this debug production issues?
Yes, but always ensure you have proper logging and monitoring in place first.
Does this work with Figma?
Some design skills integrate with Figma plugins. Check the Works With section for supported tools.
Is makepad-2-0-dsl compatible with Cursor and VS Code?
Yes — this skill works with any AI coding assistant including Cursor, VS Code with Copilot, and JetBrains IDEs.
Do I need specific dependencies for makepad-2-0-dsl?
Check the install command and Works With section. Most code skills only require the AI assistant and your codebase.
How do I install makepad-2-0-dsl?
Copy the install command from the Terminal tab and run it. The skill downloads to ./skills/makepad-2-0-dsl/SKILL.md, ready to use.
⚠️ Common Mistakes to Avoid
Debugging without context
Always provide the full error stack and surrounding code context for accurate debugging.
Skipping usability testing
AI-generated designs should be validated with real users before development.
Skipping validation
Always test AI-generated code changes, even for simple refactors.
Missing dependency updates
Check if the skill requires updated dependencies or new packages.