msw-ui-kit — Claude Code skill: MSW UI themes and widgets
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.
npx skills add MSW-Git/msw-ai-coding-plugins-official --skill msw-ui-kit -a claude-codeWhat msw-ui-kit 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.
What it helps with
- 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 for the agent
- 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
How to install msw-ui-kit
1Skills CLI (Vercel)
npx skills add MSW-Git/msw-ai-coding-plugins-official --skill msw-ui-kit -a claude-code2Manually: put the files in place
~/.claude/skills/msw-ui-kit/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/msw-ui-kit/
1Skills CLI (Vercel)
npx skills add MSW-Git/msw-ai-coding-plugins-official --skill msw-ui-kit -a codex2Manually: put the files in place
.agents/skills/msw-ui-kit/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add MSW-Git/msw-ai-coding-plugins-official --skill msw-ui-kit -a cursor2Manually: put the files in place
.cursor/skills/msw-ui-kit/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install MSW-Git/msw-ai-coding-plugins-official msw-ui-kit2Manually: put the files in place
.github/skills/msw-ui-kit/SKILL.md1Skills CLI (Vercel)
npx skills add MSW-Git/msw-ai-coding-plugins-official --skill msw-ui-kit -a gemini-cli2Platform CLI
gemini skills install https://github.com/MSW-Git/msw-ai-coding-plugins-official --path plugins/msw-maker-base-skill/skills/msw-ui-kitManually: put the files in place
.devin/skills/msw-ui-kit/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add MSW-Git/msw-ai-coding-plugins-official --skill msw-ui-kit -a opencodeClaude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
Step by step, with commands for each platform: How to install skills in Claude Code: five ways
Questions about msw-ui-kit
How do I install msw-ui-kit in Claude Code?
Run npx skills add MSW-Git/msw-ai-coding-plugins-official --skill msw-ui-kit -a claude-code. The skill then lands at ~/.claude/skills/msw-ui-kit/SKILL.md.
What does msw-ui-kit do?
It selects themed RUID palettes and prebuilt interaction widgets from official MSWPackages so screens and parts match each other. Asset choice is its job, not authoring the .ui itself.
How is msw-ui-kit different from msw-ui-system and msw-packages?
msw-ui-kit decides which assets and widgets to use. The .ui file is created and changed through the UIBuilder in msw-ui-system, and feature logic like inventory or purchases lives in msw-packages.