SwiftUI State Management and View Architecture
Writes and fixes SwiftUI views with the right state wrapper, stable identity, and NavigationStack routing for your iOS target.
Before & after
Same prompt, same agent — the only difference is the skill.
SwiftUI provides several ways to handle navigation and tab organization. You can use TabView for tab-based navigation, which allows users to switch between different views easily. You'll want to create separate views for each tab and manage state appropriately throughout the app. Navigation in SwiftUI follows a declarative pattern, so think about how your views relate to each other. I could help you structure a basic TabView setup if you'd like. State management is important too - you might need @State or @StateObject depending on your needs and data flow. Would you like me to outline a basic structure for your home and settings tabs?
import SwiftUI
struct MainTabView: View {
@State private var selectedTab: Int = 0
var body: some View {
TabView(selection: $selectedTab) {
FeedView()
.tabItem {
Label("Home", systemImage: "house.fill")
}
.tag(0)
SettingsView()
.tabItem {
Label("Settings", systemImage: "gear")
}
.tag(1)
}
}
}
struct FeedView: View {
@StateObject private var viewModel = FeedViewModel()
var body: some View {
NavigationStack {
List(viewModel.items) { item in
NavigationLink(destination: ItemDetail(item: item)) {
FeedItemRow(item: item)
}
}
.navigationTitle("Home")
}
}
}
struct SettingsView: View {
@AppStorage("isDarkMode") var isDarkMode = false
var body: some View {
NavigationStack {
List {
Toggle("Dark Mode", isOn: $isDarkMode)
}
.navigationTitle("Settings")
}
}
}
KEY PATTERNS: Use @State for local tab selection. Separate views prevent re-renders. AppStorage connects settings to system persistence. NavigationStack replaces deprecated NavigationView - required for iOS 16+.About this skill
Your view model keeps getting recreated. A text field resets every time the list refreshes. Navigation pops back on its own. These SwiftUI bugs almost always come from state owned in the wrong place or from broken view identity. This skill makes Claude decide ownership and identity first, then write or fix the view for your actual deployment target.
What it does
- Picks the correct wrapper for every value (
@State,@Binding,@Bindable,@Environment, or theObservableObjectfamily on iOS 16 and earlier) and explains each choice in one line - Diagnoses symptoms such as resetting state, recreated view models, and over-rendering, then names the likely cause and shows the minimal diff
- Catches identity bugs: if/else branches that reset state,
AnyView,.ifmodifier extensions, and index-based or unstableForEachIDs - Builds value-based
NavigationStackrouting with a typed route enum, correctly placednavigationDestination, and.sheet(item:)modals - Migrates
ObservableObjectcode to@Observable, including the initializer-rerun trap most migrations miss - Reviews pasted views with findings ranked by severity: state, then identity, navigation, performance, and style
What you get
Working Swift code or a targeted diff, an ownership map for the screen's state, and a way to confirm the fix in your own build.
Best for
iOS developers building or maintaining SwiftUI apps with Claude Code, especially teams moving to the Observation framework or chasing state and navigation bugs.
SKILL.md preview
---
name: swiftui-state-and-view-architecture
description: Builds, reviews, and debugs SwiftUI views. It decides who owns each piece of state, keeps view identity stable, and routes with value-based NavigationStack, all matched to the app's deployment target. Use when the user says "build this screen in SwiftUI", "should this be @State or @StateObject", "migrate my view models to @Observable", "my view model keeps getting recreated", "my text field resets whenever the list updates", "SwiftUI is re-rendering everything", "navigation keeps popping back on its own", "review this SwiftUI view".
---
# SwiftUI State Management and View Architecture
… (sign up to view the full skill)More development skills
View all Development skills →Frontend Component UX and Accessibility Review
Severity-ranked fixes with code for UI components: states, keyboard, focus, ARIA, touch targets, contrast, and responsive breakage.
Three.js Click-to-Learn 3D Game Builder
Build click-to-learn 3D games in Three.js: TSL materials, reliable object picking, and an accessible quiz overlay fed by content data.
Angular Standalone Features and State Architecture
Build Angular standalone features with lazy routes, scoped state, safe RxJS flows, and targeted tests.
shadcn/ui Component Building and Theming
Build, theme, and debug shadcn/ui components the way the library is designed to work, with Tailwind v3 and v4 theming handled correctly.