layout

Provides guidance on SwiftUI layout patterns, view composition, and performance optimization.

32|10|Updated Feb 21, 2026
One-click install
npx skills add https://github.com/moasq/nanowave --skill layout
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: layout
Source: https://github.com/moasq/nanowave/tree/main/internal/orchestration/skills/always/layout
Command: npx skills add https://github.com/moasq/nanowave --skill layout

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides guidance on effectively structuring SwiftUI views, managing layout complexities, and optimizing performance to create adaptable and maintainable user interfaces.

Core Features & Use Cases

  • Layout Patterns: Understand VStack, HStack, ZStack, and their adaptive alternatives.
  • View Composition: Learn to extract subviews, manage container views, and use modifiers effectively.
  • Performance Optimization: Avoid layout thrash and minimize GeometryReader usage.
  • Platform Adaptability: Implement responsive layouts for different screen sizes and devices, especially iPad.
  • Use Case: When building a complex screen, use this Skill to ensure your view hierarchy is efficient, your custom components are reusable, and your layout adapts gracefully to various device sizes.

Quick Start

Explain how to use GeometryReader to make a header view take up 20% of the screen height.

Frequently Asked Questions about layout

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

FAQPage Schema
How do I optimize SwiftUI layout performance and avoid view thrash?

To optimize SwiftUI layout performance, minimize GeometryReader usage and extract subviews to flatten your view hierarchy. This prevents layout thrash and ensures efficient view composition updates across different device sizes.

What's the best way to structure complex SwiftUI views and manage view composition?

Structuring complex SwiftUI views requires extracting reusable subviews and managing container view patterns. This approach maintains clean view hierarchy principles, separates view logic, and improves component testability across your application.

How do I create adaptive SwiftUI layouts for different platforms like iPad?

Adaptive SwiftUI layouts respond to different screen sizes by leveraging stack layouts and safe area handling. Implementing responsive platform adaptability patterns ensures your interface scales gracefully across iOS and iPadOS devices.

When should I use GeometryReader in SwiftUI and what are the alternatives?

GeometryReader in SwiftUI is useful for proportional sizing, such as making a header take 20% of screen height, but it causes layout thrash. Use stack layouts and subview extraction as alternatives to minimize performance impact.

Does this SwiftUI view composition guidance cover safe area handling and custom container views?

Yes, this SwiftUI view composition guidance covers safe area handling, custom container view patterns, and modifier usage. It provides best practices for managing view logic and building reusable UI components efficiently.

Why does extracting subviews in SwiftUI improve view logic and testability?

Extracting subviews in SwiftUI improves testability by isolating view logic into smaller, reusable components. This container view pattern enforces clear view structure principles and simplifies managing complex view hierarchies.