← LeaderboardThe Skill Leaderboard

makepad-dsl

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 组件

Published by sickn33 ↗sickn33/agentic-awesome-skills

Try your first task

A source-grounded starter task has not been verified for this skill yet.

SKILL.md

name: makepad-dsldescription: |  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 组件risk: safesource: communitydate_added: "2026-03-06"

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:

  1. Read the relevant reference file(s) listed above
  2. If file read fails or file is empty:
    • Report missing references; the sync command is not bundled and --force is not an authorized automatic fallback.
    • Still answer based on SKILL.md patterns + built-in knowledge
  3. 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

SyntaxDescriptionExample
{ ... }Anonymous object{ width: 100.0 }
Name = { ... }Named prototypeMyStyle = { color: #FFF }
<Name> { ... }Inherit from prototype<MyStyle> { size: 10.0 }
{{RustType}}Link to Rust structApp = {{App}} { ... }
name = <Widget>Named child widgetbtn = <Button> { }
dep("...")Resource dependencydep("crate://self/img.png")

Property Types

TypeExampleDescription
Numberwidth: 100.0Float value
Colorcolor: #FF0000FFRGBA hex color
Stringtext: "Hello"Text string
Enumflow: DownEnum variant
Sizewidth: FitFit, Fill, or numeric
Objectpadding: { top: 10.0 }Nested object
Arraylabels: ["A", "B"]List of values

Inheritance Rules

  1. Eager Copy: All parent properties are copied immediately
  2. Override: Child can override any parent property
  3. Extend: Child can add new properties
  4. 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
}

When Writing Code

  1. Use <Widget> syntax to inherit from built-in widgets
  2. Define reusable styles as named prototypes
  3. Use {{RustType}} to link DSL to Rust structs
  4. Override only properties that need to change
  5. Use meaningful names for child widget references

When Answering Questions

  1. Explain inheritance as "eager copy" - properties are copied at definition time
  2. Emphasize that DSL is embedded in Rust via live_design! macro
  3. Check the pinned revision and development tooling before promising live reload; Rust type/code changes may require recompilation
  4. Distinguish between named objects (prototypes) and widget instances

Limitations

  • Use this skill only when the task clearly matches the scope described above.
  • Do not treat the output as a substitute for environment-specific validation, testing, or expert review.
  • Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.