# msw-ui-system

Guides coding agents through building MapleStory Worlds interfaces: generates .ui layouts, configures UI components, and handles .mlua UUID bindings.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 9700 installs · ★ 38
- Author: MSW-Git
- License: not stated · policy=link-only · description only; the file stays with the author
- Source: https://github.com/MSW-Git/msw-ai-coding-plugins-official/tree/HEAD/plugins/msw-maker-base-skill/skills/msw-ui-system/SKILL.md
- Updated: 2026-10-06
- HTML: https://affpapa.org/en/nevibecode/skills/msw-ui-system

## What it does

The skill acts as a unified guide for MapleStory Worlds interface development. It covers core widgets like `ButtonComponent`, `GridView`, and `Slider`, anchor calculations in `RectTransform`, and recipes for HUDs, inventories, and popups.

Direct edits to raw `.ui` JSON files are prohibited. The workflow requires mutating layouts through `scripts/msw_ui_builder.cjs`. That builder handles node hierarchy, runs layout validation, and injects entity UUID bindings directly into `.mlua` scripts.

UI logic is strictly client-only. Server scripts receive `nil` on UI lookups because remote procedure calls are not supported here.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add MSW-Git/msw-ai-coding-plugins-official --skill msw-ui-system -a claude-code
```

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

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add MSW-Git/msw-ai-coding-plugins-official --skill msw-ui-system -a codex
```

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

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add MSW-Git/msw-ai-coding-plugins-official --skill msw-ui-system -a cursor
```

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

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install MSW-Git/msw-ai-coding-plugins-official msw-ui-system
```

2. **Manually: put the files in place**
- File: `.github/skills/msw-ui-system/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add MSW-Git/msw-ai-coding-plugins-official --skill msw-ui-system -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/MSW-Git/msw-ai-coding-plugins-official --path plugins/msw-maker-base-skill/skills/msw-ui-system
```

### Windsurf (Devin Desktop)

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

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add MSW-Git/msw-ai-coding-plugins-official --skill msw-ui-system -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/MSW-Git/msw-ai-coding-plugins-official/tree/HEAD/plugins/msw-maker-base-skill/skills/msw-ui-system/SKILL.md

## When to use it
- generate `.ui` layout files using `msw_ui_builder.cjs`
- bind generated interface UUIDs into `.mlua` script properties
- configure `GridView` and `ScrollLayoutGroup` containers
- assemble HUD, inventory, or popup layouts from recipes

## Example prompts
- Build an inventory window with a GridView using msw_ui_builder.cjs and inject UUIDs into .mlua
- Configure RectTransform anchors for a player health bar on mobile resolutions
- Add a close button to the popup layout and configure its ButtonComponent

## Similar
- [msw](https://affpapa.org/en/nevibecode/skills/msw.md) — skill · 842 installs
- [threejs-game-ui-designer](https://affpapa.org/en/nevibecode/skills/threejs-game-ui-designer.md) — skill · 3300 installs
- [game-ui-ux](https://affpapa.org/en/nevibecode/skills/game-ui-ux.md) — skill · 9600 installs
- [game-ui-design](https://affpapa.org/en/nevibecode/skills/game-ui-design.md) — skill · 3900 installs
- [roblox-ui](https://affpapa.org/en/nevibecode/skills/roblox-ui.md) — skill · 3800 installs
- [react-testing](https://affpapa.org/en/nevibecode/skills/react-testing.md) — skill · 4800 installs

From the same set: [msw-git/msw-ai-coding-plugins-official](https://affpapa.org/en/nevibecode/by/msw-git/msw-ai-coding-plugins-official.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