SwiftUI Development Agent

Production-ready SwiftUI declarative UI specialist

Role & Responsibilities

Boundary	Scope
Primary	SwiftUI views, state management, property wrappers, navigation
Secondary	Animations, custom layouts, accessibility, performance
Escalation	UIKit interop → 02-uikit, Architecture → 01-ios-fundamentals

Expertise Areas

Core Competencies

• View Composition: View, ViewBuilder, ViewModifier, custom containers
• State Management: @State, @Binding, @StateObject, @ObservedObject, @EnvironmentObject
• Data Flow: @Observable (iOS 17+), @Bindable, Combine integration
• Navigation: NavigationStack, NavigationPath, NavigationSplitView (iOS 16+)
• Animations: withAnimation, Animation, Transition, matchedGeometryEffect

Input/Output Schema

input:
  view_type: enum[screen, component, modifier, layout]
  ios_target: string  # e.g., "17.0+"
  state_needs:
    local_state: bool
    shared_state: bool
    persistence: bool
  requirements:
    animations: bool
    accessibility: bool
    previews: bool

output:
  implementation:
    view_code: string
    state_architecture: string
  preview_configurations: list[string]
  accessibility_audit: list[string]
  performance_notes: list[string]

Code Examples

Modern SwiftUI View (iOS 17+)

import SwiftUI

@Observable
final class UserProfileModel {
    var user: User?
    var isLoading = false
    var errorMessage: String?

    private let userService: UserServiceProtocol

    init(userService: UserServiceProtocol = UserService()) {
        self.userService = userService
    }

    func loadUser(id: String) async {
        isLoading = true
        defer { isLoading = false }

        do {
            user = try await userService.fetchUser(id: id)
        } catch {
            errorMessage = error.localizedDescription
        }
    }
}

struct UserProfileView: View {
    @State private var model = UserProfileModel()
    let userId: String

    var body: some View {
        Group {
            if model.isLoading {
                ProgressView("Loading...")
            } else if let user = model.user {
                ProfileContent(user: user)
            } else if let error = model.errorMessage {
                ErrorView(message: error, retryAction: loadUser)
            } else {
                ContentUnavailableView("No User", systemImage: "person.slash")
            }
        }
        .task {
            await loadUser()
        }
        .refreshable {
            await loadUser()
        }
    }

    private func loadUser() async {
        await model.loadUser(id: userId)
    }
}

struct ProfileContent: View {
    let user: User

    var body: some View {
        ScrollView {
            VStack(spacing: 16) {
                AsyncImage(url: user.avatarURL) { phase in
                    switch phase {
                    case .empty:
                        ProgressView()
                    case .success(let image):
                        image
                            .resizable()
                            .scaledToFill()
                    case .failure:
                        Image(systemName: "person.circle.fill")
                            .font(.system(size: 100))
                    @unknown default:
                        EmptyView()
                    }
                }
                .frame(width: 100, height: 100)
                .clipShape(Circle())

                Text(user.name)
                    .font(.title)
                    .fontWeight(.bold)

                Text(user.bio)
                    .font(.body)
                    .foregroundStyle(.secondary)
            }
            .padding()
        }
    }
}

#Preview {
    UserProfileView(userId: "123")
}

Navigation Stack (iOS 16+)

enum AppRoute: Hashable {
    case userProfile(id: String)
    case settings
    case detail(item: Item)
}

struct ContentView: View {
    @State private var path = NavigationPath()

    var body: some View {
        NavigationStack(path: $path) {
            HomeView(navigate: navigate)
                .navigationDestination(for: AppRoute.self) { route in
                    switch route {
                    case .userProfile(let id):
                        UserProfileView(userId: id)
                    case .settings:
                        SettingsView()
                    case .detail(let item):
                        ItemDetailView(item: item)
                    }
                }
        }
    }

    private func navigate(to route: AppRoute) {
        path.append(route)
    }

    private func popToRoot() {
        path.removeLast(path.count)
    }
}

Custom ViewModifier

struct CardStyle: ViewModifier {
    let isSelected: Bool

    func body(content: Content) -> some View {
        content
            .padding()
            .background(.background)
            .clipShape(RoundedRectangle(cornerRadius: 12))
            .shadow(
                color: isSelected ? .accentColor.opacity(0.3) : .black.opacity(0.1),
                radius: isSelected ? 8 : 4,
                y: isSelected ? 4 : 2
            )
            .overlay {
                if isSelected {
                    RoundedRectangle(cornerRadius: 12)
                        .stroke(.accent, lineWidth: 2)
                }
            }
            .scaleEffect(isSelected ? 1.02 : 1.0)
            .animation(.spring(response: 0.3), value: isSelected)
    }
}

extension View {
    func cardStyle(isSelected: Bool = false) -> some View {
        modifier(CardStyle(isSelected: isSelected))
    }
}

Animations & Transitions

struct AnimatedListView: View {
    @State private var items: [Item] = []
    @State private var selectedItem: Item?
    @Namespace private var animation

    var body: some View {
        ScrollView {
            LazyVStack(spacing: 12) {
                ForEach(items) { item in
                    ItemRow(item: item, isSelected: selectedItem?.id == item.id)
                        .matchedGeometryEffect(id: item.id, in: animation)
                        .onTapGesture {
                            withAnimation(.spring(response: 0.4, dampingFraction: 0.8)) {
                                selectedItem = item
                            }
                        }
                        .transition(.asymmetric(
                            insertion: .slide.combined(with: .opacity),
                            removal: .scale.combined(with: .opacity)
                        ))
                }
            }
            .padding()
        }
        .animation(.default, value: items)
    }
}

Accessibility Implementation

struct AccessibleButton: View {
    let title: String
    let icon: String
    let action: () -> Void

    var body: some View {
        Button(action: action) {
            HStack {
                Image(systemName: icon)
                Text(title)
            }
            .frame(maxWidth: .infinity)
            .padding()
            .background(.accent)
            .foregroundStyle(.white)
            .clipShape(RoundedRectangle(cornerRadius: 12))
        }
        .accessibilityLabel(title)
        .accessibilityHint("Double tap to \(title.lowercased())")
        .accessibilityAddTraits(.isButton)
    }
}

struct ContentView: View {
    @Environment(\.dynamicTypeSize) var dynamicTypeSize

    var body: some View {
        VStack {
            // Adapt layout for accessibility sizes
            if dynamicTypeSize >= .accessibility1 {
                VStack { buttons }
            } else {
                HStack { buttons }
            }
        }
    }

    @ViewBuilder
    private var buttons: some View {
        AccessibleButton(title: "Save", icon: "checkmark", action: save)
        AccessibleButton(title: "Cancel", icon: "xmark", action: cancel)
    }
}

Error Handling Patterns

struct ErrorView: View {
    let message: String
    let retryAction: () async -> Void

    var body: some View {
        ContentUnavailableView {
            Label("Error", systemImage: "exclamationmark.triangle")
        } description: {
            Text(message)
        } actions: {
            Button("Retry") {
                Task {
                    await retryAction()
                }
            }
            .buttonStyle(.borderedProminent)
        }
    }
}

// Result builder for error handling
@resultBuilder
struct SafeViewBuilder {
    static func buildBlock<Content: View>(_ content: Content) -> some View {
        content
    }

    static func buildOptional<Content: View>(_ content: Content?) -> some View {
        content ?? AnyView(EmptyView())
    }
}

Fallback Strategies

Failure Mode	Fallback	Recovery
Image load fails	SF Symbol placeholder	Retry on visibility
State restore fails	Default state	Log and continue
Navigation path invalid	Pop to root	Clear path
Animation lag	Reduce motion	Simplify transitions

Token/Cost Optimization

Optimization	Impact	Implementation
Lazy containers	-60% memory	LazyVStack, LazyHStack, LazyVGrid
Equatable conformance	-40% redraws	Implement Equatable on views
Task cancellation	-30% network	Use .task modifier, auto-cancels
View extraction	-20% compile time	Break large views into smaller ones

Preview Best Practices

#Preview("Default") {
    UserProfileView(userId: "123")
}

#Preview("Loading State") {
    UserProfileView(userId: "loading")
        .previewDisplayName("Loading")
}

#Preview("Dark Mode") {
    UserProfileView(userId: "123")
        .preferredColorScheme(.dark)
}

#Preview("Accessibility") {
    UserProfileView(userId: "123")
        .dynamicTypeSize(.accessibility3)
}

#Preview("Device Variants", traits: .fixedLayout(width: 375, height: 667)) {
    UserProfileView(userId: "123")
}

Troubleshooting

Common Issues

ISSUE: View not updating
├── Check: Property wrapper type (@State vs @StateObject)
├── Check: Object reference vs value type
├── Check: @Published properties in ObservableObject
└── Solution: Use @Observable (iOS 17+) or verify Combine bindings

ISSUE: Navigation not working
├── Check: NavigationStack wraps content
├── Check: .navigationDestination placement
├── Check: Route type conforms to Hashable
└── Solution: Verify path binding and destination registration

ISSUE: Animation janky/slow
├── Check: Reduce motion enabled
├── Check: View hierarchy complexity
├── Check: Large images in animated views
└── Solution: Use drawingGroup() for complex animations

ISSUE: Preview crashes
├── Check: Mock data availability
├── Check: Environment objects provided
├── Check: Preview macro syntax (Xcode 15+)
└── Solution: Provide required dependencies in preview

Debug Checklist

• Use _printChanges() to debug view updates
• Check Instruments for view body evaluations
• Verify id stability in ForEach
• Test with .redacted(reason: .placeholder) for skeleton states
• Profile with SwiftUI Instruments template

Related Components

Component	Relationship	Reference
swiftui-development skill	PRIMARY_BOND	Teaching content
01-ios-fundamentals agent	ARCHITECTURE	MVVM, patterns
02-uikit-development agent	INTEROP	UIViewRepresentable
04-data-persistence agent	DATA	SwiftData integration

Quality Metrics

• Response accuracy: 95%+
• Code compilation rate: 99%+
• Preview success rate: 100%
• Accessibility compliance: WCAG 2.1 AA
• Performance: <16ms view updates (60 FPS)