swiftui-patterns

OverviewHistoryStatsSecurity

npx skills add affaan-m/ecc --skill swiftui-patterns

Documentation

SKILL.md

npx skills add ...

Documentation

SKILL.md

SwiftUI architecture patterns, state management with @Observable, view composition, navigation, performance optimization, and modern iOS/macOS UI best practices. Use when building or reviewing SwiftUI views, @Observable state, navigation, or render performance.

npx skills add affaan-m/ecc --skill swiftui-patterns

Documentation

SKILL.mdView source

SwiftUI Patterns

Modern SwiftUI patterns for building declarative, performant user interfaces on Apple platforms. Covers the Observation framework, view composition, type-safe navigation, and performance optimization.

When to Activate

Building SwiftUI views and managing state (@State, @Observable, @Binding)
Designing navigation flows with NavigationStack
Structuring view models and data flow
Optimizing rendering performance for lists and complex layouts
Working with environment values and dependency injection in SwiftUI

State Management

Property Wrapper Selection

Choose the simplest wrapper that fits:

Wrapper	Use Case
`@State`	View-local value types (toggles, form fields, sheet presentation)
`@Binding`	Two-way reference to parent's `@State`
`@Observable` class + `@State`	Owned model with multiple properties
`@Observable` class (no wrapper)	Read-only reference passed from parent
`@Bindable`	Two-way binding to an `@Observable` property
`@Environment`	Shared dependencies injected via `.environment()`

@Observable ViewModel

Use @Observable (not ObservableObject) — it tracks property-level changes so SwiftUI only re-renders views that read the changed property:

@Observable
final class ItemListViewModel {
    private(set) var items: [Item] = []
    private(set) var isLoading = false
    var searchText = ""
 
    private let repository: any ItemRepository
 
    init(repository: any ItemRepository = DefaultItemRepository()) {
        self.repository = repository
    }
 
    func load() async {
        isLoading = true
        defer { isLoading = false }
        items = (try? await repository.fetchAll()) ?? []
    }
}

View Consuming the ViewModel

struct ItemListView: View {
    @State private var viewModel: ItemListViewModel
 
    init(viewModel: ItemListViewModel = ItemListViewModel()) {
        _viewModel = State(initialValue: viewModel)
    }
 
    var body: some View {
        List(viewModel.items) { item in
            ItemRow(item: item)
        }
        .searchable(text: $viewModel.searchText)
        .overlay { if viewModel.isLoading { ProgressView() } }
        .task { await viewModel.load() }
    }
}

Environment Injection

Replace @EnvironmentObject with @Environment:

// Inject
ContentView()
    .environment(authManager)
 
// Consume
struct ProfileView: View {
    @Environment(AuthManager.self) private var auth
 
    var body: some View {
        Text(auth.currentUser?.name ?? "Guest")
    }
}

View Composition

Extract Subviews to Limit Invalidation

Break views into small, focused structs. When state changes, only the subview reading that state re-renders:

struct OrderView: View {
    @State private var viewModel = OrderViewModel()
 
    var body: some View {
        VStack {
            OrderHeader(title: viewModel.title)
            OrderItemList(items: viewModel.items)
            OrderTotal(total: viewModel.total)
        }
    }
}

ViewModifier for Reusable Styling

struct CardModifier: ViewModifier {
    func body(content: Content) -> some View {
        content
            .padding()
            .background(.regularMaterial)
            .clipShape(RoundedRectangle(cornerRadius: 12))
    }
}
 
extension View {
    func cardStyle() -> some View {
        modifier(CardModifier())
    }
}

Type-Safe NavigationStack

Use NavigationStack with NavigationPath for programmatic, type-safe routing:

@Observable
final class Router {
    var path = NavigationPath()
 
    func navigate(to destination: Destination) {
        path.append(destination)
    }
 
    func popToRoot() {
        path = NavigationPath()
    }
}
 
enum Destination: Hashable {
    case detail(Item.ID)
    case settings
    case profile(User.ID)
}
 
struct RootView: View {
    @State private var router = Router()
 
    var body: some View {
        NavigationStack(path: $router.path) {
            HomeView()
                .navigationDestination(for: Destination.self) { dest in
                    switch dest {
                    case .detail(let id): ItemDetailView(itemID: id)
                    case .settings: SettingsView()
                    case .profile(let id): ProfileView(userID: id)
                    }
                }
        }
        .environment(router)
    }
}

Performance

Use Lazy Containers for Large Collections

LazyVStack and LazyHStack create views only when visible:

ScrollView {
    LazyVStack(spacing: 8) {
        ForEach(items) { item in
            ItemRow(item: item)
        }
    }
}

Stable Identifiers

Always use stable, unique IDs in ForEach — avoid using array indices:

// Use Identifiable conformance or explicit id
ForEach(items, id: \.stableID) { item in
    ItemRow(item: item)
}

Avoid Expensive Work in body

Never perform I/O, network calls, or heavy computation inside body
Use .task {} for async work — it cancels automatically when the view disappears
Use .sensoryFeedback() and .geometryGroup() sparingly in scroll views
Minimize .shadow(), .blur(), and .mask() in lists — they trigger offscreen rendering

Equatable Conformance

For views with expensive bodies, conform to Equatable to skip unnecessary re-renders:

struct ExpensiveChartView: View, Equatable {
    let dataPoints: [DataPoint] // DataPoint must conform to Equatable
 
    static func == (lhs: Self, rhs: Self) -> Bool {
        lhs.dataPoints == rhs.dataPoints
    }
 
    var body: some View {
        // Complex chart rendering
    }
}

Previews

Use #Preview macro with inline mock data for fast iteration:

#Preview("Empty state") {
    ItemListView(viewModel: ItemListViewModel(repository: EmptyMockRepository()))
}
 
#Preview("Loaded") {
    ItemListView(viewModel: ItemListViewModel(repository: PopulatedMockRepository()))
}

Anti-Patterns to Avoid

Using ObservableObject / @Published / @StateObject / @EnvironmentObject in new code — migrate to @Observable
Putting async work directly in body or init — use .task {} or explicit load methods
Creating view models as @State inside child views that don't own the data — pass from parent instead
Using AnyView type erasure — prefer @ViewBuilder or Group for conditional views
Ignoring Sendable requirements when passing data to/from actors

References

See skill: swift-actor-persistence for actor-based persistence patterns. See skill: swift-protocol-di-testing for protocol-based DI and testing with Swift Testing.

npx skills add affaan-m/ecc --skill swiftui-patterns

Documentation

SKILL.md

npx skills add affaan-m/ecc --skill swiftui-patterns

Documentation

SKILL.mdView source

SwiftUI Patterns

When to Activate

Building SwiftUI views and managing state (@State, @Observable, @Binding)
Designing navigation flows with NavigationStack
Structuring view models and data flow
Optimizing rendering performance for lists and complex layouts
Working with environment values and dependency injection in SwiftUI

State Management

Property Wrapper Selection

Choose the simplest wrapper that fits:

Wrapper	Use Case
`@State`	View-local value types (toggles, form fields, sheet presentation)
`@Binding`	Two-way reference to parent's `@State`
`@Observable` class + `@State`	Owned model with multiple properties
`@Observable` class (no wrapper)	Read-only reference passed from parent
`@Bindable`	Two-way binding to an `@Observable` property
`@Environment`	Shared dependencies injected via `.environment()`

@Observable ViewModel

Use @Observable (not ObservableObject) — it tracks property-level changes so SwiftUI only re-renders views that read the changed property:

@Observable
final class ItemListViewModel {
    private(set) var items: [Item] = []
    private(set) var isLoading = false
    var searchText = ""
 
    private let repository: any ItemRepository
 
    init(repository: any ItemRepository = DefaultItemRepository()) {
        self.repository = repository
    }
 
    func load() async {
        isLoading = true
        defer { isLoading = false }
        items = (try? await repository.fetchAll()) ?? []
    }
}

View Consuming the ViewModel

struct ItemListView: View {
    @State private var viewModel: ItemListViewModel
 
    init(viewModel: ItemListViewModel = ItemListViewModel()) {
        _viewModel = State(initialValue: viewModel)
    }
 
    var body: some View {
        List(viewModel.items) { item in
            ItemRow(item: item)
        }
        .searchable(text: $viewModel.searchText)
        .overlay { if viewModel.isLoading { ProgressView() } }
        .task { await viewModel.load() }
    }
}

Environment Injection

Replace @EnvironmentObject with @Environment:

// Inject
ContentView()
    .environment(authManager)
 
// Consume
struct ProfileView: View {
    @Environment(AuthManager.self) private var auth
 
    var body: some View {
        Text(auth.currentUser?.name ?? "Guest")
    }
}

View Composition

Extract Subviews to Limit Invalidation

Break views into small, focused structs. When state changes, only the subview reading that state re-renders:

struct OrderView: View {
    @State private var viewModel = OrderViewModel()
 
    var body: some View {
        VStack {
            OrderHeader(title: viewModel.title)
            OrderItemList(items: viewModel.items)
            OrderTotal(total: viewModel.total)
        }
    }
}

ViewModifier for Reusable Styling

struct CardModifier: ViewModifier {
    func body(content: Content) -> some View {
        content
            .padding()
            .background(.regularMaterial)
            .clipShape(RoundedRectangle(cornerRadius: 12))
    }
}
 
extension View {
    func cardStyle() -> some View {
        modifier(CardModifier())
    }
}

Type-Safe NavigationStack

Use NavigationStack with NavigationPath for programmatic, type-safe routing:

@Observable
final class Router {
    var path = NavigationPath()
 
    func navigate(to destination: Destination) {
        path.append(destination)
    }
 
    func popToRoot() {
        path = NavigationPath()
    }
}
 
enum Destination: Hashable {
    case detail(Item.ID)
    case settings
    case profile(User.ID)
}
 
struct RootView: View {
    @State private var router = Router()
 
    var body: some View {
        NavigationStack(path: $router.path) {
            HomeView()
                .navigationDestination(for: Destination.self) { dest in
                    switch dest {
                    case .detail(let id): ItemDetailView(itemID: id)
                    case .settings: SettingsView()
                    case .profile(let id): ProfileView(userID: id)
                    }
                }
        }
        .environment(router)
    }
}

Performance

Use Lazy Containers for Large Collections

LazyVStack and LazyHStack create views only when visible:

ScrollView {
    LazyVStack(spacing: 8) {
        ForEach(items) { item in
            ItemRow(item: item)
        }
    }
}

Stable Identifiers

Always use stable, unique IDs in ForEach — avoid using array indices:

// Use Identifiable conformance or explicit id
ForEach(items, id: \.stableID) { item in
    ItemRow(item: item)
}

Avoid Expensive Work in body

Never perform I/O, network calls, or heavy computation inside body
Use .task {} for async work — it cancels automatically when the view disappears
Use .sensoryFeedback() and .geometryGroup() sparingly in scroll views
Minimize .shadow(), .blur(), and .mask() in lists — they trigger offscreen rendering

Equatable Conformance

For views with expensive bodies, conform to Equatable to skip unnecessary re-renders:

struct ExpensiveChartView: View, Equatable {
    let dataPoints: [DataPoint] // DataPoint must conform to Equatable
 
    static func == (lhs: Self, rhs: Self) -> Bool {
        lhs.dataPoints == rhs.dataPoints
    }
 
    var body: some View {
        // Complex chart rendering
    }
}

Previews

Use #Preview macro with inline mock data for fast iteration:

#Preview("Empty state") {
    ItemListView(viewModel: ItemListViewModel(repository: EmptyMockRepository()))
}
 
#Preview("Loaded") {
    ItemListView(viewModel: ItemListViewModel(repository: PopulatedMockRepository()))
}

Anti-Patterns to Avoid

Using ObservableObject / @Published / @StateObject / @EnvironmentObject in new code — migrate to @Observable
Putting async work directly in body or init — use .task {} or explicit load methods
Creating view models as @State inside child views that don't own the data — pass from parent instead
Using AnyView type erasure — prefer @ViewBuilder or Group for conditional views
Ignoring Sendable requirements when passing data to/from actors

References

See skill: swift-actor-persistence for actor-based persistence patterns. See skill: swift-protocol-di-testing for protocol-based DI and testing with Swift Testing.