ui-toolkit

Design Unity UI Toolkit screens with UXML, USS, and UQuery event wiring.

Updated May 6, 2026
One-click install
npx skills add https://github.com/BasarEkinci/memory-card-game --skill ui-toolkit-basarekinci
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: ui-toolkit
Source: https://github.com/BasarEkinci/memory-card-game/tree/main/.claude/skills/systems/ui-toolkit
Command: npx skills add https://github.com/BasarEkinci/memory-card-game --skill ui-toolkit-basarekinci

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It solves the challenge of building responsive, maintainable Unity UI using UI Toolkit by providing clear patterns for UXML structure, USS styling, querying, and performant list rendering.

Core Features & Use Cases

  • UXML Structure & Reuse: Define screens, named controls, and layout containers using UXML with consistent element naming for reliable querying.
  • USS Styling (CSS-like): Style UI with flex-based layout, hover/active states, transitions, theming variables, and dark/light palettes.
  • UQuery & Event Wiring: Use Q and Query to locate elements by name/class/type and bind UI events like clicks and slider changes.
  • ListView Virtualization: Configure ListView for large datasets using fixed item height, efficient makeItem/bindItem patterns, and refresh vs rebuild choices.
  • Custom Visual Elements: Create reusable VisualElement components (with UxmlFactory support) that encapsulate behavior and styling.
  • Animation & State Management: Trigger UI transitions by toggling USS classes and respond to TransitionEndEvent for cleanup or chaining.

Quick Start

Use the ui-toolkit skill to implement a main menu UI by creating a matching UXML document, writing USS for layout and states, and wiring button/slider events via UQuery on the UIDocument root visual element.

Frequently Asked Questions about ui-toolkit

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

FAQPage Schema
How do I build Unity UI Toolkit screens using UXML and USS?

Unity UI Toolkit screens are built by defining layout structure in UXML and applying flex-based styling with USS variables, then querying elements via UQuery to wire runtime events. This pattern enables maintainable main menus and HUDs by separating visual structure from logic.

What is the best way to handle large scrolling lists in Unity UI Toolkit?

ListView virtualization handles large scrolling lists in Unity UI Toolkit by configuring fixedItemHeight and using makeItem/bindItem patterns. This reuses visual elements instead of instantiating them all, ensuring performance for inventory-like UI with large datasets.

How does UQuery work for binding events to UIDocument elements?

UQuery works by querying the UIDocument.rootVisualElement to locate child elements by name, class, or type using Q and Query methods. After locating the target VisualElement, you attach event callbacks directly to handle clicks and slider changes at runtime.

Can I switch UI themes dynamically at runtime in Unity?

You can switch UI themes dynamically at runtime in Unity by managing stylesheets on the root visual element. This allows toggling between dark and light palettes by adding or removing USS stylesheet references without rebuilding the UXML structure.

How do I animate UI transitions in Unity UI Toolkit?

Animate UI transitions in Unity UI Toolkit by toggling USS classes on VisualElements to trigger transitions defined in USS. You can chain animations or clean up states by listening for the TransitionEndEvent callback after the visual transition completes.

Does Unity UI Toolkit support custom reusable VisualElement components?

Unity UI Toolkit supports custom reusable VisualElement components via UxmlFactory. This encapsulates specific styling and behavior into a single element that can be instantiated and queried directly within UXML files like built-in controls.