# makepad-2.0-migration

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

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · ★ 751
- Author: ZhangHanDong
- License: not stated · policy=link-only · description only; the file stays with the author
- Source: https://github.com/ZhangHanDong/makepad-skills/tree/HEAD/skills/makepad-2.0-migration/SKILL.md
- Updated: 2026-04-07
- HTML: https://affpapa.org/en/nevibecode/skills/makepad-20-migration

## What it 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.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add ZhangHanDong/makepad-skills --skill makepad-2.0-migration -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/makepad-2.0-migration/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/makepad-2.0-migration/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add ZhangHanDong/makepad-skills --skill makepad-2.0-migration -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/makepad-2.0-migration/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add ZhangHanDong/makepad-skills --skill makepad-2.0-migration -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/makepad-2.0-migration/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install ZhangHanDong/makepad-skills makepad-2.0-migration
```

2. **Manually: put the files in place**
- File: `.github/skills/makepad-2.0-migration/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add ZhangHanDong/makepad-skills --skill makepad-2.0-migration -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/ZhangHanDong/makepad-skills --path skills/makepad-2.0-migration
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/makepad-2.0-migration/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add ZhangHanDong/makepad-skills --skill makepad-2.0-migration -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/ZhangHanDong/makepad-skills/tree/HEAD/skills/makepad-2.0-migration/SKILL.md

## When to use it
- 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
- 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!`

## Similar
- [frontend-design](https://affpapa.org/en/nevibecode/skills/frontend-design.md) — skill · 1025790 installs
- [design-taste-frontend](https://affpapa.org/en/nevibecode/skills/design-taste-frontend.md) — skill · 678700 installs
- [prototype](https://affpapa.org/en/nevibecode/skills/prototype.md) — skill · 986201 installs
- [hyperframes](https://affpapa.org/en/nevibecode/skills/heygen-com-hyperframes.md) — skill · 1200000 installs
- [hyperframes-cli](https://affpapa.org/en/nevibecode/skills/heygen-com-hyperframes-cli.md) — skill · 1300000 installs
- [webapp-testing](https://affpapa.org/en/nevibecode/skills/webapp-testing.md) — skill · 186758 installs

From the same set: [zhanghandong/makepad-skills](https://affpapa.org/en/nevibecode/by/zhanghandong/makepad-skills.md) — 14 cards

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md