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