AgentAlley

Skills · Design & UI

iOS Mobile Design

Unverified●30/40

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.

Originally by wshobson · MIT

Claude Code◐PartialHas SKILL.md but declares no allowed-tools — Claude Code will ask for permission each time
Cursor◐PartialPlain prose you can paste in — but no Cursor rules file
Codex◐PartialPlain prose you can paste in — but no AGENTS.md
Gemini CLI◐PartialPlain prose you can paste in
Copilot◐PartialPlain prose you can paste in — but no Copilot instructions file
npx agentalley add mobile-ios-design

This command does not work yet — the CLI is still being built. Until then, use Raw in the reader below to take the file.

Who is stuck, and on what

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.

The whole source

No sign-in, no blur, nothing truncated
mobile-ios-design/SKILL.md260 lines6.8 KBRawView on GitHub
Frontmatter — 2 properties
namemobile-ios-design
descriptionMaster 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.
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---A5 — No allowed-tools declared — no way to tell what this skill may touch
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 

Reviews

Installed this one?Write the first review and take the Trailblazer badge.

Reviews only open after a real install, so this is empty — and we leave it empty rather than invent one.

Alternatives

Also in Design & UI
Brand Protection — Amazon 🛡️Amazon brand protection toolkit. Detect hijackers, counterfeits, and unauthorized sellers. Includes MAP violation monitoring, trademark abuse detection, complaint templates for Brand Registry, and test buy evidence collection guides. No API key required.Design & UI · MIT◐····●35/40Brand Protection — eBay 🛡️eBay brand protection toolkit. Detect unauthorized sellers, counterfeits, and VeRO violations. Includes price monitoring, trademark abuse detection, VeRO complaint templates, and enforcement guides. No API key required.Design & UI · MIT◐····●35/40Brand Protection — Shopify/DTC 🛡️Shopify/DTC brand protection toolkit. Detect counterfeit stores, unauthorized resellers, and trademark violations. Includes DMCA takedown templates, domain monitoring, and social media infringement detection. No API key required.Design & UI · MIT◐····●35/40Brand Protection — TikTok Shop 🛡️TikTok Shop brand protection toolkit. Detect unauthorized sellers, counterfeit products, and affiliate abuse. Includes TikTok IP Protection reporting, influencer misuse detection, and complaint templates. No API key required.Design & UI · MIT◐····●35/40