ios

Name: ios
Author: ehmo

462stars26forks

How to install ios?

ehmo/platform-design-skills/ios

$npx -y skills add ehmo/platform-design-skills --skill ios

Installs into the current project.

Summary

Apple Human Interface Guidelines for iPhone. Use when building, reviewing, or refactoring SwiftUI/UIKit interfaces for iOS. Triggers on tasks involving iPhone UI, iOS components, accessibility, Dynamic Type, Dark Mode, or HIG compliance.

Files · 1

View on GitHub

SKILL.md

1	# iOS Design Guidelines for iPhone
2
3	Comprehensive rules derived from Apple's Human Interface Guidelines. Apply these when building, reviewing, or refactoring any iPhone app interface.
4
5	---
6
7	## 1. Layout & Safe Areas
8	Impact: CRITICAL
9
10	### Rule 1.1: Minimum 44pt Touch Targets
11	All interactive elements must have a minimum tap target of 44x44 points. This includes buttons, links, toggles, and custom controls.
12
13	Correct:
14	```swift
15	Button("Save") { save() }
16	.frame(minWidth: 44, minHeight: 44)
17	```
18
19	Incorrect:
20	```swift
21	// 20pt icon with no padding — too small to tap reliably
22	Button(action: save) {
23	Image(systemName: "checkmark")
24	.font(.system(size: 20))
25	}
26	// Missing .frame(minWidth: 44, minHeight: 44)
27	```
28
29	### Rule 1.2: Respect Safe Areas
30	Never place interactive or essential content under the status bar, Dynamic Island, or home indicator. Use SwiftUI's automatic safe area handling or UIKit's `safeAreaLayoutGuide`.
31
32	Correct:
33	```swift
34	struct ContentView: View {
35	var body: some View {
36	VStack {
37	Text("Content")
38	}
39	// SwiftUI respects safe areas by default
40	}
41	}
42	```
43
44	Incorrect:
45	```swift
46	struct ContentView: View {
47	var body: some View {
48	VStack {
49	Text("Content")
50	}
51	.ignoresSafeArea() // Content will be clipped under notch/Dynamic Island
52	}
53	}
54	```
55
56	Use `.ignoresSafeArea()` only for background fills, images, or decorative elements — never for text or interactive controls.
57
58	### Rule 1.3: Primary Actions in the Thumb Zone
59	Place primary actions at the bottom of the screen where the user's thumb naturally rests. Secondary actions and navigation belong at the top.
60
61	Correct:
62	```swift
63	VStack {
64	ScrollView { /* content */ }
65	Button("Continue") { next() }
66	.buttonStyle(.borderedProminent)
67	.padding()
68	}
69	```
70
71	Incorrect:
72	```swift
73	VStack {
74	Button("Continue") { next() } // Top of screen — hard to reach one-handed
75	.buttonStyle(.borderedProminent)
76	.padding()
77	ScrollView { /* content */ }
78	}
79	```
80
81	### Rule 1.4: Support All iPhone Screen Sizes
82	Design for iPhone SE (375pt wide) through iPhone Pro Max (430pt wide). Use flexible layouts, avoid hardcoded widths.
83
84	Correct:
85	```swift
86	HStack(spacing: 12) {
87	ForEach(items) { item in
88	CardView(item: item)
89	.frame(maxWidth: .infinity) // Adapts to screen width
90	}
91	}
92	```
93
94	Incorrect:
95	```swift
96	HStack(spacing: 12) {
97	ForEach(items) { item in
98	CardView(item: item)
99	.frame(width: 180) // Breaks on SE, wastes space on Pro Max
100	}
101	}
102	```
103
104	### Rule 1.5: 8pt Grid Alignment
105	Align spacing, padding, and element sizes to multiples of 8 points (8, 16, 24, 32, 40, 48). Use 4pt for fine adjustments.
106
107	### Rule 1.6: Landscape Support
108	Support landscape orientation unless the app is task-specific (e.g., camera). Use `ViewThatFits` or `GeometryReader` for adaptive layouts.
109
110	---
111
112	## 2. Navigation
113	Impact: CRITICAL
114
115	### Rule 2.1: Tab Bar for Top-Level Sections
116	Use a tab bar at the bottom of the screen for 3 to 5 top-level sections. Each tab should represent a distinct category of content or functionality.
117
118	Correct:
119	```swift
120	TabView {
121	HomeView()
122	.tabItem {
123	Label("Home", systemImage: "house")
124	}
125	SearchView()
126	.tabItem {
127	Label("Search", systemImage: "magnifyingglass")
128	}
129	ProfileView()
130	.tabItem {
131	Label("Profile", systemImage: "person")
132	}
133	}
134	```
135
136	Incorrect:
137	```swift
138	// Hamburger menu hidden behind three lines — discoverability is near zero
139	NavigationView {
140	Button(action: { showMenu.toggle() }) {
141	Image(systemName: "line.horizontal.3")
142	}
143	}
144	```
145
146	### Rule 2.2: Never Use Hamburger Menus
147	Hamburger (drawer) menus hide navigation, reduce discoverability, and violate iOS conventions. Use a tab bar instead. If you have more than 5 sections, consolidate or use a "More" tab.
148
149	### Rule 2.3: Large Titles in Primary Views
150	Use `.navigationBarTitleDisplayMode(.large)` for top-level views. Titles transition to inline (`.inline`) when the user scrolls.
151
152	Correct:
153	```swift
154	NavigationStack {
155	List(items) { item in
156	ItemRow(item: item)
157	}
158	.navigationTitle("Messages")
159	.navigationBarTitleDisplayMode(.large)
160	}
161	```
162
163	### Rule 2.4: Never Override Back Swipe
164	The swipe-from-left-edge gesture for back navigation is a system-level expectation. Never attach custom gesture recognizers that interfere with it.
165
166	Incorrect:
167	```swift
168	.gesture(
169	DragGesture()
170	.onChanged { /* custom drawer */ } // Conflicts with system back swipe
171	)
172	```
173
174	### Rule 2.5:

People who liked this also viewed

6 picks

Type

ios

462stars26forks

View on GitHub

How to install ios?

ehmo/platform-design-skills/ios

$npx -y skills add ehmo/platform-design-skills --skill ios

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# iOS Design Guidelines for iPhone
2
3	Comprehensive rules derived from Apple's Human Interface Guidelines. Apply these when building, reviewing, or refactoring any iPhone app interface.
4
5	---
6
7	## 1. Layout & Safe Areas
8	Impact: CRITICAL
9
10	### Rule 1.1: Minimum 44pt Touch Targets
11	All interactive elements must have a minimum tap target of 44x44 points. This includes buttons, links, toggles, and custom controls.
12
13	Correct:
14	```swift
15	Button("Save") { save() }
16	.frame(minWidth: 44, minHeight: 44)
17	```
18
19	Incorrect:
20	```swift
21	// 20pt icon with no padding — too small to tap reliably
22	Button(action: save) {
23	Image(systemName: "checkmark")
24	.font(.system(size: 20))
25	}
26	// Missing .frame(minWidth: 44, minHeight: 44)
27	```
28
29	### Rule 1.2: Respect Safe Areas
30	Never place interactive or essential content under the status bar, Dynamic Island, or home indicator. Use SwiftUI's automatic safe area handling or UIKit's `safeAreaLayoutGuide`.
31
32	Correct:
33	```swift
34	struct ContentView: View {
35	var body: some View {
36	VStack {
37	Text("Content")
38	}
39	// SwiftUI respects safe areas by default
40	}
41	}
42	```
43
44	Incorrect:
45	```swift
46	struct ContentView: View {
47	var body: some View {
48	VStack {
49	Text("Content")
50	}
51	.ignoresSafeArea() // Content will be clipped under notch/Dynamic Island
52	}
53	}
54	```
55
56	Use `.ignoresSafeArea()` only for background fills, images, or decorative elements — never for text or interactive controls.
57
58	### Rule 1.3: Primary Actions in the Thumb Zone
59	Place primary actions at the bottom of the screen where the user's thumb naturally rests. Secondary actions and navigation belong at the top.
60
61	Correct:
62	```swift
63	VStack {
64	ScrollView { /* content */ }
65	Button("Continue") { next() }
66	.buttonStyle(.borderedProminent)
67	.padding()
68	}
69	```
70
71	Incorrect:
72	```swift
73	VStack {
74	Button("Continue") { next() } // Top of screen — hard to reach one-handed
75	.buttonStyle(.borderedProminent)
76	.padding()
77	ScrollView { /* content */ }
78	}
79	```
80
81	### Rule 1.4: Support All iPhone Screen Sizes
82	Design for iPhone SE (375pt wide) through iPhone Pro Max (430pt wide). Use flexible layouts, avoid hardcoded widths.
83
84	Correct:
85	```swift
86	HStack(spacing: 12) {
87	ForEach(items) { item in
88	CardView(item: item)
89	.frame(maxWidth: .infinity) // Adapts to screen width
90	}
91	}
92	```
93
94	Incorrect:
95	```swift
96	HStack(spacing: 12) {
97	ForEach(items) { item in
98	CardView(item: item)
99	.frame(width: 180) // Breaks on SE, wastes space on Pro Max
100	}
101	}
102	```
103
104	### Rule 1.5: 8pt Grid Alignment
105	Align spacing, padding, and element sizes to multiples of 8 points (8, 16, 24, 32, 40, 48). Use 4pt for fine adjustments.
106
107	### Rule 1.6: Landscape Support
108	Support landscape orientation unless the app is task-specific (e.g., camera). Use `ViewThatFits` or `GeometryReader` for adaptive layouts.
109
110	---
111
112	## 2. Navigation
113	Impact: CRITICAL
114
115	### Rule 2.1: Tab Bar for Top-Level Sections
116	Use a tab bar at the bottom of the screen for 3 to 5 top-level sections. Each tab should represent a distinct category of content or functionality.
117
118	Correct:
119	```swift
120	TabView {
121	HomeView()
122	.tabItem {
123	Label("Home", systemImage: "house")
124	}
125	SearchView()
126	.tabItem {
127	Label("Search", systemImage: "magnifyingglass")
128	}
129	ProfileView()
130	.tabItem {
131	Label("Profile", systemImage: "person")
132	}
133	}
134	```
135
136	Incorrect:
137	```swift
138	// Hamburger menu hidden behind three lines — discoverability is near zero
139	NavigationView {
140	Button(action: { showMenu.toggle() }) {
141	Image(systemName: "line.horizontal.3")
142	}
143	}
144	```
145
146	### Rule 2.2: Never Use Hamburger Menus
147	Hamburger (drawer) menus hide navigation, reduce discoverability, and violate iOS conventions. Use a tab bar instead. If you have more than 5 sections, consolidate or use a "More" tab.
148
149	### Rule 2.3: Large Titles in Primary Views
150	Use `.navigationBarTitleDisplayMode(.large)` for top-level views. Titles transition to inline (`.inline`) when the user scrolls.
151
152	Correct:
153	```swift
154	NavigationStack {
155	List(items) { item in
156	ItemRow(item: item)
157	}
158	.navigationTitle("Messages")
159	.navigationBarTitleDisplayMode(.large)
160	}
161	```
162
163	### Rule 2.4: Never Override Back Swipe
164	The swipe-from-left-edge gesture for back navigation is a system-level expectation. Never attach custom gesture recognizers that interfere with it.
165
166	Incorrect:
167	```swift
168	.gesture(
169	DragGesture()
170	.onChanged { /* custom drawer */ } // Conflicts with system back swipe
171	)
172	```
173
174	### Rule 2.5:

People who liked this also viewed

6 picks

Type