Best practices and example-driven guidance for building SwiftUI views and components. Use when creating or refactoring SwiftUI UI, designing tab architecture with TabView, composing screens, or needing component-specific patterns and examples.
npxskills add dimillian/skills--skill swiftui-ui-patternsLoading…
Choose a track based on your goal:
rg "TabView\(" or similar, then read the closest SwiftUI view.references/components-index.md and follow its guidance.references/scroll-reveal.md before implementing gestures manually.references/app-wiring.md to wire TabView + NavigationStack + sheets.AppTab and RouterPath based on the provided skeletons.@State, @Binding, @Observable, @Environment) and avoid unnecessary view models.ObservableObject with @StateObject for root ownership, @ObservedObject for injected observation, and @EnvironmentObject only for truly shared app-level state..task and explicit loading/error states. For restart, cancellation, and debouncing guidance, read references/async-state.md.Use the narrowest state tool that matches the ownership model:
| Scenario | Preferred pattern |
|---|---|
| Local UI state owned by one view | @State |
| Child mutates parent-owned value state | @Binding |
| Root-owned reference model on iOS 17+ | @State with an @Observable type |
Child reads or mutates an injected @Observable model on iOS 17+ | Pass it explicitly as a stored property |
| Shared app service or configuration | @Environment(Type.self) |
| Legacy reference model on iOS 16 and earlier | @StateObject at the root, when injected |
Choose the ownership location first, then pick the wrapper. Do not introduce a reference model when plain value state is enough.
references/navigationstack.md: navigation ownership, per-tab history, and enum routing.references/sheets.md: centralized modal presentation and enum-driven sheets.references/deeplinks.md: URL handling and routing external links into app destinations.references/app-wiring.md: root dependency graph, environment usage, and app shell wiring.references/async-state.md: .task, .task(id:), cancellation, debouncing, and async UI state.references/previews.md: #Preview, fixtures, mock environments, and isolated preview setup.body-driven code paths instead of view lifecycle hooks or injected models/services.AnyView to work around type mismatches that should be solved with better composition.@EnvironmentObject or a global router without a clear ownership reason.@Environment and which should stay as explicit initializer inputs.references/navigationstack.md, references/sheets.md, or references/deeplinks.md. Build and verify no compiler errors before proceeding..task or .task(id:), plus explicit loading and error states when needed. Read references/async-state.md when the work depends on changing inputs or cancellation.references/previews.md when the view needs fixtures or injected mock dependencies.Use references/components-index.md as the entry point. Each component reference should include:
references/<component>.md.references/components-index.md with the new entry.@Environment, but prefer explicit initializer injection for feature-local dependencies and models. For root wiring patterns, read references/app-wiring.md..sheet(item:) over .sheet(isPresented:) when state represents a selected model. Avoid if let inside a sheet body. Sheets should own their actions and call dismiss() internally instead of forwarding onCancel/onConfirm closures.@ObservedObjectreferences/performance.mdreferences/performance.md if the screen is large, scroll-heavy, or frequently updated. For common SwiftUI compilation errors — missing @State annotations, ambiguous ViewBuilder closures, or mismatched generic types — resolve them before updating callsites. If the build fails: read the error message carefully, fix the identified issue, then rebuild before proceeding to the next step. If a preview crashes, isolate the offending subview, confirm its state initialisation is valid, and re-run the preview before continuing.
Create or update AgentSkills. Use when designing, structuring, or packaging skills with scripts, references, and assets.
Create or update AgentSkills. Use when designing, structuring, or packaging skills with scripts, references, and assets.
Set up and use 1Password CLI (op). Use when installing the CLI, enabling desktop app integration, signing in (single or multi-account), or reading/injecting/running secrets via op.
CLI to manage emails via IMAP/SMTP. Use `himalaya` to list, read, write, reply, forward, search, and organize emails from the terminal. Supports multiple accounts and message composition with MML (MIME Meta Language).
Create or update AgentSkills. Use when designing, structuring, or packaging skills with scripts, references, and assets.
Create or update AgentSkills. Use when designing, structuring, or packaging skills with scripts, references, and assets.
Set up and use 1Password CLI (op). Use when installing the CLI, enabling desktop app integration, signing in (single or multi-account), or reading/injecting/running secrets via op.
CLI to manage emails via IMAP/SMTP. Use `himalaya` to list, read, write, reply, forward, search, and organize emails from the terminal. Supports multiple accounts and message composition with MML (MIME Meta Language).