Skip to main content
affpapa.org
RU EN
skill CX Codex

makepad-2.0-migration — Claude Code skill: install and usage

Guides coding assistants through upgrading Rust UI code from Makepad 1.x to 2.0. Helps rewrite layout macros and lifecycle hooks.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓ 
npx skills add ZhangHanDong/makepad-skills --skill makepad-2.0-migration -a claude-code
Open on GitHub

What makepad-2.0-migration does

Makepad 2.0 replaces compile-time static UI definitions with a runtime scripting approach. The skill guides the assistant through swapping live_design! for script_mod! and altering derive macros from Live and LiveHook to Script and ScriptHook. It also reworks application bootstrapping, moving registration into App::run alongside the ScriptVm virtual machine.

Widget markup rules change significantly under the new version. The skill strips angle brackets and swaps equals signs for colons. Commas separating element attributes are also removed. It redirects styling identifiers to the theme.* namespace while switching runtime updates to script_apply_eval!. Missing height: Fit on layout containers collapses their height to zero pixels, making this explicit check mandatory.

What it helps with

  • rewrite legacy live_design! macros into script_mod! blocks
  • convert Live and LiveHook derives to Script and ScriptHook
  • clean up widget syntax by stripping angle brackets and attribute commas
  • update runtime state modifications from apply_over! to script_apply_eval!
  • prevent invisible layout blocks by enforcing height: Fit on containers

Example prompts for the agent

  • Migrate this widget file from Makepad 1.x syntax to 2.0
  • Update my live_design! block to script_mod! and fix the derive macros
  • Replace old apply_over! calls in this component with script_apply_eval!

How to install makepad-2.0-migration

1Skills CLI (Vercel)

npx skills add ZhangHanDong/makepad-skills --skill makepad-2.0-migration -a claude-code

2Manually: put the files in place

~/.claude/skills/makepad-2.0-migration/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/makepad-2.0-migration/

Step by step, with commands for each platform: How to install skills in Claude Code: five ways

Questions about makepad-2.0-migration

How to install makepad-2.0-migration in Claude Code?

Run npx skills add ZhangHanDong/makepad-skills --skill makepad-2.0-migration -a claude-code in your terminal.

What does makepad-2.0-migration do?

It teaches coding tools the breaking syntax and lifecycle adjustments introduced in Makepad 2.0. The assistant uses these rules to transform legacy Rust UI definitions into the script-based format.

Why do migrated UI containers render with zero height?

Makepad 2.0 sets container height to 0 pixels by default rather than calculating it automatically. Adding height: Fit is required to keep them visible.

Similar skills

All skills for Frontend and UI →
frontend-design official anthropics This skill guides intentional visual design for new interfaces and redesigns. Use it when a generic generated UI is not enough. 1,025,790installs design-taste-frontend Leonxlnx This skill directs the design of public pages and work screens, then checks the result in a browser through screenshots. Use it when an interface feels generic or unfinished. CX Codex +1 678,700installs prototype Matt Pocock Creates throwaway prototypes for checking state logic or exploring UI before committing the decision to the main codebase. 986,201installs hyperframes heygen-com Instructs coding agents on creating, validating, and rendering HTML-based videos using the HyperFrames framework and CLI. CX Codex +1 1,200,000installs hyperframes-cli heygen-com Controls HyperFrames video workflows from the CLI: audits layouts and contrast, edits timeline clips, captures snapshots, and renders locally or in cloud runtimes. CX Codex +1 1,300,000installs webapp-testing official anthropics This skill tests local web apps with Playwright, helping agents debug UI behavior, capture screenshots, and inspect browser logs. 186,758installs

From the same set14

makepad-2.0-theme A skill covering the Makepad 2.0 theme system: theme.* variables, dark and light modes, colors, fonts and spacing in Splash. CX Codex +1 ★ 751repo stars makepad-2.0-splash Guides coding agents through the Splash scripting language for Makepad 2.0. Helps build reactive UIs inside Rust while avoiding silent layout bugs. CX Codex +1 ★ 751repo stars makepad-2.0-shaders This skill guides agents writing Makepad 2.0 shaders, from SDF2D shapes to custom widget drawing. Use it when shader work needs to follow Makepad’s GPU conventions. CX Codex +1 ★ 751repo stars makepad-2.0-performance A skill for tuning and debugging Makepad 2.0: draw batching, Splash VM garbage collection and texture caching explained. CX Codex +1 ★ 751repo stars makepad-2.0-layout This skill guides an agent through sizing widgets and arranging children in Makepad 2.0. Use it when building a screen or tracing an invisible container. CX Codex +1 ★ 751repo stars makepad-2.0-events The makepad-2.0-events skill gives your agent a map of event and action handling in Makepad 2.0, from Splash on_click to the Rust MatchEvent trait. CX Codex +1 ★ 751repo stars makepad-2.0-dsl Teaches agents Makepad 2.0 DSL syntax, Splash runtime scripts, property merging, and Rust widget registration. CX Codex +1 ★ 751repo stars makepad-2.0-design-judgment Entry skill for Makepad 2.0 architecture: routes syntax questions to specialized skills and anchors design decisions on data flow, component split, and GPU rendering. CX Codex +1 ★ 751repo stars

Project sponsors

Companies that keep this analytics open
Gold sponsor
Nutra.Club

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor