skills.rest
ZhangHanDong
ZhangHanDongCOMMUNITY
Explore all skills by this author →
GitHub

makepad-2.0-dsl

Implements Makepad 2.0 DSL syntax, property system, and widget registration patterns in Rust.

747|87|Updated Jan 10, 2026
Search Tags:#Rust#UI Development#DSL#makepad#Cross-Platform#script_mod#widget registration
One-click install
npx skills add https://github.com/ZhangHanDong/makepad-skills --skill makepad-2-0-dsl
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: makepad-2.0-dsl
Source: https://github.com/ZhangHanDong/makepad-skills/tree/main/skills/makepad-2.0-dsl
Command: npx skills add https://github.com/ZhangHanDong/makepad-skills --skill makepad-2-0-dsl

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Makepad 2.0 replaced the compile-time live_design! macro with the runtime script_mod! macro, and developers migrating or writing new UI code frequently hit syntax errors, invisible widgets, and silent override failures without a complete reference to the new DSL rules.

Core Features & Use Cases

  • Complete DSL Syntax Guide: Covers colon property syntax, named instances (:=), merge operator (+:), dot-path shorthand, let bindings, spread operator, and debug logging.
  • Registration Patterns: Documents widget, component, and draw shader registration with correct module ordering and cross-module sharing via mod.widgets.
  • Pitfall Prevention: Catalogs 10+ common mistakes including missing #[source] fields, hex color 'e' parsing errors, and Fill/Fit circular dependencies.
  • Use Case: When building a Makepad 2.0 app and your custom widget renders invisibly or a template override silently fails, consult this Skill to identify the exact syntax or registration error and apply the correct pattern.

Quick Start

Ask the AI to write a Makepad 2.0 script_mod! block defining a styled card widget with a named title label and explain the correct registration order.

Frequently Asked Questions about makepad-2.0-dsl

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I write Makepad 2.0 DSL syntax with script_mod!?▼

Use colon syntax for properties (key: value), := for named widget instances, and +: for merging with parent properties. Start the script_mod! block with use mod.prelude.widgets.* and register widgets via #(MyWidget::register_widget(vm)).

What is the difference between : and := in Makepad 2.0?▼

The colon (key: value) sets a regular property stored in the object's map, while := creates a named, addressable child widget stored in vec. Only := instances can be targeted by ids!() in Rust and overridden via dot-path syntax in templates.

Why is my Makepad widget invisible after rendering?▼

The default height is Fill, which creates a circular dependency inside a Fit parent, resulting in zero height. Set height: Fit explicitly on containers nested inside Fit-sized parents to make content visible.

How do I migrate from Makepad 1.x live_design! to 2.0 script_mod!?▼

Replace key = value with key: value, (THEME_COLOR_X) with theme.color_x, {{Struct}} with #(Struct::register_widget(vm)), and apply_over with script_apply_eval!. The Skill provides a full old-to-new syntax conversion table.

Why does my hex color cause a Rust parse error in Makepad?▼

Hex colors containing 'e' after a digit (like #2ecc71) are misparsed by the Rust tokenizer as scientific notation. Use the #x prefix (e.g., #x2ecc71) to escape these colors correctly.

Can I share widget definitions across script_mod! modules in Makepad?▼

Yes, but only through the mod object. Export widgets by assigning to mod.widgets.MyWidget in one module, then import with use mod.widgets.* in another. The use crate.module.* path syntax does not work inside script_mod!.

Related Skills

Explore More Software Engineering Skills→
ZhangHanDongZhangHanDong
745

makepad-dsl

Assist developers in writing and understanding Makepad DSL syntax and inheritance for widget definitions.

Community
Intermediate
SageV1SageV1
1

robius-event-action

Implement event and action patterns for Makepad apps using cx.widget_action.

Community
Advanced
ZhangHanDongZhangHanDong
745

robius-widget-patterns

Implement reusable Makepad widget patterns for overlays, modals, and lists.

Community
Intermediate
hafley66hafley66
1

react-to-egui-mapping

Map React/Redux/RxJS concepts to egui/Rust equivalents for web developers.

Community
Advanced