Skills
.Work. You
Rest

responsive-ui-design

Community

Adaptive UI for multi-device, notch-safe layouts

Software Engineering#unity#breakpoints#flexbox#safe-area#responsive-ui#adaptive-layouts#ui-toolkit
AuthorCriezzz
Version1.0.0
Installs0

System Documentation

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.

Dependency Matrix

Required Modules

None required

Components

scripts

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: responsive-ui-design
Download link: https://github.com/Criezzz/Gametopia2026/archive/main.zip#responsive-ui-design

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.