watchos

Name: watchos
Author: ehmo

462stars26forks

How to install watchos?

ehmo/platform-design-skills/watchos

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

Installs into the current project.

Summary

Apple Human Interface Guidelines for Apple Watch. Use when building watchOS apps, complications, or workout features. Triggers on tasks involving Watch UI, Digital Crown, glanceable interfaces, or wrist-based interactions.

Files · 1

View on GitHub

SKILL.md

1	# watchOS Design Guidelines
2
3	Apple Watch is a personal, glanceable device worn on the wrist. Interactions are measured in seconds, not minutes. Every design decision must prioritize speed of comprehension and brevity of interaction.
4
5	---
6
7	## 1. Glanceable Design (CRITICAL)
8
9	The defining constraint of watchOS. If a user cannot extract the key information within 2 seconds of raising their wrist, the design has failed.
10
11	### Rules
12
13	- W-GL-01: Primary information must be visible without scrolling. The first screen is the only guaranteed screen.
14	- W-GL-02: Target interaction sessions of 5 seconds or less. Design for raise-glance-lower.
15	- W-GL-03: Use large, high-contrast text. Minimum effective body text is 16pt (system font). Titles should be 18pt or larger.
16	- W-GL-04: Limit text to essential content. Truncate or abbreviate aggressively. Use SF Symbols instead of text labels where meaning is unambiguous.
17	- W-GL-05: Respect wrist-down time. When the wrist lowers, the app enters an inactive state. Do not assume continuous user attention.
18	- W-GL-06: Prioritize a single piece of information per screen. If showing multiple data points, establish clear visual hierarchy with size, weight, and color.
19
20	### Screen Dimensions Reference
21
22	\| Device \| Screen Width \| Screen Height \| Corner Radius \|
23	\|--------\|-------------\|---------------\|---------------\|
24	\| 41mm (Series 9) \| 176px \| 215px \| 36px \|
25	\| 45mm (Series 9) \| 198px \| 242px \| 39px \|
26	\| 42mm (Series 10) \| 180px \| 220px \| 37px \|
27	\| 46mm (Series 10) \| 205px \| 251px \| 40px \|
28	\| 49mm (Ultra 2) \| 205px \| 251px \| 40px \|
29
30	### Anti-Patterns
31
32	- Walls of text requiring scroll to understand context
33	- Small, dense data tables
34	- Requiring multiple taps before showing useful information
35	- Replicating an iPhone screen layout on Watch
36
37	---
38
39	## 2. Digital Crown (HIGH)
40
41	The Digital Crown is the primary physical input for scrolling and precise value selection. It provides haptic feedback and should feel purposeful.
42
43	### Rules
44
45	- W-DC-01: Use the Digital Crown as the primary scroll mechanism for vertical content. Do not rely solely on swipe gestures for scrolling.
46	- W-DC-02: For value pickers (time, quantity, sliders), bind the Crown to precise adjustments with haptic detents at each discrete value.
47	- W-DC-03: Do not override or conflict with system Crown behaviors. The system uses the Crown for volume control during media playback, scrolling in system UI, and Time Travel in complications.
48	- W-DC-04: Provide visual feedback synchronized with Crown rotation. The UI must respond frame-by-frame to Crown input with no perceptible lag.
49	- W-DC-05: Update on each Crown increment. Values, selection, and highlight states should move with each detent. Do not debounce Crown input until the gesture ends.
50
51	Correct — Crown binding with haptic detents:
52	```swift
53	struct VolumePickerView: View {
54	@State private var volume: Double = 0.5
55
56	var body: some View {
57	VStack {
58	Text("\(Int(volume * 100))%")
59	.font(.title.bold())
60	Image(systemName: "speaker.wave.3")
61	}
62	.focusable()
63	.digitalCrownRotation(
64	$volume,
65	from: 0.0,
66	through: 1.0,
67	by: 0.05,
68	sensitivity: .medium,
69	isContinuous: false,
70	isHapticFeedbackEnabled: true
71	)
72	}
73	}
74	```
75
76	Incorrect — ignoring the Crown and forcing touch-only interaction:
77	```swift
78	struct VolumePickerView: View {
79	@State private var volume: Double = 0.5
80
81	var body: some View {
82	Slider(value: $volume)
83	// No .digitalCrownRotation — Crown input is ignored
84	// Users must use touch-only, which is imprecise and frustrating on Watch
85	}
86	}
87	```
88
89	### Anti-Patterns
90
91	- Ignoring the Crown and forcing all interaction through touch
92	- Custom Crown behaviors that conflict with system expectations
93	- Missing haptic feedback on discrete value changes
94	- Laggy or batched responses to Crown rotation
95
96	---
97
98	## 3. Navigation (HIGH)
99
100	Watch navigation must be shallow and predictable. Users should never feel lost or unable to return to a known state.
101
102	### Rules
103
104	- W-NV-01: Use vertical page scrolling as the default content navigation pattern. Pages scroll top-to-bottom with the Digital Crown.
105	- W-NV-02: Use `TabView` for top-level sections (max 5 tabs). Swipe horizontally between tabs. Each tab is a distinct functional area.
106	- W-NV-03: Use `NavigationStack` for hierarchical drill-down. Limit hierarchy to 2-3 levels maximum. Every pushed view must have a back button (provided automatically by the system).
107	- W-NV-04: Avoid

People who liked this also viewed

6 picks

Type

watchos

462stars26forks

View on GitHub

How to install watchos?

ehmo/platform-design-skills/watchos

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

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# watchOS Design Guidelines
2
3	Apple Watch is a personal, glanceable device worn on the wrist. Interactions are measured in seconds, not minutes. Every design decision must prioritize speed of comprehension and brevity of interaction.
4
5	---
6
7	## 1. Glanceable Design (CRITICAL)
8
9	The defining constraint of watchOS. If a user cannot extract the key information within 2 seconds of raising their wrist, the design has failed.
10
11	### Rules
12
13	- W-GL-01: Primary information must be visible without scrolling. The first screen is the only guaranteed screen.
14	- W-GL-02: Target interaction sessions of 5 seconds or less. Design for raise-glance-lower.
15	- W-GL-03: Use large, high-contrast text. Minimum effective body text is 16pt (system font). Titles should be 18pt or larger.
16	- W-GL-04: Limit text to essential content. Truncate or abbreviate aggressively. Use SF Symbols instead of text labels where meaning is unambiguous.
17	- W-GL-05: Respect wrist-down time. When the wrist lowers, the app enters an inactive state. Do not assume continuous user attention.
18	- W-GL-06: Prioritize a single piece of information per screen. If showing multiple data points, establish clear visual hierarchy with size, weight, and color.
19
20	### Screen Dimensions Reference
21
22	\| Device \| Screen Width \| Screen Height \| Corner Radius \|
23	\|--------\|-------------\|---------------\|---------------\|
24	\| 41mm (Series 9) \| 176px \| 215px \| 36px \|
25	\| 45mm (Series 9) \| 198px \| 242px \| 39px \|
26	\| 42mm (Series 10) \| 180px \| 220px \| 37px \|
27	\| 46mm (Series 10) \| 205px \| 251px \| 40px \|
28	\| 49mm (Ultra 2) \| 205px \| 251px \| 40px \|
29
30	### Anti-Patterns
31
32	- Walls of text requiring scroll to understand context
33	- Small, dense data tables
34	- Requiring multiple taps before showing useful information
35	- Replicating an iPhone screen layout on Watch
36
37	---
38
39	## 2. Digital Crown (HIGH)
40
41	The Digital Crown is the primary physical input for scrolling and precise value selection. It provides haptic feedback and should feel purposeful.
42
43	### Rules
44
45	- W-DC-01: Use the Digital Crown as the primary scroll mechanism for vertical content. Do not rely solely on swipe gestures for scrolling.
46	- W-DC-02: For value pickers (time, quantity, sliders), bind the Crown to precise adjustments with haptic detents at each discrete value.
47	- W-DC-03: Do not override or conflict with system Crown behaviors. The system uses the Crown for volume control during media playback, scrolling in system UI, and Time Travel in complications.
48	- W-DC-04: Provide visual feedback synchronized with Crown rotation. The UI must respond frame-by-frame to Crown input with no perceptible lag.
49	- W-DC-05: Update on each Crown increment. Values, selection, and highlight states should move with each detent. Do not debounce Crown input until the gesture ends.
50
51	Correct — Crown binding with haptic detents:
52	```swift
53	struct VolumePickerView: View {
54	@State private var volume: Double = 0.5
55
56	var body: some View {
57	VStack {
58	Text("\(Int(volume * 100))%")
59	.font(.title.bold())
60	Image(systemName: "speaker.wave.3")
61	}
62	.focusable()
63	.digitalCrownRotation(
64	$volume,
65	from: 0.0,
66	through: 1.0,
67	by: 0.05,
68	sensitivity: .medium,
69	isContinuous: false,
70	isHapticFeedbackEnabled: true
71	)
72	}
73	}
74	```
75
76	Incorrect — ignoring the Crown and forcing touch-only interaction:
77	```swift
78	struct VolumePickerView: View {
79	@State private var volume: Double = 0.5
80
81	var body: some View {
82	Slider(value: $volume)
83	// No .digitalCrownRotation — Crown input is ignored
84	// Users must use touch-only, which is imprecise and frustrating on Watch
85	}
86	}
87	```
88
89	### Anti-Patterns
90
91	- Ignoring the Crown and forcing all interaction through touch
92	- Custom Crown behaviors that conflict with system expectations
93	- Missing haptic feedback on discrete value changes
94	- Laggy or batched responses to Crown rotation
95
96	---
97
98	## 3. Navigation (HIGH)
99
100	Watch navigation must be shallow and predictable. Users should never feel lost or unable to return to a known state.
101
102	### Rules
103
104	- W-NV-01: Use vertical page scrolling as the default content navigation pattern. Pages scroll top-to-bottom with the Digital Crown.
105	- W-NV-02: Use `TabView` for top-level sections (max 5 tabs). Swipe horizontally between tabs. Each tab is a distinct functional area.
106	- W-NV-03: Use `NavigationStack` for hierarchical drill-down. Limit hierarchy to 2-3 levels maximum. Every pushed view must have a back button (provided automatically by the system).
107	- W-NV-04: Avoid

People who liked this also viewed

6 picks

Type