swiftui-ui-patterns

Build and refactor SwiftUI interfaces using component patterns for navigation, state, and layout.

25|1|Updated Feb 10, 2026
One-click install
npx skills add https://github.com/wisdom-in-a-nutshell/agents --skill swiftui-ui-patterns-wisdom-in-a-nutshell
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: swiftui-ui-patterns
Source: https://github.com/wisdom-in-a-nutshell/agents/tree/main/plugins-source/external/build-ios-apps/skills/swiftui-ui-patterns
Command: npx skills add https://github.com/wisdom-in-a-nutshell/agents --skill swiftui-ui-patterns-wisdom-in-a-nutshell

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? SwiftUI developers often struggle with choosing the right state ownership model, wiring navigation across tabs, and avoiding anti-patterns like giant views or scattered sheet logic. This Skill provides concrete, battle-tested patterns for structuring SwiftUI UI code so screens stay composable, performant, and consistent with modern APIs. ## Core Features & Use Cases - State ownership guidance: Decision table mapping scenarios to @State, @Binding, @Observable, @Environment, or legacy @StateObject/@ObservedObject for iOS 16 and earlier. - Navigation and presentation patterns: Per-tab NavigationStack routing with enum-based routes, centralized enum-driven sheets, and deep link handling through a single router. - Component reference library: Over 20 focused references covering TabView, List, Form, grids, scroll-reveal surfaces, haptics, theming, previews, async task lifecycle, and performance guardrails. - Use Case: When building a new settings screen, follow the Form reference for grouped sections, apply the theming pattern for consistent colors, and wire presentation through the centralized sheet enum instead of ad-hoc boolean flags. ## Quick Start Ask the assistant to design or refactor a SwiftUI screen, for example: build a tab-based app shell with per-tab navigation stacks and enum-driven sheets following the SwiftUI UI patterns.

Frequently Asked Questions about swiftui-ui-patterns

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

FAQPage Schema
How do I choose between @State, @Binding, and @Observable in SwiftUI?▼

Use @State for local view-owned value state, @Binding when a child mutates parent-owned state, and @State with an @Observable type for root-owned reference models on iOS 17+. Choose the ownership location first, then pick the narrowest wrapper that fits.

How do I set up per-tab NavigationStack routing in SwiftUI?▼

Give each tab its own router object owning a path array, bind NavigationStack(path:) to it, and map routes with a single navigationDestination(for:) block. Inject the router via .environment so child views navigate without prop-drilling.

Should I use sheet(isPresented:) or sheet(item:) in SwiftUI?▼

Prefer sheet(item:) when the presentation state represents a selected model, since it guarantees a single active sheet and avoids if-let inside the sheet body. Centralize multiple modals with an Identifiable SheetDestination enum.

Does this SwiftUI state pattern work on iOS 16?▼

The Observation framework requires iOS 17, so on iOS 16 fall back to ObservableObject with @StateObject for root ownership and @ObservedObject for injected models. Reserve @EnvironmentObject for truly shared app-level state.

Why does my SwiftUI view re-render too often?▼

Excessive re-renders usually come from unstable ForEach identity, expensive work inside body, or overly broad observation scope. Use stable IDs, move heavy transforms into models, and narrow which views read changing state.

How do I handle async loading and cancellation in SwiftUI views?▼

Use .task for load-on-appear work and .task(id:) when work should restart for changing inputs like search queries. Treat cancellation as normal, debounce user-driven requests, and keep explicit loading and error states.