skills.rest
Criezzz
CriezzzCOMMUNITY
Explore all skills by this author →
GitHub

responsive-ui-design

Create responsive Unity UI Toolkit layouts with breakpoints and safe area margins.

Updated Feb 25, 2026
Search Tags:#unity#breakpoints#flexbox#safe-area#responsive-ui#adaptive-layouts#ui-toolkit
One-click install
npx skills add https://github.com/Criezzz/Gametopia2026 --skill responsive-ui-design
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: responsive-ui-design
Source: https://github.com/Criezzz/Gametopia2026/tree/main/.agent/skills/responsive-ui-design
Command: npx skills add https://github.com/Criezzz/Gametopia2026 --skill responsive-ui-design

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

Many Unity projects struggle to present consistent, accessible interfaces across mobile, tablet, desktop, and console screens, often ignoring safe areas, orientation changes, and breakpoint-driven layout differences. This Skill provides patterns and code to make UI adapt fluidly and predictably across device sizes and aspect ratios.

Core Features & Use Cases

  • Breakpoint-based Layouts: Runtime detection and class switching for mobile, tablet, and desktop breakpoints to swap or adjust layouts.
  • Safe Area Handling: Compute and apply safe area margins to avoid notches and home indicators on modern mobile devices.
  • Flexbox & Percentage Styling: Recommendations and USS templates for flex-grow, min/max constraints, and percentage sizing to keep interfaces scalable.
  • Use Case: Convert a single UI Document to a responsive interface that automatically applies mobile, tablet, or desktop styles and adjusts content margins for device safe areas.

Quick Start

Apply the responsive-ui-design skill to adapt your Unity UIDocument for mobile notches and tablet/desktop breakpoints.

Frequently Asked Questions about responsive-ui-design

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

FAQPage Schema
How do I create responsive UI layouts in Unity that adapt to mobile, tablet, and desktop breakpoints?▼

Responsive UI layouts in Unity are created by detecting runtime screen sizes and switching breakpoint classes within UI Toolkit to adjust mobile, tablet, or desktop styles dynamically. This Skill provides a controller class and USS templates to automate that layout switching.

How do I handle safe areas for notches and home indicators in Unity UI Toolkit?▼

Safe area handling in Unity UI Toolkit requires computing device safe area margins and applying them to your UIDocument to avoid notches and home indicators. This Skill provides scripts that automatically calculate and apply these margins during runtime orientation changes.

Does Unity UI Toolkit support flexbox and percentage-based styling for multi-device UI?▼

Unity UI Toolkit supports flexbox and percentage-based styling for scalable multi-device UI. This Skill provides USS templates leveraging flex-grow, min/max constraints, and percentage sizing to keep interfaces proportional across different aspect ratios.

What is the best way to make a single Unity UIDocument adapt to different screen sizes and orientations?▼

The best way to adapt a single Unity UIDocument is using runtime breakpoint detection combined with class-based layouts and safe area management. This Skill applies mobile, tablet, or desktop styles automatically as screen sizes and orientations change.

Can I use this responsive UI approach for console and desktop scenarios, or is it only for mobile?▼

This responsive UI approach targets Unity UI Toolkit projects across mobile, tablet, desktop, and console scenarios. Breakpoint-based layouts and flexbox styling adjust interfaces automatically regardless of the target platform or screen size.

Why does my Unity UI overlap device notches when the screen orientation changes?▼

Unity UI overlaps notches during orientation changes when safe area margins are not recalculated and applied at runtime. This Skill computes safe area boundaries dynamically and adjusts content margins to prevent overlap with notches and home indicators.

Related Skills

Explore More Software Engineering Skills→
breinengbreineng
7

unity-game-ui-toolkit-design

Designs Unity game UIs with USS/UXML/Flexbox for HUDs, inventories, and dialogs.

Community
Advanced
RomualdPRomualdP

Mobile-First Responsive Design

Implement mobile-first responsive layouts with Tailwind CSS breakpoints.

Community
Intermediate
syncfusionsyncfusion
4

syncfusion-blazor-media-query

Detects screen size changes and binds ActiveBreakPoint for responsive Blazor UI.

Official
Intermediate
creator-hiancreator-hian
10

unity-ui

Implement and optimize Unity UI across UI Toolkit and UGUI.

Community
Advanced