# ui-ugui

This skill inspects, creates, and revises Unity uGUI interfaces. Use it for Canvas hierarchies, RectTransforms, layout groups, or prefab UI.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 6400 installs · ★ 1149
- Author: Unity-Technologies
- License: LicenseRef-Unknown · policy=link-only · description only; the file stays with the author
- Source: https://github.com/Unity-Technologies/skills/tree/HEAD/skills/ui-ugui/SKILL.md
- Updated: 2026-10-23
- HTML: https://affpapa.org/en/nevibecode/skills/ui-ugui

## What it does

The skill checks the existing scene and project files before changing anything. It can explain a UI hierarchy, make a focused edit, or build a new Canvas-based layout. Scripts are added when the request asks for logic; a request for a functional menu alone means a valid visual hierarchy, not extra code.

For Canvas setup, the skill uses CanvasScaler and GraphicRaycaster. It also accounts for layout ownership: a parent Layout Group can override child dimensions, while ContentSizeFitter can conflict with layout settings. That means editing a child size manually may have no effect when the parent controls it.

Project conventions come first, and each change should be checked before proceeding. The skill favors fixing the specific broken property over rebuilding a hierarchy, since destroyed objects can trigger null-reference cascades. For ScrollRect or ScrollView work, consult `references/scrollview-setup.md`. UI component types should be fully qualified, such as `UnityEngine.UI.Button`.

## Requirements
- Works with: Unity

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add Unity-Technologies/skills --skill ui-ugui -a claude-code
```

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

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add Unity-Technologies/skills --skill ui-ugui -a codex
```

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

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add Unity-Technologies/skills --skill ui-ugui -a cursor
```

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

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install Unity-Technologies/skills ui-ugui
```

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

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add Unity-Technologies/skills --skill ui-ugui -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/Unity-Technologies/skills --path skills/ui-ugui
```

### Windsurf (Devin Desktop)

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

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add Unity-Technologies/skills --skill ui-ugui -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/Unity-Technologies/skills/tree/HEAD/skills/ui-ugui/SKILL.md

## When to use it
- Inspect a Canvas hierarchy and explain how it is organized
- Change one UI element without rebuilding its surrounding hierarchy
- Create a new Canvas-based interface
- Diagnose a Layout Group and ContentSizeFitter conflict
- Check whether a new element has visible dimensions

## Example prompts
- Explain how the Canvas hierarchy in this scene is organized.
- Adjust this button's size without changing nearby UI elements.
- Create a Canvas-based inventory screen with a grid of cards.

## 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: [unity-technologies/skills](https://affpapa.org/en/nevibecode/by/unity-technologies/skills.md) — 31 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