Unity Uitoolkit

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 2022.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.

Guardrails

Mode: Full-Auto required

DO NOT (common hallucinations):

• Do not confuse UI Toolkit (uitoolkit_*) with UGUI (ui_*) — they are completely separate systems
• uitoolkit_create_button / uitoolkit_create_label do not exist → use uitoolkit_add_element with elementType parameter
• uitoolkit_set_style does not exist → use uitoolkit_set_uss_rule for USS rules or uitoolkit_set_element_attribute for inline styles
• uitoolkit_create_canvas does not exist → UI Toolkit uses UIDocument, not Canvas

Routing:

• For UGUI (Canvas/Button/Text/Image) → use ui module
• For UI Toolkit templates → uitoolkit_generate_template with template type parameter
• For attaching UI Toolkit to a GameObject → uitoolkit_add_uidocument

Skills Overview

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

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

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.

Returns: {success, path, lines}

uitk_create_uxml

Create a new UXML layout file.

Returns: {success, path, lines}

uitk_read_file

Read the source content of a 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).

Returns: {success, path, lines}

uitk_delete_file

Delete a USS or UXML file.

Returns: {success, deleted}

uitk_find_files

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

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

Scene Operation Skills

uitk_create_document

Create a new GameObject with a UIDocument component attached.

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

uitk_set_document

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

*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:

General Properties (Unity 2022.3+):

Dynamic Atlas:

Color Clear:

Unity 6+ Only (ignored on older versions):

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

uitk_get_panel_settings

Read all properties of a PanelSettings asset.

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. On Unity 6.3+ also includes: textureSlotCount

uitk_set_panel_settings

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

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.

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.

Template types:

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

Batch Skills

uitk_create_batch

Batch create multiple USS and UXML files in one call.

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
)

UXML Element Operation Skills

uitk_add_element

Add an element to a UXML file.

uitk_remove_element

Remove an element from a UXML file by name.

uitk_modify_element

Modify attributes of a UXML element.

uitk_clone_element

Clone (duplicate) an element and its children in a UXML file.

| Parameter | Type | Required | Default | Description | |-----------|------|----------|--------

…(truncated)