MindForge swiftui-development

Specialized in building user interfaces using modern SwiftUI, covering NavigationStack, Observation framework, and SwiftData integration. Use this skill when writing SwiftUI view files, designing app navigation, handling animations and transitions, or binding ViewModel data to the interface.

install

source · Clone the upstream repo

git clone https://github.com/ProjAnvil/MindForge

Claude Code · Install into ~/.claude/skills/

T=$(mktemp -d) && git clone --depth=1 https://github.com/ProjAnvil/MindForge "$T" && mkdir -p ~/.claude/skills && cp -r "$T/skills/en/swiftui-development" ~/.claude/skills/projanvil-mindforge-swiftui-development && rm -rf "$T"

manifest: skills/en/swiftui-development/SKILL.md

source content

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

@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()
                }
            }
        }
    }
}

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).