mcpField
U
unity-ui-procedural

unity-ui-procedural

github.com/muharremtozanDevelopment1755 installsUpdated 22w ago
Repository

About unity-ui-procedural

A Unity UI Toolkit skill for developers building interfaces procedurally in C#. It offers fluent element construction, reusable pointer manipulators, and USS class-based styling without requiring UXML files.

Key features

  1. 01Fluent UI tree construction
  2. 02Reusable pointer manipulators
  3. 03Procedural UI without UXML
  4. 04USS class-based styling

Use cases

  1. 01Build dynamic inventory interfaces
  2. 02Add drag interactions to elements
  3. 03Create procedural menus and HUDs

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/muharremtozan/unity-agent-skills --skill unity-ui-procedural

After installing, type/unity-ui-proceduralin Claude Code to confirm it loaded.

Bundled files

References and scripts installed along with SKILL.md.

assets/code/
DragManipulator.cs.txt
ProceduralViewExample.cs.txt
UIToolkitExtensions.cs.txt

Details

From the project README

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).

Comments

Markdown supported