1---
2name: mobile-ios-design
3description: Master iOS Human Interface Guidelines and SwiftUI patterns for building native iOS apps. Use when designing iOS interfaces, implementing SwiftUI views, or ensuring apps follow Apple's design principles.
4---
5 
6# iOS Mobile Design
7 
8Master iOS Human Interface Guidelines (HIG) and SwiftUI patterns to build polished, native iOS applications that feel at home on Apple platforms.
9 
10## When to Use This Skill
11 
12- Designing iOS app interfaces following Apple HIG
13- Building SwiftUI views and layouts
14- Implementing iOS navigation patterns (NavigationStack, TabView, sheets)
15- Creating adaptive layouts for iPhone and iPad
16- Using SF Symbols and system typography
17- Building accessible iOS interfaces
18- Implementing iOS-specific gestures and interactions
19- Designing for Dynamic Type and Dark Mode
20 
21## Core Concepts
22 
23### 1. Human Interface Guidelines Principles
24 
25**Clarity**: Content is legible, icons are precise, adornments are subtle
26**Deference**: UI helps users understand content without competing with it
27**Depth**: Visual layers and motion convey hierarchy and enable navigation
28 
29**Platform Considerations:**
30 
31- **iOS**: Touch-first, compact displays, portrait orientation
32- **iPadOS**: Larger canvas, multitasking, pointer support
33- **visionOS**: Spatial computing, eye/hand input
34 
35### 2. SwiftUI Layout System
36 
37**Stack-Based Layouts:**
38 
39```swift
40// Vertical stack with alignment
41VStack(alignment: .leading, spacing: 12) {
42    Text("Title")
43        .font(.headline)
44    Text("Subtitle")
45        .font(.subheadline)
46        .foregroundStyle(.secondary)
47}
48 
49// Horizontal stack with flexible spacing
50HStack {
51    Image(systemName: "star.fill")
52    Text("Featured")
53    Spacer()
54    Text("View All")
55        .foregroundStyle(.blue)
56}
57```
58 
59**Grid Layouts:**
60 
61```swift
62// Adaptive grid that fills available width
63LazyVGrid(columns: [
64    GridItem(.adaptive(minimum: 150, maximum: 200))
65], spacing: 16) {
66    ForEach(items) { item in
67        ItemCard(item: item)
68    }
69}
70 
71// Fixed column grid
72LazyVGrid(columns: [
73    GridItem(.flexible()),
74    GridItem(.flexible()),
75    GridItem(.flexible())
76], spacing: 12) {
77    ForEach(items) { item in
78        ItemThumbnail(item: item)
79    }
80}
81```
82 
83### 3. Navigation Patterns
84 
85**NavigationStack (iOS 16+):**
86 
87```swift
88struct ContentView: View {
89    @State private var path = NavigationPath()
90 
91    var body: some View {
92        NavigationStack(path: $path) {
93            List(items) { item in
94                NavigationLink(value: item) {
95                    ItemRow(item: item)
96                }
97            }
98            .navigationTitle("Items")
99            .navigationDestination(for: Item.self) { item in
100                ItemDetailView(item: item)
101            }
102        }
103    }
104}
105```
106 
107**TabView (iOS 18+):**
108 
109```swift
110struct MainTabView: View {
111    @State private var selectedTab = 0
112 
113    var body: some View {
114        TabView(selection: $selectedTab) {
115            Tab("Home", systemImage: "house", value: 0) {
116                HomeView()
117            }
118 
119            Tab("Search", systemImage: "magnifyingglass", value: 1) {
120                SearchView()
121            }
122 
123            Tab("Profile", systemImage: "person", value: 2) {
124                ProfileView()
125            }
126        }
127    }
128}
129```
130 
131### 4. System Integration
132 
133**SF Symbols:**
134 
135```swift
136// Basic symbol
137Image(systemName: "heart.fill")
138    .foregroundStyle(.red)
139 
140// Symbol with rendering mode
141Image(systemName: "cloud.sun.fill")
142    .symbolRenderingMode(.multicolor)
143 
144// Variable symbol (iOS 16+)
145Image(systemName: "speaker.wave.3.fill", variableValue: volume)
146 
147// Symbol effect (iOS 17+)
148Image(systemName: "bell.fill")
149    .symbolEffect(.bounce, value: notificationCount)
150```
151 
152**Dynamic Type:**
153 
154```swift
155// Use semantic fonts
156Text("Headline")
157    .font(.headline)
158 
159Text("Body text that scales with user preferences")
160    .font(.body)
161 
162// Custom font that respects Dynamic Type
163Text("Custom")
164    .font(.custom("Avenir", size: 17, relativeTo: .body))
165```
166 
167### 5. Visual Design
168 
169**Colors and Materials:**
170 
171```swift
172// Semantic colors that adapt to light/dark mode
173Text("Primary")
174    .foregroundStyle(.primary)
175Text("Secondary")
176    .foregroundStyle(.secondary)
177 
178// System materials for blur effects
179Rectangle()
180    .fill(.ultraThinMaterial)
181    .frame(height: 100)
182 
183// Vibrant materials for overlays
184Text("Overlay")
185    .padding()
186    .background(.regularMaterial, in: RoundedRectangle(cornerRadius: 12))
187```
188 
189**Shadows and Depth:**
190 
191```swift
192// Standard card shadow
193RoundedRectangle(cornerRadius: 16)
194    .fill(.background)
195    .shadow(color: .black.opacity(0.1), radius: 8, y: 4)
196 
197// Elevated appearance
198.shadow(radius: 2, y: 1)
199.shadow(radius: 8, y: 4)
200```
201 
202## Quick Start Component
203 
204```swift
205import SwiftUI
206 
207struct FeatureCard: View {
208    let title: String
209    let description: String
210    let systemImage: String
211 
212    var body: some View {
213        HStack(spacing: 16) {
214            Image(systemName: systemImage)
215                .font(.title)
216                .foregroundStyle(.blue)
217                .frame(width: 44, height: 44)
218                .background(.blue.opacity(0.1), in: Circle())
219 
220            VStack(alignment: .leading, spacing: 4) {
221                Text(title)
222                    .font(.headline)
223                Text(description)
224                    .font(.subheadline)
225                    .foregroundStyle(.secondary)
226                    .lineLimit(2)
227            }
228 
229            Spacer()
230 
231            Image(systemName: "chevron.right")
232                .foregroundStyle(.tertiary)
233        }
234        .padding()
235        .background(.background, in: RoundedRectangle(cornerRadius: 12))
236        .shadow(color: .black.opacity(0.05), radius: 4, y: 2)
237    }
238}
239```
240 
241## Best Practices
242 
2431. **Use Semantic Colors**: Always use `.primary`, `.secondary`, `.background` for automatic light/dark mode support
2442. **Embrace SF Symbols**: Use system symbols for consistency and automatic accessibility
2453. **Support Dynamic Type**: Use semantic fonts (`.body`, `.headline`) instead of fixed sizes
2464. **Add Accessibility**: Include `.accessibilityLabel()` and `.accessibilityHint()` modifiers
2475. **Use Safe Areas**: Respect `safeAreaInset` and avoid hardcoded padding at screen edges
2486. **Implement State Restoration**: Use `@SceneStorage` for preserving user state
2497. **Support iPad Multitasking**: Design for split view and slide over
2508. **Test on Device**: Simulator doesn't capture full haptic and performance experience
251 
252## Common Issues
253 
254- **Layout Breaking**: Use `.fixedSize()` sparingly; prefer flexible layouts
255- **Performance Issues**: Use `LazyVStack`/`LazyHStack` for long scrolling lists
256- **Navigation Bugs**: Ensure `NavigationLink` values are `Hashable`
257- **Dark Mode Problems**: Avoid hardcoded colors; use semantic or asset catalog colors
258- **Accessibility Failures**: Test with VoiceOver enabled
259- **Memory Leaks**: Watch for strong reference cycles in closures
260