# UI Uitk

Understands, edits, and generates Unity UI Toolkit UXML and USS with flex layouts.

- Repository: https://github.com/Unity-Technologies/skills (1197 stars)
- Category: Design
- License: see repository
- Last updated: 2026-10-30
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add Unity-Technologies/skills --skill ui-uitk -g -a claude-code -y`
Codex: `npx skills add Unity-Technologies/skills --skill ui-uitk -g -a codex -y`
Cursor: `npx skills add Unity-Technologies/skills --skill ui-uitk -g -a cursor -y`
Gemini CLI: `npx skills add Unity-Technologies/skills --skill ui-uitk -g -a gemini-cli -y`

## Description

Understands, edits, and generates Unity UI Toolkit UXML and USS with flex layouts. Use for requests involving UI Toolkit, UIElements, UIDocument, PanelSettings, custom elements, or UI runtime binding.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

Understand existing Unity UI Toolkit code, make targeted edits, generate new UXML/USS files, Manipulators, and handle UI runtime binding.

## References

Read these as needed:
- [references/uss-guide.md](references/uss-guide.md), USS patterns and examples
- [references/svg-icons.md](references/svg-icons.md), SVG icon generation (only when generating icons)
- [references/common-issues.md](references/common-issues.md), Common mistakes to avoid
- [references/ui-runtime-binding.md](references/ui-runtime-binding.md), Patterns and guide to bind data to UI at runtime (only when requested or when bindings are involved)
- [references/painter2d.md](references/painter2d.md), Painter2D API for custom visuals: gradients, shapes, arcs, procedural drawing (read this whenever gradients, custom shapes, progress rings, procedural drawing, or any visual beyond what USS can express is needed)
- [references/pointermanipulator-guide.md](references/pointermanipulator-guide.md), Patterns and guide to create and use Manipulators (only when requested or when manipulators are involved). This helps with setting up drag and drop features or simple event handling for a Visual Element.
- [references/custom-elements.md](references/custom-elements.md), Custom UI Element patterns and guide to create reusable components with UXML, USS, and C#. This helps with creating complex UI components for reuse across the project.

Paths are relative to this skill's folder, read `references/uss-guide.md` directly.

## Understanding

When explaining UI structure, use this format:
```
[ElementType] name="elementName" class="class1 class2"
├── [ChildType] name="childName"
│   └── [GrandchildType]
└── [ChildType] class="another-class"
```

## Editing

**Common edit requests:**

The rest: https://github.com/Unity-Technologies/skills/blob/HEAD/skills/ui-uitk/SKILL.md