Nlelouche Unity3d Antigravityskills Responsive UI Design

name: responsive-ui-design description: "Responsive and adaptive UI design for multi-device support using UI Toolkit flexbox and media queries." version: 2.0.0 tags: ["UI", "responsive", "adaptive", "mobile", "multi-platform"] argument-hint: "breakpoint='mobile' OR layout='adaptive' safe_area='true'" disable-model-invocation: false user-invocable: true allowed-tools: - run_command - list_dir - write_to_file requirements: unity_version: ">=6.0" render_pipeline: "Any" dependencies: [] context_discovery: check_unity_version: true check_render_pipeline: false scan_manifest_for: [] performance_budget: gc_alloc_per_frame: "0 bytes target in hot paths" max_update_cost: "O(n) - profiler-guided" tdd_first: true # ⚠️ Updated by audit v2.0.1 - needs manual test implementation

Responsive UI Design

Overview

Responsive and adaptive UI design for Unity. Build interfaces that work across mobile, tablet, desktop, and console using UI Toolkit flexbox, percentage units, and runtime adaptation.

When to Use

• Use for multi-platform games
• Use for mobile/tablet adaptation
• Use for safe area handling (notches)
• Use for aspect ratio independence
• Use for accessibility scaling

Responsive Strategies

Architecture

┌─────────────────────────────────────────────────────────────┐
│               RESPONSIVE UI ARCHITECTURE                    │
├─────────────────────────────────────────────────────────────┤
│                                                             │
│  SCREEN SIZE            LAYOUT              SAFE AREA       │
│  ┌──────────┐         ┌──────────┐        ┌──────────┐     │
│  │ Width    │────────▶│ Compact  │───────▶│ Padding  │     │
│  │ Height   │         │ Regular  │        │ Margins  │     │
│  │ DPI      │         │ Expanded │        │ Insets   │     │
│  └──────────┘         └──────────┘        └──────────┘     │
│                                                             │
│  BREAKPOINTS:  Mobile(<600)  Tablet(<1024)  Desktop         │
│                                                             │
└─────────────────────────────────────────────────────────────┘

Flexbox Responsive Patterns

Safe Area Handling

┌─────────────────────────────────────────┐
│▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓│ ← Notch
│                                         │
│   ┌─────────────────────────────────┐   │
│   │                                 │   │
│   │        SAFE CONTENT             │   │
│   │                                 │   │
│   └─────────────────────────────────┘   │
│                                         │
│▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓│ ← Home indicator
└─────────────────────────────────────────┘

Best Practices

• ✅ Use percentage and flex units
• ✅ Handle Screen.safeArea for notches
• ✅ Test on multiple resolutions
• ✅ Use min/max constraints
• ✅ Scale fonts with screen density
• ❌ NEVER hardcode pixel positions
• ❌ NEVER assume fixed aspect ratio
• ❌ NEVER ignore safe areas on mobile

Few-Shot Examples

Example 1: Safe Area Handler

User: "Handle notch on mobile."

Agent:

public class SafeAreaHandler : MonoBehaviour
{
    [SerializeField] private UIDocument _uiDocument;
    
    private void OnEnable()
    {
        ApplySafeArea();
    }
    
    private void ApplySafeArea()
    {
        var root = _uiDocument.rootVisualElement;
        var safeArea = Screen.safeArea;
        var screen = new Vector2(Screen.width, Screen.height);
        
        // Convert to percentages
        float left = safeArea.x / screen.x * 100f;
        float right = (screen.x - safeArea.xMax) / screen.x * 100f;
        float top = (screen.y - safeArea.yMax) / screen.y * 100f;
        float bottom = safeArea.y / screen.y * 100f;
        
        var content = root.Q("safe-content");
        content.style.marginLeft = new Length(left, LengthUnit.Percent);
        content.style.marginRight = new Length(right, LengthUnit.Percent);
        content.style.marginTop = new Length(top, LengthUnit.Percent);
        content.style.marginBottom = new Length(bottom, LengthUnit.Percent);
    }
}

Example 2: Responsive Container USS

User: "CSS for responsive container."

Agent:

.container {
    flex-grow: 1;
    padding: 16px;
    max-width: 1200px;
    align-self: center;
    width: 100%;
}

/* Mobile: full width, smaller padding */
.container.mobile {
    padding: 8px;
    max-width: 100%;
}

/* Tablet: medium constraints */
.container.tablet {
    max-width: 800px;
}

Example 3: Breakpoint Controller

User: "Switch layouts based on screen size."

Agent:

public class ResponsiveController : MonoBehaviour
{
    private VisualElement _root;
    
    private void Update()
    {
        UpdateBreakpoint();
    }
    
    private void UpdateBreakpoint()
    {
        float width = Screen.width;
        
        _root.RemoveFromClassList("mobile");
        _root.RemoveFromClassList("tablet");
        _root.RemoveFromClassList("desktop");
        
        if (width < 600)
            _root.AddToClassList("mobile");
        else if (width < 1024)
            _root.AddToClassList("tablet");
        else
            _root.AddToClassList("desktop");
    }
}

Platform Considerations

TDD Contract

⚠️ Legacy Skill — Refactor Pending Este skill NO tiene tests automatizados aún. El siguiente boilerplate es un punto de partida.

// Escribe estos tests ANTES de implementar:

// Test 1: should [expected behavior] when [condition]
[Test]
public void ResponsiveUiDesign_Should{ExpectedBehavior}_When{Condition}()
{{
    // Arrange
    // TODO: Setup test fixtures
    
    // Act
    // TODO: Execute system under test
    
    // Assert
    Assert.Fail("Not implemented — write test first");
}}

// Test 2: should handle [edge case]
[Test]
public void ResponsiveUiDesign_ShouldHandle{EdgeCase}()
{{
    // Arrange
    // TODO: Setup edge case scenario
    
    // Act
    // TODO: Execute
    
    // Assert
    Assert.Fail("Not implemented");
}}

// Test 3: should throw when [invalid input]
[Test]
public void ResponsiveUiDesign_ShouldThrow_When{InvalidInput}()
{{
    // Arrange
    var invalidInput = default;
    
    // Act & Assert
    Assert.Throws<Exception>(() => {{ /* execute */ }});
}}

Pasos para completar el TDD:

1. Descomenta los tests above
2. Implementa la funcionalidad mínima para que compile
3. Ejecuta los tests — deben fallar (RED)
4. Implementa la funcionalidad real
5. Verifica que los tests pasen (GREEN)
6. Refactorea manteniendo los tests verdes

Nota: Este skill fue marcado como tdd_first: false durante la auditoría v2.0.1. La sección TDD fue agregada automáticamente pero requiere customización manual para reflejar el comportamiento real del skill.

Related Skills

• @ui-toolkit-modern - Core UI Toolkit
• @input-system-new - Multi-device input
• @canvas-performance - Performance optimization

Converted and distributed by TomeVault — claim your Tome and manage your conversions.