unity-game-ui-toolkit-design

Design Unity game UIs with UXML/USS and responsive layouts.

Updated Jan 10, 2026
One-click install
npx skills add https://github.com/tja688/ITC-Unity6 --skill unity-game-ui-toolkit-design-tja688
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: unity-game-ui-toolkit-design
Source: https://github.com/tja688/ITC-Unity6/tree/main/.agents/skills/unity-game-ui-toolkit-design
Command: npx skills add https://github.com/tja688/ITC-Unity6 --skill unity-game-ui-toolkit-design-tja688

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Unity UI design for games using UI Toolkit is intricate, requiring hands-on work with USS, UXML, Flexbox layouts, panel scaling, and safe-area handling to produce consistent, responsive interfaces.

Core Features & Use Cases

  • UXML/USS-based UI: Design and prototype HUDs, menus, and dialogs with web-like workflows.
  • Responsive Scaling: PanelSettings-driven scaling for desktop and mobile across aspect ratios.
  • Layout Patterns: Flexbox-aligned layouts, safe-area aware components, and reusable UI templates for health bars, inventories, and skill bars.

Quick Start

Create a Unity project, add a UIDocument component, and begin prototyping a responsive HUD using USS and UXML.

Frequently Asked Questions about unity-game-ui-toolkit-design

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

FAQPage Schema
How do I build responsive HUDs in Unity using UI Toolkit?

Build responsive HUDs in Unity UI Toolkit by authoring UXML and USS files with Flexbox layouts, leveraging PanelSettings scaling to adapt interfaces across desktop and mobile aspect ratios.

How does Safe Area support work for mobile UI in Unity?

Safe Area support for mobile UI in Unity involves configuring safe-area aware components within UXML, ensuring HUDs and menus avoid notches by adapting layouts to device screen boundaries.

Can I use Flexbox layouts for Unity game menus and dialogs?

Yes, you can use Flexbox-aligned layouts for Unity game menus and dialogs by defining structural hierarchy in UXML and styling visual rules in USS, similar to web development workflows.

What is the best way to scale UI Toolkit panels for both desktop and mobile?

The best way to scale UI Toolkit panels is configuring PanelSettings-driven scaling, which dynamically adjusts UXML interface rendering to maintain consistency across different desktop and mobile resolutions.

Do I need a UIDocument component to start prototyping UXML UIs?

Yes, you need to add a UIDocument component to a GameObject in your Unity project to link and render the UXML structures, enabling immediate prototyping of responsive game interfaces.

How to create reusable UI templates for health bars and inventories with USS?

Create reusable UI templates for health bars and inventories by defining USS styling classes and UXML structural components, allowing scalable replication of complex game interface elements across projects.