skills.rest
nlelouche
nleloucheCOMMUNITY
Explore all skills by this author →
GitHub

responsive-ui-design

Implement responsive UI layouts in Unity using UI Toolkit flexbox and breakpoints.

71|11|Updated Jan 23, 2026
Search Tags:#ui#mobile#cross-platform#responsive#adaptive#unity ui toolkit
One-click install
npx skills add https://github.com/nlelouche/Unity-SkillForge --skill responsive-ui-design-nlelouche
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: responsive-ui-design
Source: https://github.com/nlelouche/Unity-SkillForge/tree/main/.agent/skills/05-ui-ux/responsive-ui-design
Command: npx skills add https://github.com/nlelouche/Unity-SkillForge --skill responsive-ui-design-nlelouche

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and templates (resource) components.

What problem does it solve?

This Skill addresses the challenge of creating user interfaces in Unity that seamlessly adapt to various screen sizes, aspect ratios, and device types, ensuring a consistent and optimal user experience across all platforms.

Core Features & Use Cases

  • Responsive Layouts: Utilizes UI Toolkit's flexbox and percentage-based units for fluid sizing.
  • Adaptive Breakpoints: Implements breakpoint-based layout switching for distinct device categories (mobile, tablet, desktop).
  • Safe Area Handling: Manages notches and system UI elements on mobile devices to prevent content overlap.
  • Use Case: Design a game's main menu that looks great on a small mobile phone in portrait, a tablet in landscape, and a large desktop monitor, all while respecting the safe area on the phone.

Quick Start

Use the responsive-ui-design skill to apply safe area handling to the main UI document.

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 different screen sizes?▼

Responsive UI layouts in Unity can be created using UI Toolkit's flexbox and percentage-based units for fluid sizing. This Skill applies media query-like classes to support multi-device adaptation across mobile, tablet, and desktop screens.

How do I handle mobile notches and safe areas in Unity UI Toolkit?▼

Safe area handling for mobile notches in Unity UI Toolkit prevents content overlap with system UI elements. This Skill manages safe areas automatically, ensuring your interface respects device boundaries on various mobile platforms.

Does this Unity UI Toolkit responsive design approach require a specific Unity version?▼

Yes, responsive and adaptive UI design with this Skill requires Unity 6+ and C#12. These versions are necessary to support advanced features like Span<T> used within the implementation for optimal multi-device adaptation.

Can I use breakpoint-based layout switching for distinct device categories in Unity?▼

Yes, you can implement adaptive breakpoints in Unity to switch layouts for distinct device categories. This Skill applies breakpoint-based classes to automatically adapt your UI structure for mobile, tablet, and desktop viewing.

What is the best way to ensure aspect ratio independence for a cross-platform Unity game menu?▼

Aspect ratio independence for a cross-platform Unity game menu is achieved by combining UI Toolkit's flexbox with media query-like class application. This ensures optimal user experience whether the device is in portrait or landscape.

Related Skills

Explore More Design & Creative Skills→
cuozgcuozg
4

unity-uitoolkit-create

Generate Unity runtime UI with UXML, USS, and C# controller scripts.

Community
Intermediate
CatsofsufferingCatsofsuffering
5

adapt

Adapt designs across screen sizes with responsive layouts, breakpoints, and touch targets.

Community
Intermediate
IAFahimIAFahim

app-ui

Create Panel-based Unity UI components with App UI theming and MVVM.

Community
Advanced
lrbjklrbjk

unity-ui

Create and configure Unity UI elements with layout and alignment.

Community
Intermediate