# msw-ui-kit

This skill picks ready RUID palettes and interaction widgets from official MSWPackages so a game interface stays visually consistent. Handy when a screen or part needs a themed look.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 1200 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-kit/SKILL.md
- Updated: 2026-10-06
- HTML: https://affpapa.org/en/nevibecode/skills/msw-ui-kit

## What it does

The skill draws on MSW assets: seven themed RUID palettes taken from the resource packs of published worlds, plus entity-tree digests covering more than 130 screens from samples and official packages — inventory, shop, ranking, HUD, dialog. Every part carries its RUID, native size, 9-slice type and button states, so you can drop it straight into `UIBuilder` as `image_ruid` with nothing to install.

The second half is a library of prebuilt interaction widgets: checkbox, radio button, switch, toggle group, dropdown, pagination, a bar for progress, a wheel for scrolling, time selection, a numeric keypad and a loading indicator. Reach for them when the built-in components do not cover what you need.

The skill only decides which assets to use and how widgets get wired in. Creating or editing the `.ui` file itself belongs to `msw-ui-system` and its UIBuilder, while feature logic such as inventory or purchases sits with `msw-packages`. A theme is chosen once per screen and stays fixed at runtime; mixing parts from two themes on one screen is off the table. If your world really does swap themes while running, a plain panel you authored can end up sitting under art from another set — in that case keep the swappable surfaces and their text within one theme, or take that chrome out of the swap and set its colors yourself.

## Install

### Claude Code (native platform)

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

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

### Codex

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

2. **Manually: put the files in place**
- File: `.agents/skills/msw-ui-kit/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-kit -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/msw-ui-kit/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-kit
```

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

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add MSW-Git/msw-ai-coding-plugins-official --skill msw-ui-kit -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-kit
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/msw-ui-kit/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-kit -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-kit/SKILL.md

## When to use it
- pick interface parts from a single theme instead of hunting RUIDs by search
- lay out an inventory or shop screen following a real game sample
- add a checkbox, switch or dropdown the native components lack
- reuse an RUID palette from a published world's resource pack without installing anything
- read a finished screen's entity tree before you start building

## Example prompts
- Build an inventory screen in the simplefantasy style, taking the structure from that theme's samples
- I need a switch and a loading indicator in one style — pull the widgets from msw-ui-kit
- Find RUIDs for a window background and buttons from the cutecasual theme

## Similar
- [orbit-card](https://affpapa.org/en/nevibecode/skills/orbit-card.md) — skill · 10000 installs
- [cad](https://affpapa.org/en/nevibecode/skills/cad.md) — skill · 14000 installs
- [step-parts](https://affpapa.org/en/nevibecode/skills/step-parts.md) — skill · 11200 installs
- [sdf](https://affpapa.org/en/nevibecode/skills/sdf.md) — skill · 10500 installs
- [urdf](https://affpapa.org/en/nevibecode/skills/urdf.md) — skill · 10500 installs
- [hatch-pet](https://affpapa.org/en/nevibecode/skills/hatch-pet.md) — skill · 3300 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