skills.rest
moasq
moasqCOMMUNITY
Explore all skills by this author →
𝕏@foundmodGitHub

adaptive-layout

Create adaptive SwiftUI layouts using NavigationSplitView, size classes, and ViewThatFits.

32|10|Updated Feb 21, 2026
Search Tags:#responsive design#navigation#swiftui#ui development#ipad#adaptive layout
One-click install
npx skills add https://github.com/moasq/nanowave --skill adaptive-layout
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: adaptive-layout
Source: https://github.com/moasq/nanowave/tree/main/internal/orchestration/skills/ui/adaptive-layout
Command: npx skills add https://github.com/moasq/nanowave --skill adaptive-layout

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps developers create user interfaces that seamlessly adapt to different screen sizes and device types, ensuring a consistent and optimal user experience across iPhones, iPads, and other Apple platforms.

Core Features & Use Cases

  • Responsive Navigation: Utilizes NavigationSplitView for robust list-detail interfaces that automatically adapt to screen real estate.
  • Size Class Adaptation: Leverages SwiftUI's horizontalSizeClass environment variable to conditionally adjust layouts for compact (iPhone) and regular (iPad) environments.
  • Component-Level Adaptation: Employs ViewThatFits for UI elements that need to adapt based purely on available space, independent of device type.
  • Adaptive Grids & Spacing: Uses GridItem(.adaptive(minimum:)) for flexible grid layouts and default .padding() for platform-appropriate spacing.
  • Smart Presentations: Configures sheets and popovers to behave correctly on both iPhone and iPad.

Quick Start

Use the adaptive-layout skill to implement a NavigationSplitView for a list-detail interface.

Frequently Asked Questions about adaptive-layout

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

FAQPage Schema
How do I build a responsive SwiftUI interface for both iPhone and iPad?▼

Build a responsive SwiftUI interface by leveraging NavigationSplitView, horizontalSizeClass, and ViewThatFits to conditionally adjust layouts. This ensures consistent UI across compact iPhone screens and regular iPad environments.

What is the best way to implement adaptive navigation in SwiftUI?▼

Adaptive navigation is best implemented using NavigationSplitView for list-detail interfaces. It automatically adapts to available screen real estate, transitioning smoothly between compact and regular size classes.

How does ViewThatFits work for component-level adaptation in SwiftUI?▼

ViewThatFits works by automatically selecting the first UI element that fits within the available space. It adapts components based purely on space, independent of device type, ensuring UI elements render correctly.

Can I use adaptive grid layouts for universal app development in SwiftUI?▼

Yes, you can use adaptive grid layouts for universal app development by implementing GridItem(.adaptive(minimum:)). This creates flexible grids that automatically adjust column counts based on the screen width.

How do I configure sheets and popovers for adaptive layout on iPad?▼

Configure sheets and popovers for adaptive layout by using SwiftUI's presentation modifiers. These modifiers automatically detect the horizontal size class to display content as a sheet on iPhone and a popover on iPad.

Related Skills

Explore More Software Engineering Skills→
ArogyaReddyArogyaReddy

mobile-ios-design

Guide iOS interface design with Apple HIG and SwiftUI patterns.

Community
Intermediate
rshankrasrshankras
603

ui-review

Audit SwiftUI code for HIG compliance, accessibility, and Dynamic Type support.

Community
Advanced
fusenginefusengine
22

swiftui-core

Guide SwiftUI development across Apple platforms with state management and navigation.

Community
Intermediate
derekhu0002derekhu0002

liquid-glass-design

Implement Liquid Glass UI patterns across SwiftUI, UIKit, and WidgetKit.

Community
Advanced