Agent skill · design visual · dpearson2699
swiftui-layout-components
Build SwiftUI layouts using stacks, grids, lists, scroll views, forms, and controls. Covers VStack/HStack/ZStack, LazyVGrid/LazyHGrid, List with sections and swipe actions, ScrollView with ScrollPosition and scroll-driven reveal surfaces, Form with validation, Toggle/Picker/Slider, .searchable, and overlay patterns. Use when building data-driven layouts, collection views, paged detail reveals, settings screens, search interfaces, or transient overlay UI.
Why this skill is useful
Provides specific layout patterns and component usage for SwiftUI that the AI wouldn't reliably generate on its own.
What it needs
About 6k tokens when loaded. Last updated 2026-07-31. 973 stars on the source repository.
What this skill does
SwiftUI Layout & Components Layout and component patterns for SwiftUI apps targeting iOS 26+ with Swift 6.3. Covers stack and grid layouts, list patterns, scroll views, forms, controls, search, and overlays. Patterns are backward-compatible to iOS 17 unless noted. Contents Layout Fundamentals Grid Layouts List Patterns ScrollView Form and Controls Searchable Overlay and Presentation Common Mistakes Review Checklist References Layout Fundamentals Standard Stacks Use VStack, HStack, and ZStack for small, fixed-size content. They render all children immediately. Lazy Stacks Use LazyVStack and LazyHStack inside ScrollView for large or dynamic collections. They create child views on demand as they scroll into view. When to use which: Non-lazy stacks: Small, fixed content (headers, toolbars, forms with few fields) Lazy stacks: Large or unknown-size collections, feeds, chat messages Grid Layouts Use LazyVGrid for icon pickers, media galleries, and dense visual selections. Use .adaptive columns for layouts that scale across device sizes, or .flexible columns for a fixed column count. Use .aspectRatio for cell sizing. Never place GeometryReader inside lazy containers -- it forces eager measurement and defeats lazy loading. Use .onGeometryChange (iOS 16+) if you need to read dimensions. See references/grids.md for full grid patterns and design choices. List Patterns Use List for feed-style content and settings rows where built-in row reuse, selection, and accessibility matter. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills dpearson2699/swiftui-layout-components