swiftui-development git:20260116.5b9abf0A

Immutable. This exact content never changes and is served at /api/v1/blob/f90f34d5fe62ca00.

---
name: swiftui-development
description: Specialized in building user interfaces using modern SwiftUI, covering NavigationStack, Observation framework, and SwiftData integration.
allowed-tools: Read, Grep, Glob, Edit, Write
---

# 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

- 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

```swift
@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

```swift
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()
                }
            }
        }
    }
}
```

## Best Practices

- **Single Source of Truth**: Always maintain a single source of truth for your data.
- **Environment**: Use `.environment()` to inject global dependencies or theme data.
- **Avoid Massive Views**: Break down complex views into smaller component views (`struct SubView: View`).
- **State vs Binding**: Use `@State` when the view owns the data, and `@Binding` (`@Bindable` for Observables) when it modifies parent data.
- **Computed Properties**: Use computed properties to derive UI state instead of manually syncing multiple state variables.

## Notes

- For iOS 17+, `@Observable` is preferred. For legacy support, fallback to `ObservableObject` may be needed, but strictly mark it.
- All UI updates must be performed on the main thread (SwiftUI generally handles this, but be careful with callbacks from background tasks).

## Best Practices

- [Best practice 1]
- [Best practice 2]
- [Best practice 3]

## Notes

[Any additional notes, warnings, or important considerations]