sickn33/agentic-awesome-skills/makepad-2-0-dsl

Name: makepad-2-0-dsl
Author: sickn33

Claude Code and agent skill by sickn33/agentic-awesome-skills

Trust tier 3

community

Source check pending

Checking that the SKILL.md file is still in the repository.

Makepad 2.0 guidance for dsl; use when building or debugging Makepad UI code.

Install

npx vskill@latest install sickn33/agentic-awesome-skills/makepad-2-0-dsl

SKILL.md

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 reference covers the upstream Splash/script_mod generation; it is not a complete stable Makepad language specification. Record the exact Makepad git revision from Cargo.lock, inspect that revision's widget/script sources and compile a minimal example before migrating an existing live_design application. Do not mix generations merely because a package is called 2.0.

Key Syntax Rules

Property Assignment: Colon, NOT Equals

key: value          // CORRECT - colon syntax
key = value         // WRONG - old 1.x syntax, no longer works

Properties 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 -> vec

Merge 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 else

Dot-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

rust

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!(my_button)).clicked(actions) {
            log!("Button clicked!");
        }
    }
}
 
impl AppMain for App {
    fn handle_event(&mut self, cx: &mut Cx, event: &Event) {
        self.match_event(cx, event);
        self.ui.handle_event(cx, event, &mut Scope::empty());
    }
}

Widget Definition Module

rust

script_mod!{
    use mod.prelude.widgets_internal.*   // For widget library internals
    use mod.widgets.*                     // Access other registered widgets
 
    // Step 1: Register the Rust struct as a widget base
    mod.widgets.MyWidgetBase = #(MyWidget::register_widget(vm))
 
    // Step 2: Create a styled variant with default properties
    mod.widgets.MyWidget = set_type_default() do mod.widgets.MyWidgetBase{
        width: Fill
        height: Fit
        padding: theme.space_2
 
        draw_bg +: {
            color: theme.color_bg_app
        }
    }
}

Registration Patterns

Widget Registration

For structs that implement the Widget trait:

rust

mod.widgets.MyWidgetBase = #(MyWidget::register_widget(vm))

Rust side:

rust

#[derive(Script, ScriptHook, Widget)]
pub struct MyWidget {
    #[source] source: ScriptObjectRef,  // REQUIRED
    #[walk] walk: Walk,
    #[layout] layout: Layout,
    #[redraw] #[live] draw_bg: DrawQuad,
    #[live] draw_text: DrawText,
    #[rust] my_state: i32,  // Runtime-only, not exposed to script
}

Component Registration

For non-widget structs that need script integration:

rust

mod.widgets.MyComponentBase = #(MyComponent::script_component(vm))

Draw Shader Registration

For custom draw types with shader fields:

rust

set_type_default() do #(DrawMyShader::script_shader(vm)){
    ..mod.draw.DrawQuad   // Inherit from DrawQuad
}

Rust side:

rust

#[derive(Script, ScriptHook)]
#[repr(C)]
pub struct DrawMyShader {
    #[deref] draw_super: DrawQuad,
    #[live] my_param: f32,
}

Setting Type Defaults

rust

mod.widgets.MyWidget = set_type_default() do mod.widgets.MyWidgetBase{
    width: Fill height: Fit
    draw_bg +: { color: theme.color_bg_app }
}

Registration Order (CRITICAL)

Widget modules MUST be registered BEFORE UI modules that use them:

rust

impl App {
    fn run(vm: &mut ScriptVm) -> Self {
        crate::makepad_widgets::script_mod(vm);   // 1. Base widgets FIRST
        crate::my_widgets::script_mod(vm);         // 2. Custom widgets SECOND
        crate::app_ui::script_mod(vm);             // 3. UI using widgets THIRD
        App::from_script_mod(vm, self::script_mod) // 4. App component LAST
    }
}

Multi-Module Aggregation (lib.rs pattern)

rust

pub fn script_mod(vm: &mut ScriptVm) {
    crate::module_a::script_mod(vm);
    crate::module_b::script_mod(vm);
    // ... all widget modules
}

Prelude System

Available Preludes

Prelude	Use Case
`mod.prelude.widgets.*`	App development - includes all standard widgets
`mod.prelude.widgets_internal.*`	Widget library internal development

Prelude Alias Syntax

rust

mod.prelude.widgets = {
    ..mod.std,            // Spread all of mod.std into scope
    theme:mod.theme,      // Create 'theme' as alias for mod.theme
    draw:mod.draw,        // Create 'draw' as alias for mod.draw
}

Without the alias (mod.theme, without theme:), the module is included but has no accessible name.

Cross-Module Sharing

The `mod` Object is the ONLY Way to Share

rust

// In widget_module.rs - export to mod.widgets namespace
script_mod!{
    use mod.prelude.widgets_internal.*
    mod.widgets.MyWidget = set_type_default() do mod.widgets.MyWidgetBase{ ... }
}
 
// In app_ui.rs - import via mod.widgets
script_mod!{
    use mod.prelude.widgets.*
    use mod.widgets.*   // Now MyWidget is in scope
    // ...
    MyWidget{}
}

`use crate.module.*` does NOT work - the crate. prefix is not available in script_mod.

Runtime Property Updates

Use script_apply_eval! instead of the old apply_over + live!:

rust

// Old system
item.apply_over(cx, live!{ height: (height) });
 
// New system - use #(expr) for Rust expression interpolation
script_apply_eval!(cx, item, {
    height: #(height)
    draw_bg: { is_even: #(if is_even { 1.0 } else { 0.0 }) }
});

Never interpolate untrusted text into executable script/DSL. Set text through typed properties/APIs, validate resource paths and avoid logging sensitive model/user values. Shader/layout examples are partial and must be checked across target GPU/platform, DPI and keyboard/accessibility behavior.

Debug Logging

Use ~expression to log values during script evaluation:

rust

script_mod!{
    ~mod.theme           // Logs the theme object
    ~mod.prelude.widgets // Logs what's in the prelude
    ~some_variable       // Logs a variable's value
}

Common Pitfalls

1. Missing `#[source] source: ScriptObjectRef`

All Script-derived structs MUST have this field:

rust

#[derive(Script, ScriptHook)]
pub struct MyStruct {
    #[source] source: ScriptObjectRef,  // REQUIRED - will fail without it
    // ...
}

2. Missing `height: Fit` on Containers

An unconstrained Fill child in a Fit-sized axis can create an unresolved sizing cycle. Choose Fit or an explicit bound for that axis; actual behavior depends on parent constraints and the widget. A bounded scroll viewport often needs Fill or fixed size.

// Potentially unresolved vertical sizing without an ancestor height bound:
View{ flow: Down
    Label{ text: "You can't see me" }
}
 
// CORRECT
View{ height: Fit flow: Down
    Label{ text: "Visible!" }
}

3. Confusing `:` vs `:=`

key: value -- sets a property (stored in map)
name := Widget{} -- creates a named, addressable child (stored in vec)
label := Label{ text: "x" } -- named, overridable via Template{ label.text: "y" }
label: Label{ text: "x" } -- anonymous, NOT addressable, overrides fail silently

4. Forgetting `+:` Merge Operator

// WRONG - replaces ALL of draw_bg (loses hover, border, animations)
draw_bg: { color: #f00 }
 
// CORRECT - merges, only changes color
draw_bg +: { color: #f00 }

5. Wrong Theme Access

// WRONG
color: THEME_COLOR_BG     // old 1.x constant syntax
color: (THEME_COLOR_BG)   // old 1.x parenthesized reference
 
// CORRECT
color: theme.color_bg_app
padding: theme.space_2
font_size: theme.font_size_p

6. Hex Colors Containing 'e' Need `#x` Prefix

The Rust tokenizer interprets e/E in hex literals as scientific notation exponent:

// WRONG - Rust parse error: "expected at least one digit in exponent"
color: #2ecc71
color: #1e1e2e
 
// CORRECT - use #x prefix
color: #x2ecc71
color: #x1e1e2e
 
// Colors without 'e' work fine with plain #
color: #ff4444    // OK
color: #44cc44    // OK

7. `pub` Keyword Invalid in script_mod

// WRONG
pub mod.widgets.MyWidget = ...
 
// CORRECT - visibility is controlled by Rust module system
mod.widgets.MyWidget = ...

8. `Inset{...}` Constructor Syntax for Margins/Padding

// WRONG
margin: { left: 10 }
align: { x: 0.5 y: 0.5 }
 
// CORRECT - use constructor syntax
margin: Inset{ left: 10 }
align: Align{ x: 0.5 y: 0.5 }
padding: Inset{ top: 5 bottom: 5 left: 10 right: 10 }
 
// Bare number for uniform values is OK
padding: 15
margin: 0.

9. Draw Shader Struct Field Ordering with `#[repr(C)]`

Non-instance data (#[rust], non-instance #[live] fields) MUST go BEFORE #[deref]. Only instance fields (shader inputs) go AFTER:

This is the start of the file. Read the full SKILL.md on GitHub.

Security

Security scanPassed, 95 of 100Pattern checks on the skill's files.
Model reviewPassed

See the full security report

Quality evaluation

Task evaluationNot runNo evaluation yet. Run one in Skill Studio.

See evaluation results

Source

SKILL.md in the repositoryCheckingskills/makepad-2-0-dsl/SKILL.md

Popularity

Repository stars: 47,054
Repository forks: 6,853
7-day trend score: 54

Stars and forks are for the whole GitHub repository, not this skill alone. Not refreshed yet.

Works with

Any agent vskill installs to: 56 targets in all. These 39 have a page on this site.

Claude Code
Cursor
GitHub Copilot
Windsurf
Codex
Gemini CLI
Cline
Amp
Roo Code
Goose
Continue
Kilo Code
Junie
Trae
OpenHands
Qwen Code
AI Agent
Tabnine Chat
Sourcegraph Cody
Amazon Q
Firebase Genkit
Sweep
Devin
Phind
Mentat
Claude Desktop
Aider
GPT Pilot
Plandex
bolt.new
v0
Replit Agent
Anse
TypingMind
BetterChatGPT
LibreChat
Warp AI
Pieces
Fig AI

Embed badge

[![vskill VERIFIED](https://verified-skill.com/api/v1/skills/sickn33/agentic-awesome-skills/makepad-2-0-dsl/badge)](https://verified-skill.com/skills/sickn33/agentic-awesome-skills/makepad-2-0-dsl)

Something wrong with this skill or its page? Tell us.

Install

SKILL.md

Limitations

When to Use

Makepad 2.0 DSL Syntax Skill

Overview

Key Syntax Rules

Property Assignment: Colon, NOT Equals

Named Instances: := Operator

Merge Operator: +:

Dot-Path Shorthand

Let Bindings: Local Templates

Spread Operator: ..

Script Module Structure

Basic App Structure

Widget Definition Module

Registration Patterns

Widget Registration

Component Registration

Draw Shader Registration

Setting Type Defaults

Registration Order (CRITICAL)

Multi-Module Aggregation (lib.rs pattern)

Prelude System

Available Preludes

Prelude Alias Syntax

Cross-Module Sharing

The mod Object is the ONLY Way to Share

Runtime Property Updates

Debug Logging

Common Pitfalls

1. Missing #[source] source: ScriptObjectRef

2. Missing height: Fit on Containers

3. Confusing : vs :=

4. Forgetting +: Merge Operator

5. Wrong Theme Access

6. Hex Colors Containing 'e' Need #x Prefix

7. pub Keyword Invalid in script_mod

8. Inset{...} Constructor Syntax for Margins/Padding

9. Draw Shader Struct Field Ordering with #[repr(C)]

Security

Quality evaluation

Source

Popularity

Works with

Named Instances: `:=` Operator

Merge Operator: `+:`

Spread Operator: `..`

The `mod` Object is the ONLY Way to Share

1. Missing `#[source] source: ScriptObjectRef`

2. Missing `height: Fit` on Containers

3. Confusing `:` vs `:=`

4. Forgetting `+:` Merge Operator

6. Hex Colors Containing 'e' Need `#x` Prefix

7. `pub` Keyword Invalid in script_mod

8. `Inset{...}` Constructor Syntax for Margins/Padding

9. Draw Shader Struct Field Ordering with `#[repr(C)]`