Unity ui toolkit

Skill a5c-ai/babysitter/library/specializations/game-development/skills/unity-ui-toolkit

Babysitter enforces obedience on agentic workforces and enables them to manage extremely complex tasks and workflows through deterministic, hallucination-free self-orchestration

Install

npx -y skills add a5c-ai/babysitter --skill unity-ui-toolkit

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

What its author says it does

Copied from the file, not written here

Unity UI Toolkit skill for runtime UI development, USS styling, UXML templates, and custom visual elements.

SKILL.md

2.5 KB, as published. Nobody here has run it

Unity UI Toolkit Skill

UI Toolkit development for Unity runtime and editor interfaces.

Overview

This skill provides capabilities for building user interfaces using Unity's UI Toolkit, including UXML templates, USS styling, and custom visual elements.

Capabilities

UXML Templates

Create UXML document structure
Define reusable templates
Implement data binding
Handle template inheritance

USS Styling

Write USS stylesheets
Implement responsive layouts
Create theme variants
Handle hover/focus states

Visual Elements

Build custom visual elements
Implement manipulators
Handle input events
Create animations

Data Binding

Bind to data sources
Implement MVVM patterns
Handle list views and collections
Create reactive UI

Prerequisites

Unity 2021.3+
UI Toolkit package (built-in)

Usage Patterns

UXML Template

<ui:UXML xmlns:ui="UnityEngine.UIElements">
    <ui:VisualElement class="container">
        <ui:Label name="health-label" text="Health: 100" />
        <ui:ProgressBar name="health-bar" value="100" />
        <ui:Button name="heal-button" text="Heal" />
    </ui:VisualElement>
</ui:UXML>

USS Stylesheet

.container {
    flex-direction: column;
    padding: 10px;
    background-color: rgba(0, 0, 0, 0.8);
}

#health-bar {
    height: 20px;
    margin: 5px 0;
}

#heal-button:hover {
    background-color: #4CAF50;
}

C# Binding

public class HealthUI : MonoBehaviour
{
    [SerializeField] private UIDocument uiDocument;
    private ProgressBar healthBar;

    void Start()
    {
        var root = uiDocument.rootVisualElement;
        healthBar = root.Q<ProgressBar>("health-bar");
        root.Q<Button>("heal-button").clicked += OnHealClicked;
    }

    void OnHealClicked() { /* Handle heal */ }
}

Best Practices

Use USS for styling over inline styles
Create reusable UXML templates
Implement proper event handling
Test across resolutions
Use UI Builder for visual editing

References

UI Toolkit Documentation