name: unity-uitoolkit description: "UI Toolkit (UITK) for Unity — create/edit USS stylesheets and UXML layouts, configure UIDocument in scenes. Includes USS design patterns for building polished UI (cards, nav bars, badges, transitions). Use when users want to create UI with UI Toolkit, UXML, USS, UIDocument, PanelSettings, VisualElement, 界面工具包."

Unity UI Toolkit Skills

Work with Unity's web-style UI system: UXML (structure, like HTML) + USS (styling, like CSS) + UIDocument (scene display).

Requires Unity 2021.3+. This module is separate from ui_* skills (uGUI/Canvas). Use uitk_* for UI Toolkit only.

Localization: Match UI text language to the user's conversation language. When the user communicates in Chinese (中文), use Chinese for all UXML text attributes — labels, buttons, titles, descriptions, tags, placeholders. Otherwise default to English. USS class names and CSS variables always stay in English.

Skills Overview

Skill	Category	Description
`uitk_create_uss`	File	Create USS stylesheet
`uitk_create_uxml`	File	Create UXML layout
`uitk_read_file`	File	Read USS/UXML content
`uitk_write_file`	File	Write/overwrite USS/UXML
`uitk_delete_file`	File	Delete USS/UXML file
`uitk_find_files`	File	Search USS/UXML in project
`uitk_create_document`	Scene	Create UIDocument GameObject
`uitk_set_document`	Scene	Modify UIDocument properties
`uitk_create_panel_settings`	Scene	Create PanelSettings asset (full property support)
`uitk_get_panel_settings`	Scene	Read all PanelSettings properties
`uitk_set_panel_settings`	Scene	Modify existing PanelSettings properties
`uitk_list_documents`	Scene	List scene UIDocuments
`uitk_inspect_uxml`	Inspect	Parse UXML element hierarchy
`uitk_create_from_template`	Template	Create UXML+USS from template
`uitk_create_batch`	Batch	Batch create USS/UXML files

USS Design Guide

USS (Unity Style Sheets) is the styling language for UI Toolkit. It is intentionally modeled after CSS but only implements a subset. This guide teaches you what USS can and cannot do, so you can generate polished UI without trial-and-error.

USS vs CSS

Feature	CSS	USS
Flexbox (`flex-direction`, `flex-wrap`, `align-items`, `justify-content`)	Yes	Yes
`border-radius`	Yes	Yes
`opacity`	Yes	Yes
`overflow: hidden`	Yes	Yes
`transition` (property, duration, timing, delay)	Yes	Yes
`translate`, `scale`, `rotate`	Yes	Yes
CSS custom properties (`--var` / `var()`)	Yes	Yes
Pseudo-classes (`:hover`, `:active`, `:focus`, `:checked`, `:disabled`)	Yes	Yes
`text-shadow` (offset-x offset-y blur color)	Yes	Yes (same syntax)
`position: absolute / relative`	Yes	Yes
`width`, `height` (px / %)	Yes	Yes
`display: grid`	Yes	No — use `flex-wrap: wrap`
`display: inline / block`	Yes	No — everything is flex
`box-shadow`	Yes	No — fake with nested elements
`linear-gradient()` / `radial-gradient()`	Yes	No — use texture PNG
`calc()`	Yes	No
`@media` queries	Yes	No
`::before` / `::after` pseudo-elements	Yes	No — add child VisualElement
`z-index`	Yes	No — use document order
Unity-specific `-unity-font-style`	—	`normal / bold / italic / bold-and-italic`
Unity-specific `-unity-text-align`	—	`upper-left / upper-center / middle-center ...`
Unity-specific `-unity-background-scale-mode`	—	`stretch-to-fill / scale-and-crop / scale-to-fit`
Unity-specific `-unity-slice-*`	—	9-slice border for background images
Unity-specific `-unity-text-outline-width / -color`	—	Text outline / stroke effect

Key mental model: Every VisualElement is a flex container. There is no display: block/inline/grid. Use flex-direction: row + flex-wrap: wrap for grid-like layouts.

Design Tokens

Use :root CSS variables to build a consistent design system. All components reference tokens instead of hard-coded values.

:root {
    /* Palette */
    --color-primary: #E8632B;
    --color-primary-dark: #C9521D;
    --color-secondary: #2B7DE8;
    --color-bg: #FFF8F0;
    --color-surface: #FFFFFF;
    --color-text: #1A1A1A;
    --color-muted: #666666;
    --color-border: #E0E0E0;
    --color-success: #34C759;
    --color-danger: #FF3B30;

    /* Spacing — 8px grid */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-2xl: 48px;

    /* Border radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 16px;
    --radius-full: 9999px;

    /* Font sizes */
    --font-xs: 11px;
    --font-sm: 12px;
    --font-md: 14px;
    --font-lg: 18px;
    --font-xl: 24px;
    --font-2xl: 36px;
    --font-3xl: 48px;
}

Tip: Create the tokens USS first, then <Style src="tokens.uss"/> at the top of every UXML so all components share the same design system.

USS Properties Quick Reference

Flex Layout

.container {
    display: flex;                       /* always flex in USS */
    flex-direction: row;                 /* row | column (default: column) */
    flex-wrap: wrap;                     /* nowrap | wrap */
    flex-grow: 1;
    flex-shrink: 0;
    flex-basis: auto;
    align-items: center;                 /* flex-start | flex-end | center | stretch */
    justify-content: space-between;      /* flex-start | flex-end | center | space-between | space-around */
}

Box Model

.element {
    width: 200px;    height: 100px;
    min-width: 50px; max-width: 500px;
    margin: 8px;                         /* or margin-top/right/bottom/left */
    padding: 16px;                       /* or padding-top/right/bottom/left */
    border-width: 1px;                   /* or border-top-width etc. */
    border-color: #333;
    border-radius: 4px;                  /* or border-top-left-radius etc. */
}

Text

.text {
    font-size: 16px;
    color: #E0E0E0;
    -unity-font-style: bold;             /* normal | bold | italic | bold-and-italic */
    -unity-text-align: middle-center;    /* upper-left | upper-center | middle-left | middle-center ... */
    white-space: normal;                 /* nowrap | normal */
    text-overflow: ellipsis;             /* clip | ellipsis */
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
    -unity-text-outline-width: 1px;
    -unity-text-outline-color: #000;
}

Background & Appearance

.element {
    background-color: rgba(0,0,0,0.5);
    background-image: url("Assets/UI/icon.png");
    -unity-background-scale-mode: scale-to-fit;  /* stretch-to-fill | scale-and-crop | scale-to-fit */
    border-color: #4A90D9;
    border-radius: 8px;
    opacity: 0.8;
    overflow: hidden;                    /* clips children to bounds */
}

Positioning

.overlay {
    position: absolute;                  /* absolute | relative (default) */
    top: 10px; left: 20px; right: 10px; bottom: 0;
    translate: 50% 0;
}

Transforms

.element {
    translate: 10px 20px;
    scale: 1.1 1.1;
    rotate: 15deg;
    transform-origin: center;            /* left | center | right + top | center | bottom */
}

Pseudo-classes

.btn:hover    { background-color: #555; }
.btn:active   { background-color: #333; }
.btn:focus    { border-color: #4A90D9; }
.btn:checked  { background-color: #4A90D9; }
.btn:disabled { opacity: 0.4; }

Layout Patterns

Card Grid (3-column, wrapping)

.card-grid {
    flex-direction: row;
    flex-wrap: wrap;
    padding: var(--space-lg);
}
.card {
    width: 30%;
    margin: 1.5%;
    padding: var(--space-lg);
    background-color: var(--color-surface);
    border-radius: var(--radius-lg);
    border-width: 1px;
    border-color: var(--color-border);
}

<engine:VisualElement class="card-grid">
    <engine:VisualElement class="card"> ... </engine:VisualElement>
    <engine:VisualElement class="card"> ... </engine:VisualElement>
    <engine:VisualElement class="card"> ... </engine:VisualElement>
</engine:VisualElement>

Navigation Bar

.navbar {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    height: 56px;
    padding: 0 var(--space-lg);
    background-color: var(--color-surface);
    border-bottom-width: 1px;
    border-color: var(--color-border);
}
.nav-brand {
    font-size: var(--font-lg);
    -unity-font-style: bold;
    color: var(--color-text);
}
.nav-links {
    flex-direction: row;
}
.nav-link {
    margin-left: var(--space-md);
    padding: var(--space-sm) var(--space-md);
    color: var(--color-muted);
    font-size: var(--font-md);
}
.nav-link:hover { color: var(--color-primary); }

<engine:VisualElement class="navbar">
    <engine:Label class="nav-brand" text="MyApp" />
    <engine:VisualElement class="nav-links">
        <engine:Label class="nav-link" text="Home" />
        <engine:Label class="nav-link" text="Features" />
        <engine:Label class="nav-link" text="Pricing" />
    </engine:VisualElement>
    <engine:Button class="btn btn-primary" text="Sign Up" />
</engine:VisualElement>

Hero Section (centered title + subtitle)

.hero {
    align-items: center;
    justify-content: center;
    padding: var(--space-2xl) var(--space-lg);
    background-color: var(--color-bg);
}
.hero-title {
    font-size: var(--font-3xl);
    -unity-font-style: bold;
    color: var(--color-text);
    -unity-text-align: upper-center;
    margin-bottom: var(--space-md);
}
.hero-subtitle {
    font-size: var(--font-lg);
    color: var(--color-muted);
    -unity-text-align: upper-center;
    max-width: 600px;
}

Sidebar + Content (two-pane)

.layout-split {
    flex-direction: row;
    flex-grow: 1;
}
.sidebar {
    width: 240px;
    padding: var(--space-lg);
    background-color: var(--color-surface);
    border-right-width: 1px;
    border-color: var(--color-border);
}
.content {
    flex-grow: 1;
    padding: var(--space-lg);
}

Component Patterns

Icon Circle

.icon-circle {
    width: 48px;
    height: 48px;
    border-radius: 24px;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.icon-circle--primary { background-color: rgba(232,99,43,0.15); }
.icon-circle--success { background-color: rgba(52,199,89,0.15); }
.icon-circle--blue    { background-color: rgba(43,125,232,0.15); }
.icon-circle Label {
    font-size: var(--font-xl);
    -unity-text-align: middle-center;
}

<engine:VisualElement class="icon-circle icon-circle--primary">
    <engine:Label text="&#x2b50;" />
</engine:VisualElement>

Tag / Badge / Pill

.tag {
    padding: 4px 12px;
    border-radius: var(--radius-full);
    font-size: var(--font-xs);
    -unity-font-style: bold;
    -unity-text-align: middle-center;
}
.tag--outline {
    border-width: 1px;
    border-color: var(--color-primary);
    color: var(--color-primary);
    background-color: rgba(0,0,0,0);
}
.tag--filled {
    background-color: var(--color-primary);
    color: #FFFFFF;
}

<engine:Label class="tag tag--outline" text="Design" />
<engine:Label class="tag tag--filled" text="NEW" />

Button Variants

.btn {
    padding: var(--space-sm) var(--space-lg);
    border-radius: var(--radius-md);
    font-size: var(--font-md);
    -unity-font-style: bold;
    -unity-text-align: middle-center;
    border-width: 0;
    transition-property: background-color, scale;
    transition-duration: 0.15s;
    transition-timing-function: ease-out;
}
.btn:hover  { scale: 1.02 1.02; }
.btn:active { scale: 0.98 0.98; }

.btn-primary {
    background-color: var(--color-primary);
    color: #FFFFFF;
}
.btn-primary:hover { background-color: var(--color-primary-dark); }

.btn-outline {
    background-color: rgba(0,0,0,0);
    border-width: 1px;
    border-color: var(--color-border);
    color: var(--color-text);
}
.btn-outline:hover { border-color: var(--color-primary); color: var(--color-primary); }

.btn-ghost {
    background-color: rgba(0,0,0,0);
    color: var(--color-primary);
}
.btn-ghost:hover { background-color: rgba(232,99,43,0.1); }

Feature Card (full example)

USS:

.feature-card {
    padding: var(--space-lg);
    background-color: var(--color-surface);
    border-radius: var(--radius-lg);
    border-width: 1px;
    border-color: var(--color-border);
    transition-property: translate, border-color;
    transition-duration: 0.2s;
}
.feature-card:hover {
    translate: 0 -2px;
    border-color: var(--color-primary);
}
.feature-card__header {
    flex-direction: row;
    align-items: center;
    margin-bottom: var(--space-md);
}
.feature-card__title {
    font-size: var(--font-lg);
    -unity-font-style: bold;
    color: var(--color-text);
    margin-left: var(--space-md);
}
.feature-card__desc {
    font-size: var(--font-md);
    color: var(--color-muted);
    margin-bottom: var(--space-md);
    white-space: normal;
}
.feature-card__tags {
    flex-direction: row;
    flex-wrap: wrap;
}
.feature-card__tags .tag { margin-right: var(--space-sm); margin-bottom: var(--space-xs); }

UXML:

<engine:VisualElement class="feature-card">
    <engine:VisualElement class="feature-card__header">
        <engine:VisualElement class="icon-circle icon-circle--primary">
            <engine:Label text="&#x1f680;" />
        </engine:VisualElement>
        <engine:Label class="feature-card__title" text="Fast Iteration" />
    </engine:VisualElement>
    <engine:Label class="feature-card__desc" text="Hot-reload USS changes instantly without recompiling. Edit styles and see results in real time." />
    <engine:VisualElement class="feature-card__tags">
        <engine:Label class="tag tag--outline" text="Performance" />
        <engine:Label class="tag tag--outline" text="DX" />
    </engine:VisualElement>
</engine:VisualElement>

Transitions & Visual Effects

Smooth Transitions

.interactive {
    transition-property: background-color, scale, translate, opacity, border-color;
    transition-duration: 0.2s;
    transition-timing-function: ease-out;
    /* transition-delay: 0s; */
}

Supported timing functions: ease, ease-in, ease-out, ease-in-out, linear, ease-in-sine, ease-out-sine, ease-in-bounce, ease-out-bounce, ease-in-elastic, ease-out-elastic, ease-in-back, ease-out-back

Hover Lift

.card       { translate: 0 0; transition-property: translate; transition-duration: 0.2s; }
.card:hover { translate: 0 -4px; }

Scale Pulse on Click

.btn         { scale: 1 1; transition-property: scale; transition-duration: 0.1s; }
.btn:active  { scale: 0.95 0.95; }

Text Shadow & Outline

.title-glow {
    text-shadow: 0 0 8px rgba(232,99,43,0.6);
    color: #FFFFFF;
}
.outlined-text {
    -unity-text-outline-width: 1px;
    -unity-text-outline-color: rgba(0,0,0,0.5);
    color: #FFFFFF;
}

Fade In (opacity transition)

.fade-target {
    opacity: 0;
    transition-property: opacity;
    transition-duration: 0.3s;
}
.fade-target.visible {
    opacity: 1;
}

Note: Adding/removing USS classes at runtime via C# triggers the transition automatically.

Workarounds — USS Limitations

Need	CSS approach	USS workaround
Box shadow	`box-shadow: 0 2px 8px rgba(0,0,0,0.15)`	Nest a slightly larger VisualElement behind with semi-transparent `background-color` and `border-radius`
Gradient background	`linear-gradient(...)`	Use `background-image` pointing to a gradient texture PNG (`Assets/UI/gradient.png`)
Circular avatar	`border-radius: 50%`	Set equal `width`/`height` + `border-radius` = half of width (e.g., `width: 48px; border-radius: 24px;`) + `overflow: hidden`
Grid layout	`display: grid; grid-template-columns: repeat(3, 1fr)`	`flex-direction: row; flex-wrap: wrap;` with percentage `width` on children (e.g., `width: 33%`)
Text truncation	`text-overflow: ellipsis` + `overflow: hidden`	Same — USS supports `text-overflow: ellipsis` with `overflow: hidden` on the label
Responsive layout	`@media (max-width: ...)`	Not available — use `PanelSettings.scaleMode = ScaleWithScreenSize` for consistent scaling
Pseudo-elements	`::before` / `::after`	Add an extra `<engine:VisualElement>` child and style it with `position: absolute`
Stacking order	`z-index`	Earlier siblings render behind later siblings — reorder elements in UXML

Fake Box Shadow Pattern

<!-- UXML: shadow wrapper -->
<engine:VisualElement class="shadow-wrapper">
    <engine:VisualElement class="shadow-layer" />
    <engine:VisualElement class="card-content">
        <engine:Label text="Card with shadow" />
    </engine:VisualElement>
</engine:VisualElement>

.shadow-wrapper { padding: 4px; }
.shadow-layer {
    position: absolute;
    top: 4px; left: 2px; right: 2px; bottom: 0;
    background-color: rgba(0,0,0,0.08);
    border-radius: 14px;
}
.card-content {
    background-color: var(--color-surface);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
}

File Operation Skills

uitk_create_uss

Create a new USS stylesheet. If content is omitted, generates a default template with CSS variables.

Parameter	Type	Required	Default	Description
`savePath`	string	Yes	—	Asset path, e.g. `Assets/UI/HUD.uss`
`content`	string	No	template	Full USS content to write

Returns: {success, path, lines}

uitk_create_uxml

Create a new UXML layout file.

Parameter	Type	Required	Default	Description
`savePath`	string	Yes	—	Asset path, e.g. `Assets/UI/HUD.uxml`
`content`	string	No	template	Full UXML content to write
`ussPath`	string	No	null	USS path to embed as `<Style src="..."/>` in default template

Returns: {success, path, lines}

uitk_read_file

Read the source content of a USS or UXML file.

Parameter	Type	Required	Description
`filePath`	string	Yes	Asset path to USS or UXML file

Returns: {path, type, lines, content}

uitk_write_file

Overwrite a USS or UXML file with new content (creates file if it doesn't exist).

Parameter	Type	Required	Description
`filePath`	string	Yes	Asset path to write
`content`	string	Yes	New file content

Returns: {success, path, lines}

uitk_delete_file

Delete a USS or UXML file.

Parameter	Type	Required	Description
`filePath`	string	Yes	Asset path to delete

Returns: {success, deleted}

uitk_find_files

Search for USS and/or UXML files in the project.

Parameter	Type	Required	Default	Description
`type`	string	No	`"all"`	`"uss"`, `"uxml"`, or `"all"`
`folder`	string	No	`"Assets"`	Search root folder
`filter`	string	No	null	Substring filter on path
`limit`	int	No	200	Max results

Returns: {count, files: [{path, type, name}]}

Scene Operation Skills

uitk_create_document

Create a new GameObject with a UIDocument component attached.

Parameter	Type	Required	Default	Description
`name`	string	No	`"UIDocument"`	GameObject name
`uxmlPath`	string	No	null	VisualTreeAsset (.uxml) path
`panelSettingsPath`	string	No	null	PanelSettings (.asset) path
`sortOrder`	int	No	0	Rendering sort order
`parentName`	string	No	null	Parent GameObject name
`parentInstanceId`	int	No	0	Parent by instance ID
`parentPath`	string	No	null	Parent by hierarchy path

Returns: {success, name, instanceId, hasUxml, hasPanelSettings, sortOrder}

uitk_set_document

Modify UIDocument properties on an existing scene GameObject. Adds UIDocument if not present.

Parameter	Type	Required	Default	Description
`name`	string	No*	—	Find by GameObject name
`instanceId`	int	No*	0	Find by instance ID
`path`	string	No*	null	Find by hierarchy path
`uxmlPath`	string	No	—	New VisualTreeAsset path
`panelSettingsPath`	string	No	—	New PanelSettings path
`sortOrder`	int	No	—	New sort order

*At least one of name/instanceId/path required.

Returns: {success, name, instanceId, visualTreeAsset, panelSettings, sortingOrder}

uitk_create_panel_settings

Create a PanelSettings ScriptableObject asset with full property support.

Core Parameters:

Parameter	Type	Required	Default	Description
`savePath`	string	Yes	—	Asset path, e.g. `Assets/UI/Panel.asset`
`scaleMode`	string	No	`"ScaleWithScreenSize"`	`ConstantPixelSize`, `ConstantPhysicalSize`, `ScaleWithScreenSize`
`referenceResolutionX`	int	No	1920	Reference width (ScaleWithScreenSize)
`referenceResolutionY`	int	No	1080	Reference height (ScaleWithScreenSize)
`screenMatchMode`	string	No	`"MatchWidthOrHeight"`	`MatchWidthOrHeight`, `Shrink`, `Expand`
`themeStyleSheetPath`	string	No	null	ThemeStyleSheet asset path

General Properties (Unity 2021.3+):

Parameter	Type	Default	Description
`textSettingsPath`	string	null	PanelTextSettings asset path
`targetTexturePath`	string	null	RenderTexture asset path (render to texture)
`targetDisplay`	int	null	Target display 0-7
`sortOrder`	float	null	Rendering sort order
`scale`	float	null	Panel scale factor
`match`	float	null	Width/height match 0-1 (ScaleWithScreenSize)
`referenceDpi`	float	null	Reference DPI (ConstantPhysicalSize)
`fallbackDpi`	float	null	Fallback DPI
`referenceSpritePixelsPerUnit`	float	null	Sprite pixels per unit

Dynamic Atlas:

Parameter	Type	Default	Description
`dynamicAtlasMinSize`	int	null	Minimum atlas size
`dynamicAtlasMaxSize`	int	null	Maximum atlas size
`dynamicAtlasMaxSubTextureSize`	int	null	Max sub-texture size
`dynamicAtlasFilters`	string	null	`"Everything"` / `"None"` / comma-separated: `"Readability,Size,Format,ColorSpace,FilterMode"`

Color Clear:

Parameter	Type	Default	Description
`clearColor`	bool	null	Enable color clear
`colorClearR`	float	null	Clear color red (0-1)
`colorClearG`	float	null	Clear color green (0-1)
`colorClearB`	float	null	Clear color blue (0-1)
`colorClearA`	float	null	Clear color alpha (0-1)
`clearDepthStencil`	bool	null	Enable depth/stencil clear

Unity 6+ Only (ignored on older versions):

Parameter	Type	Description
`renderMode`	string	`"ScreenSpaceOverlay"` / `"WorldSpace"`
`forceGammaRendering`	bool	Force gamma rendering
`bindingLogLevel`	string	Binding log level (`"None"`, `"Once"`, `"All"`)
`colliderUpdateMode`	string	World Space collider mode (`"Match3DBoundingBox"`, `"Match2DDocumentRect"`, `"KeepExistingCollider"`)
`colliderIsTrigger`	bool	World Space collider is trigger
`vertexBudget`	int	Vertex budget for buffer management
`textureSlotCount`	int	Texture slot count for buffer management

Returns: {success, path, scaleMode, referenceResolution, screenMatchMode}

uitk_get_panel_settings

Read all properties of a PanelSettings asset.

Parameter	Type	Required	Description
`assetPath`	string	Yes	PanelSettings asset path

Returns: {path, scaleMode, referenceResolution, screenMatchMode, themeStyleSheet, textSettings, targetTexture, targetDisplay, sortingOrder, scale, match, referenceDpi, fallbackDpi, referenceSpritePixelsPerUnit, dynamicAtlasSettings, clearColor, colorClearValue, clearDepthStencil}

On Unity 6+ also includes: renderMode, forceGammaRendering, bindingLogLevel, colliderUpdateMode, colliderIsTrigger, vertexBudget, textureSlotCount

uitk_set_panel_settings

Modify properties on an existing PanelSettings asset. Only explicitly provided parameters are changed; others remain untouched.

Parameter	Type	Required	Description
`assetPath`	string	Yes	PanelSettings asset path

All other parameters are the same as uitk_create_panel_settings (all optional). Pass only the properties you want to change.

Returns: {success, path, scaleMode, referenceResolution, screenMatchMode}

uitk_list_documents

List all UIDocument components in the active scene.

No parameters.

Returns: {count, documents: [{name, instanceId, visualTreeAsset, panelSettings, sortingOrder, active}]}

Inspection Skills

uitk_inspect_uxml

Parse a UXML file and return its element hierarchy as a tree.

Parameter	Type	Required	Default	Description
`filePath`	string	Yes	—	UXML asset path
`depth`	int	No	5	Max traversal depth

Returns: {path, hierarchy: {tag, attributes, children[]}}

Template Skills

uitk_create_from_template

Generate a paired UXML+USS from a built-in template. Files are named {name}.uxml and {name}.uss under savePath.

Parameter	Type	Required	Description
`template`	string	Yes	Template type (see below)
`savePath`	string	Yes	Target directory, e.g. `Assets/UI`
`name`	string	No	Base filename (defaults to template name)

Template types:

Template	Contents
`menu`	Full-screen menu with title, Play/Settings/Quit buttons
`hud`	Absolute-positioned HUD: minimap, score label, health bar
`dialog`	Modal dialog: title, message, OK/Cancel buttons
`settings`	Settings panel: Volume sliders, Toggle, DropdownField
`inventory`	3x3 grid inventory with ScrollView
`list`	Scrollable item list

Returns: {success, template, ussPath, uxmlPath, name}

Batch Skills

uitk_create_batch

Batch create multiple USS and UXML files in one call.

Parameter	Type	Required	Description
`items`	string	Yes	JSON array of file descriptors

Item schema:

{
  "type": "uss",
  "savePath": "Assets/UI/Menu.uss",
  "content": "...",
  "ussPath": "..."
}

Returns: {success, totalItems, successCount, failCount, results[]}

UXML Elements Quick Reference

Layout Containers

<engine:VisualElement name="root" class="my-class" />
<engine:ScrollView mode="Vertical" name="scroll" />
<engine:GroupBox label="Section Title" />
<engine:Foldout text="Advanced" value="false" />
<engine:TwoPaneSplitView />

Text & Labels

<engine:Label text="Hello World" name="my-label" />
<engine:TextField label="Name:" value="default" name="input" />
<engine:TextField multiline="true" />

Buttons & Toggle

<engine:Button text="Click Me" name="btn" />
<engine:Toggle label="Enable" value="true" name="toggle" />
<engine:RadioButton label="Option A" value="true" />
<engine:RadioButtonGroup label="Choose:">
    <engine:RadioButton label="A" />
    <engine:RadioButton label="B" />
</engine:RadioButtonGroup>

Sliders & Progress

<engine:Slider label="Volume" low-value="0" high-value="1" value="0.8" name="slider" />
<engine:SliderInt label="Count" low-value="1" high-value="10" value="5" />
<engine:ProgressBar title="Loading..." value="0.5" />
<engine:MinMaxSlider min-value="0" max-value="100" low-limit="0" high-limit="100" />

Dropdowns & Lists

<engine:DropdownField label="Quality" choices="Low,Medium,High" value="Medium" name="dd" />
<engine:ListView name="list-view" />
<engine:TreeView name="tree-view" />

Numeric Fields

<engine:IntegerField label="Count" value="0" name="count" />
<engine:FloatField label="Speed" value="1.5" />
<engine:LongField label="ID" value="0" />
<engine:Vector2Field label="Position" />
<engine:Vector3Field label="Position" />
<engine:RectField label="Bounds" />
<engine:ColorField label="Color" value="#FF0000FF" />

Style Reference in UXML

<!-- USS in same directory as UXML — use just the filename -->
<Style src="MyStyle.uss" />

<!-- USS in a different directory — use full project-relative path -->
<Style src="Assets/UI/Shared/tokens.uss" />

End-to-End Example

Build a feature-card page with navigation bar, hero section, and 3-column card grid.

import unity_skills

# 1. Create PanelSettings (required for runtime rendering)
unity_skills.call_skill("uitk_create_panel_settings",
    savePath="Assets/UI/GamePanel.asset",
    scaleMode="ScaleWithScreenSize",
    referenceResolutionX=1920,
    referenceResolutionY=1080
)

# 2. Create USS with design tokens + component styles
unity_skills.call_skill("uitk_create_uss",
    savePath="Assets/UI/Features.uss",
    content=""":root {
    --color-primary: #E8632B;
    --color-primary-dark: #C9521D;
    --color-bg: #FFF8F0;
    --color-surface: #FFFFFF;
    --color-text: #1A1A1A;
    --color-muted: #666666;
    --color-border: #E0E0E0;
    --space-sm: 8px; --space-md: 16px; --space-lg: 24px; --space-xl: 32px;
    --radius-md: 8px; --radius-lg: 16px; --radius-full: 9999px;
    --font-sm: 12px; --font-md: 14px; --font-lg: 18px; --font-xl: 24px; --font-2xl: 36px;
}
.page { width: 100%; height: 100%; background-color: var(--color-bg); }
.navbar {
    flex-direction: row; align-items: center; justify-content: space-between;
    height: 56px; padding: 0 var(--space-lg);
    background-color: var(--color-surface); border-bottom-width: 1px; border-color: var(--color-border);
}
.nav-brand { font-size: var(--font-lg); -unity-font-style: bold; color: var(--color-text); }
.nav-links { flex-direction: row; }
.nav-link { margin-left: var(--space-md); color: var(--color-muted); font-size: var(--font-md); }
.nav-link:hover { color: var(--color-primary); }
.hero { align-items: center; justify-content: center; padding: var(--space-xl); }
.hero-title { font-size: var(--font-2xl); -unity-font-style: bold; color: var(--color-text); margin-bottom: var(--space-sm); }
.hero-sub { font-size: var(--font-lg); color: var(--color-muted); }
.card-grid { flex-direction: row; flex-wrap: wrap; padding: 0 var(--space-lg); }
.card {
    width: 30%; margin: 1.5%; padding: var(--space-lg);
    background-color: var(--color-surface); border-radius: var(--radius-lg);
    border-width: 1px; border-color: var(--color-border);
    transition-property: translate, border-color; transition-duration: 0.2s;
}
.card:hover { translate: 0 -2px; border-color: var(--color-primary); }
.card__icon { width: 48px; height: 48px; border-radius: 24px; align-items: center; justify-content: center; margin-bottom: var(--space-md); }
.card__icon--orange { background-color: rgba(232,99,43,0.15); }
.card__icon--blue { background-color: rgba(43,125,232,0.15); }
.card__icon--green { background-color: rgba(52,199,89,0.15); }
.card__icon Label { font-size: var(--font-xl); -unity-text-align: middle-center; }
.card__title { font-size: var(--font-lg); -unity-font-style: bold; color: var(--color-text); margin-bottom: var(--space-sm); }
.card__desc { font-size: var(--font-md); color: var(--color-muted); white-space: normal; margin-bottom: var(--space-md); }
.card__tags { flex-direction: row; flex-wrap: wrap; }
.tag { padding: 4px 12px; border-radius: var(--radius-full); font-size: 11px; -unity-font-style: bold; border-width: 1px; border-color: var(--color-primary); color: var(--color-primary); margin-right: var(--space-sm); }
.btn { padding: var(--space-sm) var(--space-lg); border-radius: var(--radius-md); -unity-font-style: bold; border-width: 0; transition-property: background-color, scale; transition-duration: 0.15s; }
.btn:hover { scale: 1.02 1.02; }
.btn-primary { background-color: var(--color-primary); color: #FFFFFF; }
.btn-primary:hover { background-color: var(--color-primary-dark); }
"""
)

# 3. Create UXML layout referencing the USS
unity_skills.call_skill("uitk_create_uxml",
    savePath="Assets/UI/Features.uxml",
    content="""<?xml version="1.0" encoding="utf-8"?>
<engine:UXML xmlns:engine="UnityEngine.UIElements">
    <Style src="Features.uss" />
    <engine:VisualElement class="page">
        <!-- Nav Bar -->
        <engine:VisualElement class="navbar">
            <engine:Label class="nav-brand" text="SkillForge" />
            <engine:VisualElement class="nav-links">
                <engine:Label class="nav-link" text="Home" />
                <engine:Label class="nav-link" text="Features" />
                <engine:Label class="nav-link" text="Docs" />
            </engine:VisualElement>
            <engine:Button class="btn btn-primary" text="Get Started" />
        </engine:VisualElement>
        <!-- Hero -->
        <engine:VisualElement class="hero">
            <engine:Label class="hero-title" text="Build Amazing UI" />
            <engine:Label class="hero-sub" text="Powerful components for your Unity project" />
        </engine:VisualElement>
        <!-- Card Grid -->
        <engine:VisualElement class="card-grid">
            <engine:VisualElement class="card">
                <engine:VisualElement class="card__icon card__icon--orange">
                    <engine:Label text="&#x1f680;" />
                </engine:VisualElement>
                <engine:Label class="card__title" text="Fast Iteration" />
                <engine:Label class="card__desc" text="Hot-reload USS changes instantly without recompiling." />
                <engine:VisualElement class="card__tags">
                    <engine:Label class="tag" text="Performance" />
                    <engine:Label class="tag" text="DX" />
                </engine:VisualElement>
            </engine:VisualElement>
            <engine:VisualElement class="card">
                <engine:VisualElement class="card__icon card__icon--blue">
                    <engine:Label text="&#x1f3a8;" />
                </engine:VisualElement>
                <engine:Label class="card__title" text="Design Tokens" />
                <engine:Label class="card__desc" text="CSS variables for colors, spacing, and typography." />
                <engine:VisualElement class="card__tags">
                    <engine:Label class="tag" text="Theming" />
                </engine:VisualElement>
            </engine:VisualElement>
            <engine:VisualElement class="card">
                <engine:VisualElement class="card__icon card__icon--green">
                    <engine:Label text="&#x2699;" />
                </engine:VisualElement>
                <engine:Label class="card__title" text="Flex Layout" />
                <engine:Label class="card__desc" text="Familiar flexbox model for responsive card grids." />
                <engine:VisualElement class="card__tags">
                    <engine:Label class="tag" text="Layout" />
                    <engine:Label class="tag" text="Flex" />
                </engine:VisualElement>
            </engine:VisualElement>
        </engine:VisualElement>
    </engine:VisualElement>
</engine:UXML>
"""
)

# 4. Create UIDocument in scene
unity_skills.call_skill("uitk_create_document",
    name="FeaturesUI",
    uxmlPath="Assets/UI/Features.uxml",
    panelSettingsPath="Assets/UI/GamePanel.asset"
)

# 5. Read → Modify → Write workflow (change accent color)
result = unity_skills.call_skill("uitk_read_file", filePath="Assets/UI/Features.uss")
updated = result["result"]["content"].replace("#E8632B", "#6C5CE7")
unity_skills.call_skill("uitk_write_file",
    filePath="Assets/UI/Features.uss",
    content=updated
)

Workflow Notes

File → Scene: Create USS + UXML first, then assign to UIDocument in scene
PanelSettings required: Without PanelSettings, UIDocument won't render at runtime
Style src paths: When USS and UXML are in the same folder, use just the filename: <Style src="MyStyle.uss" />. Use a full path like Assets/UI/tokens.uss only when referencing a file in a different directory
Design tokens first: Create a tokens.uss with :root variables, reference it in every UXML
Read-Modify-Write: Use uitk_read_file → edit content → uitk_write_file for incremental changes
Batch for efficiency: Use uitk_create_batch when creating 2+ files to reduce API calls
Test in Game view: USS changes are visible in Game view immediately — no domain reload needed
Localization: Match UI text to the user's language. Chinese user → text="开始", English user → text="Start". Keep USS class names in English always
World Space (Unity 6+): Set renderMode="WorldSpace" in PanelSettings, then configure worldCamera on the UIDocument component in the scene

Sign in to Comment

unity-uitoolkit

Unity UI Toolkit Skills

Skills Overview

USS Design Guide

USS vs CSS

Design Tokens

USS Properties Quick Reference

Flex Layout

Box Model

Text

Background & Appearance

Positioning

Transforms

Pseudo-classes

Layout Patterns

Card Grid (3-column, wrapping)

Navigation Bar

Hero Section (centered title + subtitle)

Sidebar + Content (two-pane)

Component Patterns

Icon Circle

Tag / Badge / Pill

Button Variants

Feature Card (full example)

Transitions & Visual Effects

Smooth Transitions

Hover Lift

Scale Pulse on Click

Text Shadow & Outline

Fade In (opacity transition)

Workarounds — USS Limitations

Fake Box Shadow Pattern

File Operation Skills

uitk_create_uss

uitk_create_uxml

uitk_read_file

uitk_write_file

uitk_delete_file

uitk_find_files

Scene Operation Skills

uitk_create_document

uitk_set_document

uitk_create_panel_settings

uitk_get_panel_settings

uitk_set_panel_settings

uitk_list_documents

Inspection Skills

uitk_inspect_uxml

Template Skills

uitk_create_from_template

Batch Skills

uitk_create_batch

UXML Elements Quick Reference

Layout Containers

Text & Labels

Buttons & Toggle

Sliders & Progress

Dropdowns & Lists

Numeric Fields

Style Reference in UXML

End-to-End Example

Workflow Notes

chat Comments (0)

Skill Details

Related Skills

writing-skills

codex

smart-illustrator

collaborating-with-codex

code-review-router

Build your own?