SKILL.md
SwiftUI Development
This skill covers best practices for building clear, performant, and maintainable SwiftUI applications, including architecture, state management, Swift 6 concurrency, layout, animation, and testing.
Key Principles
- Write correct, up-to-date, bug-free, fully functional, secure, and performant code
- Favor readability, but not at the expense of correctness or safety
- Fully implement all requested functionality — leave no TODOs, placeholders, or missing pieces
- Target Swift 6.0+ with strict concurrency checking enabled; treat concurrency warnings as errors
- Target iOS 17+ where possible to use modern APIs (
@Observable, NavigationStack, #Preview); note the minimum deployment target when it forces older patterns
Architecture
- Use MVVM (Model-View-ViewModel) or Clean Architecture; introduce a Coordinator layer for complex, multi-screen navigation flows
- Apply SOLID principles to views and view models:
- Single Responsibility — each view or view model has one reason to change - Open/Closed — extend behavior via composition and protocols rather than modifying existing types - Liskov Substitution — protocol conformances must be substitutable without surprising callers - Interface Segregation — keep protocols small and focused rather than one large "do everything" interface - Dependency Inversion — depend on protocol abstractions, not concrete types, and inject dependencies via init
- Implement protocol-oriented programming; prefer structs over classes for data models
- Use extensions for code organization and separation of concerns
SwiftUI View Structure
- Keep views small and focused on a single responsibility
- Treat 50 lines as a practical ceiling for a
body property — past that, extract subviews into small, reusable structs or private extension functions
- Use
@ViewBuilder for custom container views and complex conditional view logic
- Implement proper view composition patterns
State Management
@State — local, value-type view state (Bool, Int, String, small structs)
@Binding — two-way data binding with child views
@StateObject — use only in the view that creates/owns the object's lifecycle
@ObservedObject — use in child views that react to changes but don't own the object
@EnvironmentObject / @Environment — use sparingly for broadly shared dependencies or system values; prefer explicit dependency injection via init when a dependency belongs to a specific view hierarchy rather than the whole app
@Published — for observable properties on ObservableObject classes (pre-iOS 17 or when ObservableObject is otherwise required)
@Observable macro (iOS 17+) — prefer this over ObservableObject/@Published for new view models; it removes the need for @Published on every property and only triggers view updates for properties actually read by that view, which reduces unnecessary redraws
Naming Conventions
- camelCase for variables, functions, and methods; PascalCase for types (classes, structs, enums, protocols)
- Use descriptive, verbose names —
fetchUserData over getData
- Prefix boolean variables with
is, has, should, etc.
- Use verb phrases for function names
SwiftUI Best Practices
- Use SF Symbols for system icons; use semantic colors from the asset catalog for automatic dark mode support
- Support Dynamic Type and implement proper keyboard avoidance
- Use
NavigationStack (iOS 16+) over the deprecated NavigationView
- Prefer type-inferred shorthand dot syntax where available (e.g.,
.background(.blue))
- Add
.contentShape(Rectangle()) to HStack/VStack rows that have transparent backgrounds, so taps register across the whole row rather than only on opaque content
Layout and Styling
- Use native SwiftUI layout containers (VStack, HStack, ZStack, Grid); use
LazyVStack/LazyHStack for dynamic or long lists
- Use
GeometryReader sparingly — it expands to fill all available space and can hurt layout performance; prefer .background(GeometryReader { ... }) scoped to a single view, or the Layout protocol for custom layouts
- Give list items stable, meaningful
ids (from Identifiable) rather than \.self
- Implement adaptive layouts for different screen sizes
- Use
ViewModifiers for reusable styling; create custom ButtonStyle, TextFieldStyle, etc.
Animations and Transitions
- Prefer
.animation(_:value:) scoped to a specific state value over broad withAnimation calls, especially inside body
- Reserve
withAnimation for animations explicitly triggered by user interaction
- Implement custom transitions using
AnyTransition; use matchedGeometryEffect for hero animations
- Use
TimelineView for high-frequency, time-driven visual updates instead of a Timer + published property
Swift 6 Concurrency & Data Flow
- Annotate view models with
@MainActor; all UI updates must happen on the main actor
- Prefer
.task(id:) over .onAppear for starting async work — it automatically cancels the task when the view disappears or the id changes, avoiding orphaned work
- Use
async/await for asynchronous operations and Result (or typed throws) for error handling
- Prefer
actor types for shared mutable state or services accessed from multiple tasks
- Mark pure logic functions
nonisolated when they don't touch the main actor, to avoid unnecessary hops
- Never block the main thread — move heavy computation to a detached
Task
- Handle loading, error, and success states explicitly rather than leaving implicit/undefined states
Memory Management & Safety
- Default to
[weak self] in closures that outlive the current scope; use guard let self else { return } at the start of async closures
- Only use
[unowned self] when the closure's lifetime is provably shorter than self's
- Handle optionals safely — no force unwrapping; use
guard for early returns
- For remote images, use
AsyncImage (with a caching layer, or a library like Nuke/Kingfisher for production apps) and apply .resizable() immediately
Performance Optimization
- Minimize view body recalculations; adopt
Equatable conformance where it helps SwiftUI skip redundant diffing
- Implement proper list diffing with
Identifiable items and stable ids
- Profile with Instruments before optimizing; cache expensive computations rather than recomputing them in
body
Accessibility
- Add accessibility labels, hints, and traits appropriately; support VoiceOver
- Assign distinct
accessibilityIdentifier strings to interactive elements so UI tests can target them reliably
- Test with accessibility features (Dynamic Type, VoiceOver, Reduce Motion) enabled
Testing and Previews
- Always provide a preview using
#Preview (Xcode 15+) or PreviewProvider on older toolchains, injecting realistic mock data
- Preview in multiple color schemes and device sizes
- Structure unit tests with Given-When-Then; generate protocol-based mocks for external dependencies so view models can be tested without hitting real services
Code Quality
- Write self-documenting code; add comments only for non-obvious logic
- Follow the Swift API Design Guidelines
- Use
MARK: - Section Name to organize longer files, and place private helpers in a private extension
Common Patterns
View with @Observable ViewModel (iOS 17+)
@Observable
@MainActor
final class ContentViewModel {
var items: [Item] = []
var isLoading = false
func loadItems() async {
isLoading = true
defer { isLoading = false }
// Load items
}
}
struct ContentView: View {
@State private var viewModel = ContentViewModel()
var body: some View {
List(viewModel.items) { item in
Text(item.name)
}
.task(id: viewModel.items.count) {
await viewModel.loadItems()
}
}
}
View with ObservableObject ViewModel (pre-iOS 17 / legacy)
struct ContentView: View {
@StateObject private var viewModel = ContentViewModel()
var body: some View {
// View implementation
}
}
@MainActor
class ContentViewModel: ObservableObject {
@Published var items: [Item] = []
@Published var isLoading = false
func loadItems() async {
isLoading = true
// Load items
isLoading = false
}
}
Reusable View Modifier
struct CardModifier: ViewModifier {
func body(content: Content) -> some View {
content
.padding()
.background(Color(.systemBackground))
.cornerRadius(12)
.shadow(radius: 4)
}
}
extension View {
func cardStyle() -> some View {
modifier(CardModifier())
}
}
</content>