dpearson2699 avatar

Swiftui Layout Components

Covers the layout primitives you reach for when building iOS apps: stacks, grids, lists, scroll views, forms, and standard controls. The grid section is especially practical, with clear guidance on adaptive versus fixed columns and a warning against GeometryReader inside lazy containers. List patterns include scroll position tracking, swipe actions, and pull to refresh. Form examples show typical toggle, picker, and slider setups with validation hints. The searchable section demonstrates debounced async search with scopes. Written for iOS 26 and Swift 6.3 but notes backward compatibility to iOS 17. Good reference when you need the right incantation for scroll edge effects or need to remember which stack type to use when.

skills.sh installs
4.4K
GitHub stars
1.3K
last updated
Aug 21, 2026

Install

$ npx -y skills add dpearson2699/swift-ios-skills --skill swiftui-layout-components --agent claude-code

Installs into .claude/skills of the current project.

Files

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

Standard Stacks

Use VStack, HStack, and ZStack for small, fixed-size content. They render all children immediately.

VStack(alignment: .leading) {
    Text(title).font(.headline)
    Text(subtitle).font(.subheadline).foregroundStyle(.secondary)
}

Lazy Stacks

Use LazyVStack and LazyHStack inside ScrollView for large or dynamic collections. They create child views on demand as they scroll into view.

Sponsors

Details

Repository
github.com/dpearson2699/swift-ios-skills
Categories
Frontend Development, DevOps & CI/CD, Mobile Development
First seen
Apr 16, 2026

More from dpearson2699/swift-ios-skills

All 98
1jeffallan avatarvue-expert-jsjeffallan/claude-skillsCreates Vue 3 components, builds vanilla JS composables, configures Vite projects, and sets up routing and state management using JavaScript only — no TypeScrip4.3Kskills.sh installs
2omer-metin avatargame-ui-designomer-metin/skills-for-antigravityWorld-class game UI design expertise combining the clarity of Nintendo's UI philosophy, the immersive diegetic interfaces of Dead Space and Metroid Prime, and t4.3Kskills.sh installs
3assistant-ui avatarreact-mcpassistant-ui/skillsLets end users add, authenticate, and manage MCP servers from the browser in assistant-ui apps with @assistant-ui/react-mcp. Use when building user-managed MCP 4.2Kskills.sh installs
4getsentry avatarsentry-react-native-sdkgetsentry/sentry-for-aiFull Sentry SDK setup for React Native and Expo. Use when asked to "add Sentry to React Native", "install @sentry/react-native", "setup Sentry in Expo", or conf4.2Kskills.sh installs
5softaworks avatarreact-useeffectsoftaworks/agent-toolkitReact useEffect best practices from official docs. Use when writing/reviewing useEffect, useState for derived values, data fetching, or state synchronization. T4.1Kskills.sh installs
6forcedotcom avatargenerating-ui-bundle-metadataforcedotcom/sf-skillsMUST activate when the project contains a uiBundles/*/src/ directory and scaffolding a new UI bundle or app, or when editing ui-bundle.json, .uibundle-meta.xml,3.7Kskills.sh installs