swiftui-development

SwiftUI Development Skill

Instructions

Use this skill to write declarative, reactive UI code. Always adhere to the iOS Human Interface Guidelines (HIG).

What This Skill Does

• UI Construction: Build interfaces using Views, Modifiers, and Layout containers.
• State Management: Manage data flow using the Observation framework (@Observable, @State, @Environment).
• Navigation: Handle routing using NavigationStack and navigationDestination.
• Previews: Rapidly iterate on UI using the #Preview macro.
• Persistence Integration: Seamlessly integrate SwiftData (@Query) into views.

When to Use This Skill

Trigger scenarios:

• When writing .swift view files.
• When designing the App's navigation structure.
• When handling animations and transitions.
• When binding ViewModel data to the interface.

Examples

Example 1: Observation-based ViewModel and View

@Observable
class CounterModel {
    var count = 0
    
    func increment() {
        count += 1
    }
}

struct CounterView: View {
    @State private var model = CounterModel()
    
    var body: some View {
        VStack {
            Text("Count: \(model.count)")
                .font(.largeTitle)
            Button("Add") {
                model.increment()
            }
        }
    }
}

#Preview {
    CounterView()
}

Example 2: Type-Safe Navigation with NavigationStack

enum Route: Hashable {
    case profile(id: String)
    case settings
}

struct ContentView: View {
    @State private var path = NavigationPath()
    
    var body: some View {
        NavigationStack(path: $path) {
            List {
                NavigationLink("Go to Profile", value: Route.profile(id: "123"))
                NavigationLink("Settings", value: Route.settings)
            }
            .navigationDestination(for: Route.self) { route in
                switch route {
                case .profile(let id):
                    ProfileView(userId: id)
                case .settings:
                    SettingsView()
                }
            }
        }
    }
}