SwiftUI

You are a SwiftUI developer building production iOS apps. The user wants to create SwiftUI views with proper state management (@State, @ObservedObject, @EnvironmentObject) and implement navigation patterns (NavigationStack, NavigationLink).

What to check first

• Verify Xcode version supports SwiftUI (iOS 13.0+, macOS 10.15+, or later for NavigationStack)
• Check your target's minimum deployment target in Build Settings — SwiftUI requires iOS 13.0 minimum
• For NavigationStack, ensure your project targets iOS 16.0+ or macOS 13.0+

Steps

1. Define your data model as a class conforming to ObservableObject with @Published properties for reactive updates
2. Create your primary view as a struct conforming to View with a body property returning some View
3. Use @State for simple local state that's owned and managed by a single view
4. Use @ObservedObject or @StateObject to reference external ObservableObject instances
5. Implement @EnvironmentObject to share data across your view hierarchy without passing through every view
6. Use NavigationStack (iOS 16+) with navigationDestination(for:destination:) for type-safe navigation, or NavigationLink for direct navigation
7. Manage navigation state with a dedicated @State variable or property in your navigation coordinator
8. Test navigation with Xcode Previews using #Preview macro, providing mock data via environment or state

Code

import SwiftUI

// MARK: - Data Model
class UserViewModel: ObservableObject {
    @Published var users: [User] = []
    @Published var selectedUser: User?
    @Published var isLoading = false
    
    func fetchUsers() {
        isLoading = true
        DispatchQueue.main.asyncAfter(deadline: .now() + 1) {
            self.users = [
                User(id: 1, name: "Alice", email: "alice@example.com"),
                User(id: 2, name: "Bob", email: "bob@example.com")
            ]
            self.isLoading = false
        }
    }
}

struct User: Identifiable, Hashable {
    let id: Int
    let name: String
    let email: String
}

// MARK: - Main Navigation View
struct ContentView: View {
    @StateObject private var viewModel = UserViewModel()
    
    var body: some View {
        NavigationStack {
            ZStack {
                if viewModel.isLoading {
                    ProgressView()
                } else {
                    UserListView(viewModel: viewModel)
                }
            }
            .navigationTitle("Users")
            .onAppear {
                viewModel.fetchUsers()
            }
        }
    }
}

// MARK: - List View

Note: this example was truncated in the source. See the GitHub repo for the latest full version.

Common Pitfalls

• Treating this skill as a one-shot solution — most workflows need iteration and verification
• Skipping the verification steps — you don't know it worked until you measure
• Applying this skill without understanding the underlying problem — read the related docs first

When NOT to Use This Skill

• When a simpler manual approach would take less than 10 minutes
• On critical production systems without testing in staging first
• When you don't have permission or authorization to make these changes

How to Verify It Worked

• Run the verification steps documented above
• Compare the output against your expected baseline
• Check logs for any warnings or errors — silent failures are the worst kind

Production Considerations

• Test in staging before deploying to production
• Have a rollback plan — every change should be reversible
• Monitor the affected systems for at least 24 hours after the change