iOS Design Skill

Expert knowledge of Apple Human Interface Guidelines for SwiftUI applications. This skill enforces design excellence, accessibility compliance, and iOS-native feel.

Core Principles

1. iOS Native Feel

• Use system colors and semantic tokens
• Follow Dynamic Type for text scaling
• Respect Safe Areas and notches
• Support both light and dark mode

2. Accessibility First

• Minimum 44x44pt touch targets
• 4.5:1 contrast ratio for normal text
• Proper accessibilityLabel on all interactive elements
• Support Dynamic Type up to AX5 (largest accessibility sizes)

3. SwiftUI Best Practices

• Use correct property wrappers (@State, @StateObject, @ObservedObject)
• Prefer declarative patterns
• Avoid AnyView type erasure
• Provide stable IDs in ForEach

Typography Scale (11 Styles)

Usage Pattern

// GOOD - System text styles
Text("Welcome")
    .font(.largeTitle)

// BAD - Hardcoded sizes
Text("Welcome")
    .font(.system(size: 34))

Dynamic Type Support

// Automatic scaling with system styles
Text("Body text")
    .font(.body)

// Custom sizes that scale
@ScaledMetric(relativeTo: .body) var iconSize: CGFloat = 24

Image(systemName: "star.fill")
    .frame(width: iconSize, height: iconSize)

Color System

Semantic Colors

System Colors

Usage Pattern

// GOOD - Semantic colors
Text("Primary content")
    .foregroundColor(.label)

VStack {
    // content
}
.background(Color(.systemBackground))

// BAD - Hardcoded colors
Text("Primary content")
    .foregroundColor(.black)

VStack {
    // content
}
.background(Color.white)

Touch Targets

Requirements

• Minimum: 44x44pt (Apple HIG requirement)
• Bottom navigation: 46-50pt recommended
• Spacing: 8pt minimum between targets

Implementation

// GOOD - System button provides proper touch target
Button(action: { /* action */ }) {
    Image(systemName: "xmark")
}

// GOOD - Custom with proper frame
Image(systemName: "xmark")
    .frame(width: 44, height: 44)
    .contentShape(Rectangle())
    .onTapGesture { /* action */ }

// BAD - Too small
Image(systemName: "xmark")
    .font(.system(size: 16))
    .onTapGesture { /* action */ }

Safe Areas

Respecting Safe Areas

// GOOD - Content respects safe areas
ScrollView {
    content
}
.safeAreaInset(edge: .bottom) {
    bottomBar
}

// Full-bleed backgrounds that extend into safe areas
ZStack {
    Color.blue.ignoresSafeArea()

    VStack {
        content // Content still respects safe areas
    }
}

Device-Specific Considerations

Spacing Scale

Base unit: 4pt

Standard Margins

DO / DON'T

Property Wrappers

DO: Use @StateObject for owned objects

struct ContentView: View {
    @StateObject private var viewModel = ContentViewModel()

    var body: some View {
        Text(viewModel.text)
    }
}

DON'T: Use @ObservedObject for owned objects

struct ContentView: View {
    @ObservedObject var viewModel = ContentViewModel() // Re-created on every view update!

    var body: some View {
        Text(viewModel.text)
    }
}

List Performance

DO: Use LazyVStack/List for long content

ScrollView {
    LazyVStack {
        ForEach(items, id: \.id) { item in
            ItemRow(item: item)
        }
    }
}

DON'T: Use VStack for many items

ScrollView {
    VStack { // All items created at once
        ForEach(items, id: \.id) { item in
            ItemRow(item: item)
        }
    }
}

View Identity

DO: Provide stable IDs in ForEach

ForEach(items, id: \.id) { item in
    ItemRow(item: item)
}

DON'T: Use indices or miss id parameter

ForEach(items.indices, id: \.self) { index in // Breaks on reorder
    ItemRow(item: items[index])
}

Type Erasure

DO: Use @ViewBuilder or concrete types

@ViewBuilder
var content: some View {
    if condition {
        Text("A")
    } else {
        Image(systemName: "star")
    }
}

DON'T: Use AnyView excessively

var content: AnyView { // Kills performance
    if condition {
        return AnyView(Text("A"))
    } else {
        return AnyView(Image(systemName: "star"))
    }
}

Modifier Order

DO: Background before padding, frame before overlay

Text("Hello")
    .padding()
    .background(Color.blue) // Includes padding in background

Text("World")
    .frame(maxWidth: .infinity)
    .overlay(alignment: .trailing) { // Overlay spans full width
        Button("Edit") { }
    }

DON'T: Wrong order causes unexpected results

Text("Hello")
    .background(Color.blue) // Only behind text
    .padding() // Padding outside background

Text("World")
    .overlay(alignment: .trailing) { // Overlay only covers text width
        Button("Edit") { }
    }
    .frame(maxWidth: .infinity)

Severity Levels

When auditing, classify issues as:

Expert References

SwiftUI Architecture & Patterns

• WWDC 2021: Demystify SwiftUI - View identity, lifetime, dependencies
• Property Wrapper Decision Tree - @State, @StateObject, @Observable, @Binding rules + scanner patterns
• IceCubesApp Production Patterns - Real-world patterns from largest open-source SwiftUI app

Modern iOS 18 Features

• iOS 18 Materials & Glass Effects - Material API, glass morphism, liquid glass design

Anti-Patterns & Scanning

• Anti-Patterns Database - 23 patterns with regex scanners for automated audits