# makepad-2.0-widgets

Tells your agent which widgets Makepad 2.0 ships and how to write them in Splash. Useful when you build UI and keep forgetting property names.

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

## What it does

The skill carries a catalog of Makepad 2.0 built-in widgets: containers, text, buttons, toggles, sliders, lists, modals and the dock system. They are written in Splash syntax and registered through `script_mod!`. Two reference files back it up: `./references/widget-catalog.md` with the full list and properties, and `./references/widget-advanced.md` covering `PortalList`, `Dock`, `MapView` and custom widgets. The agent is expected to read the relevant file before answering.

A separate section lists the mistakes that bite. Containers need `height: Fit` or the content collapses to zero. A colored container with text needs `new_batch: true`, otherwise the text sits behind the background. `Label` defaults to white and silently ignores an animator, so wrap it in a `View`. `MapView` needs a fixed height. Worth checking your layout when an element refuses to show up.

There are ready patterns for a card, a form input and a scrollable list to start from. Install works across Claude, Codex, Cursor, GitHub Copilot, Gemini CLI and OpenCode, each with its own `SKILL.md` path. The source text is truncated, so check the repository for the full set of examples.

## Install

### Claude Code (native platform)

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

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

### Codex

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

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

### Cursor

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

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

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

### Gemini CLI

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

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

### Windsurf (Devin Desktop)

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

### OpenCode

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

## When to use it
- recall the exact widget name for vertical scrolling
- build a card with background and rounded corners without property mistakes
- figure out why text disappeared behind a container background
- pick between `PortalList` and `FlatList` for a long list
- put together a modal dialog or dock panel in Makepad

## Example prompts
- Show me the Makepad 2.0 widget catalog and their properties
- How do I build a scrollable list in Makepad with PortalList?
- Why is my Label invisible inside a RoundedView with a colored background?

## Similar
- [workos-widgets](https://affpapa.org/en/nevibecode/skills/workos-widgets.md) — skill · 857 installs
- [flutter-add-widget-preview](https://affpapa.org/en/nevibecode/skills/flutter-add-widget-preview.md) — skill · 36800 installs
- [dart-expert](https://affpapa.org/en/nevibecode/skills/dart-expert.md) — skill · 462 installs
- [build-mcp-app](https://affpapa.org/en/nevibecode/skills/build-mcp-app.md) — skill · 6458 installs
- [generative-ui](https://affpapa.org/en/nevibecode/skills/generative-ui.md) — skill · 3200 installs
- [platform-lightning-type-widget-coordinate](https://affpapa.org/en/nevibecode/skills/platform-lightning-type-widget-coordinate.md) — skill · 3200 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