tvos

Name: tvos
Author: ehmo

462stars26forks

How to install tvos?

ehmo/platform-design-skills/tvos

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

Installs into the current project.

Summary

Apple Human Interface Guidelines for Apple TV. Use when building tvOS apps with focus-based navigation, Siri Remote input, or living room viewing experiences. Triggers on tasks involving Apple TV, tvOS, 10-foot UI, or media playback.

Files · 1

View on GitHub

SKILL.md

1	# tvOS Design Guidelines
2
3	Apple TV is a living room device driven entirely by focus-based navigation and the Siri Remote. There is no pointer, no touch screen, and no mouse. Every design decision must account for the 10-foot viewing distance, the simplicity of the remote, and the lean-back nature of TV consumption.
4
5	---
6
7	## 1. Focus-Based Navigation (CRITICAL)
8
9	The focus system is the foundation of all tvOS interaction. There is no cursor -- users move focus between elements using the Siri Remote touch surface.
10
11	### Rules
12
13	FOCUS-01: Every interactive element must have a clearly visible focus state.
14	The focused item must be unmistakably distinguished from unfocused items. Use scaling (typically 1.05x-1.1x), elevation via shadow, brightness changes, or border highlights. Never rely on color alone.
15
16	FOCUS-02: Focus movement must be predictable and follow a logical spatial layout.
17	When a user swipes right, focus must move to the element visually to the right. Avoid layouts where focus jumps unexpectedly across the screen. Grid and linear layouts are safest.
18
19	FOCUS-03: Use focus guides (UIFocusGuide) to bridge gaps in layouts.
20	When visual gaps exist between focusable elements, add invisible focus guides so the user does not get stuck. Every swipe should move focus somewhere meaningful.
21
22	FOCUS-04: Apply the parallax effect to focused items.
23	Focused cards, posters, and icons should exhibit a subtle parallax tilt responding to touch surface movement. Use layered images (LSR format) with foreground, midground, and background layers. This communicates depth and confirms focus.
24
25	Correct:
26	```swift
27	// SwiftUI — custom focus engine with explicit focus state
28	struct ContentView: View {
29	@FocusState private var focusedItem: String?
30
31	var body: some View {
32	HStack(spacing: 40) {
33	ForEach(items) { item in
34	CardView(item: item)
35	.focusable()
36	.focused($focusedItem, equals: item.id)
37	.scaleEffect(focusedItem == item.id ? 1.1 : 1.0)
38	.shadow(radius: focusedItem == item.id ? 20 : 0)
39	.animation(.easeInOut(duration: 0.15), value: focusedItem)
40	}
41	}
42	}
43	}
44	```
45
46	Incorrect:
47	```swift
48	// SwiftUI — no focus state: unfocused and focused items look identical
49	struct ContentView: View {
50	var body: some View {
51	HStack(spacing: 40) {
52	ForEach(items) { item in
53	CardView(item: item)
54	.focusable()
55	// No scale, shadow, or visual change on focus
56	// User cannot tell which item is selected
57	}
58	}
59	}
60	}
61	```
62
63	FOCUS-05: Make focus targets large enough for comfortable navigation.
64	Minimum recommended touch target is 250x150pt for cards. Smaller elements are difficult to land on with swipe-based navigation. Group small actions under a focused parent when possible.
65
66	FOCUS-06: Provide a default focused element on every screen.
67	When a view appears, one element must already hold focus. Choose the most likely user intent -- typically the primary content item or the first item in a collection.
68
69	FOCUS-07: Preserve focus memory when returning to a screen.
70	If a user navigates away and returns, focus should restore to the last focused item on that screen, not reset to the default.
71
72	FOCUS-08: Never trap focus.
73	Users must always be able to move focus away from any element. If focus cannot leave a region, the app feels broken.
74
75	FOCUS-09: Reduce re-orientation cost.
76	Keep row order stable, restore prior focus when returning, and prefer nearby focus destinations so users do not have to rescan the entire screen after each navigation step.
77
78	### Parallax Layer Reference
79
80	\| Layer \| Purpose \| Movement Amount \|
81	\|-------\|---------\|-----------------\|
82	\| Background \| Static backdrop, blurred imagery \| Minimal (1-2pt) \|
83	\| Midground \| Primary artwork or content image \| Moderate (3-5pt) \|
84	\| Foreground \| Title text, logos, badges \| Maximum (5-8pt) \|
85
86	Use Xcode's LSR (Layered Static Image) format for static layered images in the asset catalog — the system animates them automatically on focus. For custom programmatic parallax, stack `UIImageView` instances and use the focus engine callbacks (`didUpdateFocus(in:with:)` and `UIFocusAnimationCoordinator`) to drive layer movement during focus transitions. (`UIMotionEffect` responds only to subtle Siri Remote gyroscope micromotion and is not the mechanism for focus-driven parallax.)
87
88	---
89
90	## 2. Siri Remote (CRITICAL)
91
92	The Siri Remote is the primary (and often only) input device. It has a tou

People who liked this also viewed

6 picks

Type

tvos

462stars26forks

View on GitHub

How to install tvos?

ehmo/platform-design-skills/tvos

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

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# tvOS Design Guidelines
2
3	Apple TV is a living room device driven entirely by focus-based navigation and the Siri Remote. There is no pointer, no touch screen, and no mouse. Every design decision must account for the 10-foot viewing distance, the simplicity of the remote, and the lean-back nature of TV consumption.
4
5	---
6
7	## 1. Focus-Based Navigation (CRITICAL)
8
9	The focus system is the foundation of all tvOS interaction. There is no cursor -- users move focus between elements using the Siri Remote touch surface.
10
11	### Rules
12
13	FOCUS-01: Every interactive element must have a clearly visible focus state.
14	The focused item must be unmistakably distinguished from unfocused items. Use scaling (typically 1.05x-1.1x), elevation via shadow, brightness changes, or border highlights. Never rely on color alone.
15
16	FOCUS-02: Focus movement must be predictable and follow a logical spatial layout.
17	When a user swipes right, focus must move to the element visually to the right. Avoid layouts where focus jumps unexpectedly across the screen. Grid and linear layouts are safest.
18
19	FOCUS-03: Use focus guides (UIFocusGuide) to bridge gaps in layouts.
20	When visual gaps exist between focusable elements, add invisible focus guides so the user does not get stuck. Every swipe should move focus somewhere meaningful.
21
22	FOCUS-04: Apply the parallax effect to focused items.
23	Focused cards, posters, and icons should exhibit a subtle parallax tilt responding to touch surface movement. Use layered images (LSR format) with foreground, midground, and background layers. This communicates depth and confirms focus.
24
25	Correct:
26	```swift
27	// SwiftUI — custom focus engine with explicit focus state
28	struct ContentView: View {
29	@FocusState private var focusedItem: String?
30
31	var body: some View {
32	HStack(spacing: 40) {
33	ForEach(items) { item in
34	CardView(item: item)
35	.focusable()
36	.focused($focusedItem, equals: item.id)
37	.scaleEffect(focusedItem == item.id ? 1.1 : 1.0)
38	.shadow(radius: focusedItem == item.id ? 20 : 0)
39	.animation(.easeInOut(duration: 0.15), value: focusedItem)
40	}
41	}
42	}
43	}
44	```
45
46	Incorrect:
47	```swift
48	// SwiftUI — no focus state: unfocused and focused items look identical
49	struct ContentView: View {
50	var body: some View {
51	HStack(spacing: 40) {
52	ForEach(items) { item in
53	CardView(item: item)
54	.focusable()
55	// No scale, shadow, or visual change on focus
56	// User cannot tell which item is selected
57	}
58	}
59	}
60	}
61	```
62
63	FOCUS-05: Make focus targets large enough for comfortable navigation.
64	Minimum recommended touch target is 250x150pt for cards. Smaller elements are difficult to land on with swipe-based navigation. Group small actions under a focused parent when possible.
65
66	FOCUS-06: Provide a default focused element on every screen.
67	When a view appears, one element must already hold focus. Choose the most likely user intent -- typically the primary content item or the first item in a collection.
68
69	FOCUS-07: Preserve focus memory when returning to a screen.
70	If a user navigates away and returns, focus should restore to the last focused item on that screen, not reset to the default.
71
72	FOCUS-08: Never trap focus.
73	Users must always be able to move focus away from any element. If focus cannot leave a region, the app feels broken.
74
75	FOCUS-09: Reduce re-orientation cost.
76	Keep row order stable, restore prior focus when returning, and prefer nearby focus destinations so users do not have to rescan the entire screen after each navigation step.
77
78	### Parallax Layer Reference
79
80	\| Layer \| Purpose \| Movement Amount \|
81	\|-------\|---------\|-----------------\|
82	\| Background \| Static backdrop, blurred imagery \| Minimal (1-2pt) \|
83	\| Midground \| Primary artwork or content image \| Moderate (3-5pt) \|
84	\| Foreground \| Title text, logos, badges \| Maximum (5-8pt) \|
85
86	Use Xcode's LSR (Layered Static Image) format for static layered images in the asset catalog — the system animates them automatically on focus. For custom programmatic parallax, stack `UIImageView` instances and use the focus engine callbacks (`didUpdateFocus(in:with:)` and `UIFocusAnimationCoordinator`) to drive layer movement during focus transitions. (`UIMotionEffect` responds only to subtle Siri Remote gyroscope micromotion and is not the mechanism for focus-driven parallax.)
87
88	---
89
90	## 2. Siri Remote (CRITICAL)
91
92	The Siri Remote is the primary (and often only) input device. It has a tou

People who liked this also viewed

6 picks

Type