Skip to content
Skillpedia
Websites & UI (frontend)48k · #3533

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

https://github.com/sickn33/agentic-awesome-skills/blob/main/plugins/agentic-awesome-skills-claude/skills/makepad-dsl/SKILL.md

Ready-to-paste message

Use this skill to help me: https://github.com/sickn33/agentic-awesome-skills/blob/main/plugins/agentic-awesome-skills-claude/skills/makepad-dsl/SKILL.md Read the SKILL.md file at that link and follow its instructions for my task.
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-dsl

Or 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.md
Technical 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:

  1. Read the relevant reference file(s) listed above
  2. 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
  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

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

  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
}

…

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

repo: sickn33/agentic-awesome-skills

Popularity

GitHub stars
48k
Ranking position
#3533
License
MIT
Updated
10/15/2026

Is this skill useful?

0

Sign in to vote.

Comments

  • …

More skills from this repository

Similar skills