Unity UI Toolkit

Implements Unity UI Toolkit interfaces using UXML markup, USS styling, and C# VisualElement APIs.

Updated Jun 30, 2026
One-click install
npx skills add https://github.com/kaitoartz/dotfiles --skill unity-ui-toolkit-kaitoartz
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: Unity UI Toolkit
Source: https://github.com/kaitoartz/dotfiles/tree/main/dot_gemini/config/skills/unity-ui-toolkit
Command: npx skills add https://github.com/kaitoartz/dotfiles --skill unity-ui-toolkit-kaitoartz

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Building modern Unity editor and runtime interfaces requires coordinating three separate layers—UXML structure, USS styling, and C# VisualElement logic—and developers often struggle with query patterns, event cleanup, and data binding pitfalls. ## Core Features & Use Cases - UXML Structure Guidance: Covers element hierarchy, naming conventions, and common controls like TextField, Button, ListView, and TwoPaneSplitView. - USS Styling Patterns: Provides flexbox layout rules, class-based selectors, pseudo-classes, and dark theme optimization. - C# VisualElement API: Demonstrates the Query API, event registration, SerializedObject data binding, and custom control creation with UxmlFactory. - Use Case: When creating a custom editor window, use this Skill to generate the UXML layout, style it with USS classes, and wire up button callbacks and property bindings in C# while avoiding common pitfalls like querying before CreateGUI completes. ## Quick Start Help me build a Unity editor window using UI Toolkit with a UXML layout, USS styling, and a bound ObjectField.

Frequently Asked Questions about Unity UI Toolkit

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create a Unity editor window with UI Toolkit?▼

Override CreateGUI() in your EditorWindow, load a VisualTreeAsset with AssetDatabase.LoadAssetAtPath, and call CloneTree on rootVisualElement. Then query elements by name with rootVisualElement.Q<Button>("my-button") and attach event handlers.

How to bind data in Unity UI Toolkit with SerializedObject?▼

Create a SerializedObject from your target object and call rootVisualElement.Bind(so) to automatically bind matching fields. For manual binding, use so.FindProperty("fieldName") and bind a PropertyField to that property.

Should I use UGUI or UI Toolkit for my Unity project?▼

UI Toolkit is recommended for editor tooling and new runtime UI in Unity 2021.2+, offering flexbox-style layout and retained-mode rendering. UGUI remains suitable for existing projects or when specific canvas-based features are required.

Which Unity version supports runtime UI Toolkit?▼

Runtime UI Toolkit requires Unity 2021.2 or newer. Editor-only UI Toolkit works from Unity 2019.4 onward but with limited features compared to later versions.

Why does rootVisualElement.Q return null in Unity?▼

The query returns null when called before CreateGUI finishes cloning the visual tree, or when the element lacks a name attribute in UXML. Always query after CloneTree and set name="my-button" on elements you need to access.

How do I avoid memory leaks with UI Toolkit events?▼

Unregister event handlers in OnDestroy() to prevent leaks. For example, pair button.clicked += OnClick with button.clicked -= OnClick in the cleanup method, and cache VisualElement references in fields rather than re-querying.