skills.rest
breineng
breinengCOMMUNITY
Explore all skills by this author →
GitHub

unity-game-ugui-design

Design responsive Unity uGUI interfaces with Canvas, RectTransform, and anchors.

7|2|Updated Apr 1, 2026
Search Tags:#unity#ugui#canvas#responsive#ui-design#recttransform
One-click install
npx skills add https://github.com/breineng/mimesis-ai-clone-unity --skill unity-game-ugui-design-breineng
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: unity-game-ugui-design
Source: https://github.com/breineng/mimesis-ai-clone-unity/tree/main/.agents/skills/unity-game-ugui-design
Command: npx skills add https://github.com/breineng/mimesis-ai-clone-unity --skill unity-game-ugui-design-breineng

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Unity UI design for games can be complex and error-prone; this Skill provides a practical guide to building robust, responsive UIs using Unity's uGUI (Canvas/RectTransform/Anchors) with reusable patterns and step-by-step examples.

Core Features & Use Cases

  • Comprehensive uGUI patterns: Canvas setup, anchors, safe area, HUD panels, inventory grids, skill bars, minimaps, and dialogs.
  • Practical MCP-style implementation guidance: how to instantiate and configure UI elements at runtime with code snippets and prefab layout guidance.
  • Real-world examples: layout strategies for diegetic/non-diegetic UI, responsive scaling across screen sizes, and accessible UI considerations.

Quick Start

Create a new Unity UI canvas, add a CanvasScaler with ReferenceResolution, attach an Image-based background, and start composing HUD elements like health bar and skill bar to observe responsive behavior.

Frequently Asked Questions about unity-game-ugui-design

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

FAQPage Schema
How do I make a responsive Unity uGUI canvas that scales across different screen sizes?▼

A responsive Unity uGUI canvas requires configuring a CanvasScaler with ReferenceResolution and using RectTransform anchoring. This ensures HUD panels, health bars, and inventories adapt correctly across various screen sizes without breaking layout.

What is the best way to handle Safe Area in Unity uGUI for notched devices?▼

Safe Area handling in Unity uGUI involves adjusting RectTransform anchors to respect device notches. This prevents UI elements like minimaps or skill bars from being obscured on mobile screens with hardware cutouts.

How do I instantiate and configure uGUI elements at runtime in Unity?▼

Instantiating uGUI elements at runtime uses MCP-style implementation patterns to configure prefabs and RectTransforms via code. This allows dynamic creation of inventory grids, dialogs, and HUD components during gameplay.

Can I use uGUI RectTransform anchors for both diegetic and non-diegetic game UI?▼

uGUI RectTransform anchors support both diegetic and non-diegetic UI layout strategies. Anchor presets allow you to position elements relative to screen edges or centers for immersive or overlay interfaces.

Does this Unity uGUI guide cover accessible UI considerations?▼

Accessible Unity uGUI design is covered alongside responsive scaling and layout patterns. It provides strategies to ensure menus and dialog systems remain usable across different display configurations.

Why does my Unity uGUI HUD layout break on different screen aspects?▼

Broken Unity uGUI layouts usually stem from incorrect RectTransform anchor configurations or missing CanvasScaler settings. Applying proper anchor presets and reference resolution scaling resolves HUD positioning across aspect ratios.

Related Skills

Explore More Design & Creative Skills→
slantviewslantview
1

unity-developer

Develop Unity games with optimized C# scripts and rendering.

Community
Advanced
KimPlaybitKimPlaybit
7

galaxy-debug-data-catalog

Expose DataTable, Catalog fields, and UserData during SC2 Galaxy triggers for debugging and modification.

Community
Advanced
RuzenieRuzenie
2

svg-canvas-icon-engine

Convert SVG and Canvas icon capabilities into executable icon generation skills.

Community
Intermediate
tranvietanh0tranvietanh0

unity-ui-toolkit

Create and manage Unity UI Toolkit elements with UXML and USS styling.

Community
Advanced