swiftui-layout-components

Select SwiftUI layout and component patterns for iOS screens.

Updated May 6, 2026
One-click install
npx skills add https://github.com/Roy-wonji/claude-config --skill swiftui-layout-components-roy-wonji
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: swiftui-layout-components
Source: https://github.com/Roy-wonji/claude-config/tree/main/skills/swift-ios-skills/skills/swiftui-layout-components
Command: npx skills add https://github.com/Roy-wonji/claude-config --skill swiftui-layout-components-roy-wonji

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps you choose correct SwiftUI layout primitives and composition patterns so your iOS screens stay performant, accessible, and easy to maintain instead of becoming fragile custom UI.

Core Features & Use Cases

  • Layout fundamentals: Practical guidance for when to use VStack/HStack/ZStack versus LazyVStack/LazyHStack.
  • Collection-ready patterns: Clear recommendations for LazyVGrid/LazyHGrid, List sections, and performant ScrollView designs.
  • Form + controls structure: Use Form, Section, validation-friendly input composition, and robust control binding patterns.
  • Search and overlays: Apply .searchable with debounced async behavior, and use overlays for transient UI with safe presentation choices.
  • Guardrails & review checklist: Common mistakes prevention (e.g., GeometryReader in lazy containers, unstable IDs, list/scroll gesture conflicts).
  • Use cases: data-driven feeds, settings screens, search interfaces, collection-based pickers/galleries, and short-lived banner/toast-style UI.

Quick Start

Use the swiftui-layout-components skill to design a performant iOS settings screen with sections, validation-ready inputs, search, and a transient top toast overlay.

Frequently Asked Questions about swiftui-layout-components

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

FAQPage Schema
When should I use LazyVStack or LazyHStack instead of regular stacks in SwiftUI?

Use LazyVStack or LazyHStack in SwiftUI when rendering data-driven feeds or long lists inside a ScrollView to ensure views are created on demand, keeping memory usage low and scroll performance high for large datasets.

How do I build a performant searchable list with debounced search in SwiftUI?

Build a searchable SwiftUI list by applying the .searchable modifier and debouncing the search task with async behavior, preventing rapid duplicate network requests while filtering data efficiently as the user types.

What is the best way to structure a settings screen with forms and validation in SwiftUI?

The best way to structure a SwiftUI settings screen is using Form with Section groupings to organize validation-friendly inputs and control bindings, ensuring accessible layout and robust data management for user preferences.

Why does putting GeometryReader inside a lazy container break my SwiftUI layout?

Placing GeometryReader inside lazy containers like LazyVStack breaks SwiftUI layouts because it forces immediate sizing calculations for deferred views, causing unpredictable sizing, performance degradation, and unstable view identifiers.

Can I use LazyVGrid to build a collection-style picker UI in SwiftUI?

Yes, you can use LazyVGrid to build collection-based picker UIs and galleries in SwiftUI by defining adaptive or fixed column counts, allowing efficient grid layouts that load cells lazily for optimal scrolling performance.

How do I display transient toast or banner overlays safely in SwiftUI?

Display transient toast or banner overlays in SwiftUI by applying overlays to your root view hierarchy rather than lazy containers, ensuring the transient UI presents safely without disrupting underlying scroll gestures or list interactions.