ReddRadar
Agent skill
swiftui-patterns
SwiftUI architecture patterns, state management with @Observable, view composition, navigation, performance optimization, and modern iOS/macOS UI best practices.
Install this agent skill to your Project
npx add-skill https://github.com/affaan-m/everything-claude-code/tree/main/skills/swiftui-patterns
SKILL.md
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())
}
}
Navigation
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/@EnvironmentObjectin new code — migrate to@Observable - Putting async work directly in
bodyorinit— use.task {}or explicit load methods - Creating view models as
@Stateinside child views that don't own the data — pass from parent instead - Using
AnyViewtype erasure — prefer@ViewBuilderorGroupfor conditional views - Ignoring
Sendablerequirements 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.
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
affaan-m/everything-claude-code
python-testing
Python testing best practices using pytest including fixtures, parametrization, mocking, coverage analysis, async testing, and test organization. Use when writing or improving Python tests.
affaan-m/everything-claude-code
golang-patterns
Go-specific design patterns and best practices including functional options, small interfaces, dependency injection, concurrency patterns, error handling, and package organization. Use when working with Go code to apply idiomatic Go patterns.
affaan-m/everything-claude-code
e2e-testing
Playwright E2E testing patterns, Page Object Model, configuration, CI/CD integration, artifact management, and flaky test strategies.
affaan-m/everything-claude-code
agentic-engineering
Operate as an agentic engineer using eval-first execution, decomposition, and cost-aware model routing. Use when AI agents perform most implementation work and humans enforce quality and risk controls.
affaan-m/everything-claude-code
api-design
REST API design patterns including resource naming, status codes, pagination, filtering, error responses, versioning, and rate limiting for production APIs.
affaan-m/everything-claude-code
python-patterns
Python-specific design patterns and best practices including protocols, dataclasses, context managers, decorators, async/await, type hints, and package organization. Use when working with Python code to apply Pythonic patterns.
Didn't find tool you were looking for?