Skills
.Work. You
Rest

adaptive-layout

Community

Build UIs that adapt to any screen.

Software Engineering#responsive design#navigation#swiftui#ui development#ipad#adaptive layout
Authormoasq
Version1.0.0
Installs0

System Documentation

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.

Dependency Matrix

Required Modules

None required

Components

references

💻 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: adaptive-layout
Download link: https://github.com/moasq/nanowave/archive/main.zip#adaptive-layout

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.