unity-ui-procedural

Installation
SKILL.md

Unity UI Toolkit Procedural UI

Build lightning-fast, highly dynamic user interfaces entirely through code. This skill enables the "Logic-First" UI workflow, perfect for complex systems like inventories, tooltips, and dynamic HUDs.

Core Features

  1. Fluent Hiyerarşi Construction: Use chained extension methods like .CreateChild<T>() and .WithClass() to build UI trees that read like documentation.
  2. Generic Pointer Manipulators: Decouple interaction logic (Drag, Resize, Selection) from visuals using the Manipulator API.
  3. No-Builder Workflow: Eliminates the need for complex UXML files, making UI version-control friendly and procedurally scalable.
  4. BEM Integration: Extension methods prioritize CSS class application to maintain a clean styling system.

Core Files (Max 3)

  • UIToolkitExtensions.cs.txt: Generic methods for chaining element creation and styling.
  • DragManipulator.cs.txt: A cross-platform pointer-based drag system for any VisualElement.
  • ProceduralViewExample.cs.txt: A "Hotbar/Inventory" demo showing the power of the fluent syntax.

Usage

1. Build a Panel (The Fluent Way)

var root = GetComponent<UIDocument>().rootVisualElement;
root.CreateChild<VisualElement>( "main-menu" )
    .WithClass( "menu--active" )
    .CreateChild<Button>( "menu__btn--start" )
    .text = "Start Game";

2. Add Interactions

var window = root.Q( "inventory-window" );
window.AddManipulator( new DragManipulator() );

Key Principle

Always use USS classes for styling even when building procedurally. Avoid setting .style.width or colors directly in C# unless it is for dynamic calculations (like health bars).

Related skills
Installs
7
GitHub Stars
7
First Seen
Apr 19, 2026