Unity UI Toolkit

Assists with Unity UI Toolkit development including UXML markup, USS styling, C# VisualElement API, and modern UI patterns.

What This Skill Helps With

UXML Structure

• •Proper element hierarchy and naming conventions
• •Common controls: TextField, Button, Toggle, Slider, ObjectField, ListView
• •Layout containers: VisualElement, ScrollView, Foldout, TwoPaneSplitView
• •Data-driven UI with templates and bindings

USS Styling

• •Class-based styling and selectors
• •Flexbox layout (flex-direction, justify-content, align-items)
• •USS variables and dark theme optimization
• •Pseudo-classes (:hover, :active, :disabled)
• •Transitions and animations

C# VisualElement API

• •Query API: rootElement.Q<Button>("my-button")
• •Event handling: .clicked += and .RegisterValueChangedCallback()
• •Dynamic UI creation with constructors
• •Data binding with Bind() and SerializedObject

Best Practices

• •UXML for structure, USS for styling, C# for logic
• •Name elements for Query API access
• •Use classes for styling, not inline styles
• •Cache VisualElement references in fields
• •Proper event cleanup in OnDestroy()

Common Patterns

Editor Window Setup:

public void CreateGUI() {
    var visualTree = AssetDatabase.LoadAssetAtPath<VisualTreeAsset>("path/to.uxml");
    visualTree.CloneTree(rootVisualElement);

    var button = rootVisualElement.Q<Button>("my-button");
    button.clicked += OnButtonClick;
}

USS Class Toggle:

element.AddToClassList("active");
element.RemoveFromClassList("active");
element.ToggleInClassList("active");

Data Binding:

var so = new SerializedObject(target);
rootVisualElement.Bind(so);

Unity Version Requirements

• •Unity 2021.2+ for runtime UI Toolkit
• •Unity 2019.4+ for editor-only UI Toolkit (limited features)

See ui-toolkit-reference.md for complete API documentation.

When to Use vs Other Components

Use this Skill when: Building UI Toolkit interfaces, writing UXML/USS, or manipulating VisualElements in C#

Use unity-ui-selector skill when: Choosing between UGUI and UI Toolkit for a project

Use @unity-scripter agent when: Implementing complex UI logic or custom VisualElement controls

Use EditorScriptUIToolkit templates when: Generating new UI Toolkit editor windows with UXML/USS files

Related Skills

• •unity-ui-selector: Helps choose between UGUI and UI Toolkit
• •unity-template-generator: Generates UI Toolkit editor script templates
• •unity-script-validator: Validates UI Toolkit code patterns