# makepad-2.0-app-structure

Walks you through the skeleton of a Makepad 2.0 app: Rust entry point, Splash markup, event handling and hot reload.

- 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-app-structure/SKILL.md
- Updated: 2026-04-07
- HTML: https://affpapa.org/en/nevibecode/skills/makepad-20-app-structure

## What it does

The skill explains how a Makepad 2.0 app is put together and how the Rust side talks to Splash. It ships a minimal template: a `Cargo.toml`, an entry point registered with `app_main!(App)`, a `script_mod!` block that builds the UI, and an `App` struct carrying the `Script` and `ScriptHook` derives. Separate sections cover the registration order inside `App::run`, action handling with `MatchEvent`, and event dispatch through `AppMain`.

It also covers the other direction. Rust updates Splash state with `script_eval!` and patches widget properties with `script_apply_eval!`, while markup calls handlers such as `on_click` and `on_render`. Widgets are reached by id: buttons, labels, text inputs, and nested paths like `container.inner.title`.

Two local reference files hold the details — `./references/app-boilerplate.md` and `./references/rust-splash-integration.md`. Skip them and answers fall back to the patterns in `SKILL.md`, which is where the registration order gets easy to mix up. That order matters because widgets have to be registered before the app is built from the script module. You run the app with `cargo run -p my-app`, add `--hot` for hot reload, and Splash edits apply without recompiling.

## Install

### Claude Code (native platform)

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

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

### Codex

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

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

### Cursor

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

2. **Manually: put the files in place**
- File: `.cursor/skills/makepad-2.0-app-structure/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-app-structure
```

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

### Gemini CLI

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

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

### Windsurf (Devin Desktop)

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

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add ZhangHanDong/makepad-skills --skill makepad-2.0-app-structure -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-app-structure/SKILL.md

## When to use it
- scaffold a fresh Makepad 2.0 app
- wire Rust code to Splash markup
- catch a button click and update state
- run the app with hot reload
- get the widget and theme registration order right

## Example prompts
- Show me the minimal Makepad 2.0 app template with Cargo.toml and app_main!
- How do I handle a button click in Makepad 2.0 and update the counter with script_eval!?
- Explain the registration order in App::run and why MatchEvent is needed

## Similar
- [tauri-app-planning](https://affpapa.org/en/nevibecode/skills/tauri-app-planning.md) — skill · 484 installs
- [add-app-to-server](https://affpapa.org/en/nevibecode/skills/add-app-to-server.md) — skill · 1200 installs
- [bun-hot-reloading](https://affpapa.org/en/nevibecode/skills/bun-hot-reloading.md) — skill · 395 installs
- [Mobile App Design Standards](https://affpapa.org/en/nevibecode/skills/mobile-app-design-standards.md) — skill · 906 installs
- [ce-polish](https://affpapa.org/en/nevibecode/skills/ce-polish.md) — skill · 1100 installs
- [project-structure](https://affpapa.org/en/nevibecode/skills/project-structure.md) — skill · 2800 installs

From the same set: [zhanghandong/makepad-skills](https://affpapa.org/en/nevibecode/by/zhanghandong/makepad-skills.md) — 2 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