Tvos Design Guidelines
Apply Apple tvOS Human Interface Guidelines when designing or reviewing focus-driven TV apps, Top Shelf, and 10-foot living-room UI with your agent.
Overview
tvos-design-guidelines is an agent skill most often used in Build (also Validate prototype review, Ship UI review) that applies Apple tvOS HIG rules for focus navigation, Siri Remote, and 10-foot UI.
Install
npx skills add https://github.com/ehmo/platform-design-skills --skill tvos-design-guidelinesWhat is this skill?
- 7 rule categories: Focus-Based Navigation, Siri Remote, 10-Foot UI, Top Shelf, Media & Playback, Tab Bar, Accessibility
- CRITICAL rules for focus-only interaction—no pointer or touch assumptions
- 10-foot UI guidance: large type, bold imagery, high contrast for lean-back viewing
- Top Shelf extension and media playback patterns for living-room content apps
- Never-do list: no bottom tab bars, no trapped focus, respect simple Siri Remote gestures
Adoption & trust: 537 installs on skills.sh; 387 GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
You are building or adapting an app for Apple TV but touch-first layouts and bottom tabs break focus navigation and living-room readability.
Who is it for?
Indie developers shipping tvOS streaming, fitness, or media apps who want HIG-aligned design reviews without rereading entire Apple documentation.
Skip if: Pure iOS or visionOS-only products, or teams that need implementation code generation without design rule enforcement.
When should I use this skill?
Designing or reviewing tvOS applications, focus-based navigation, Top Shelf extensions, or media playback interfaces for Apple TV.
What do I get? / Deliverables
Your agent reviews and proposes tvOS-compliant UI that respects focus, remote simplicity, Top Shelf, and accessibility before you ship to TestFlight or the store.
- HIG-aligned design recommendations
- Evaluation checklist results for tvOS UI
Recommended Skills
Journey fit
Spans multiple journey phases - primary shelf plus alternate fits below.
Primary shelf is Build because HIG rules shape UI implementation, but the same skill supports Validate prototypes and Ship review before App Store submission. tvOS UI is frontend presentation and interaction design—focus rings, parallax, and tab structure—not backend APIs.
Where it fits
Sanity-check a TV prototype storyboard for focus order before committing engineering time.
Guide SwiftUI layout choices for tab bar placement and parallax hero art on focus.
Run the evaluation checklist against near-final screens before TestFlight.
Align screenshots and Top Shelf marketing assets with in-app focus and content-first patterns.
How it compares
HIG checker and design brief for tvOS—not a Figma plugin or App Store Connect automation skill.
Common Questions / FAQ
Who is tvos-design-guidelines for?
Solo builders and small teams designing or reviewing Apple TV apps who need focus-driven navigation and 10-foot UI rules in agent workflows.
When should I use tvos-design-guidelines?
While building tvOS frontend screens, when validating a TV prototype before full build, or during Ship review of focus traps, tab placement, and Top Shelf extensions.
Is tvos-design-guidelines safe to install?
It is design reference content with low runtime risk; still review the Security Audits panel on this Prism page before adding any skill pack to your agent environment.
SKILL.md
READMESKILL.md - Tvos Design Guidelines
# tvOS Design Guidelines ## Purpose Provide Apple Human Interface Guidelines expertise for Apple TV app design. This skill covers focus-based navigation, Siri Remote interaction, 10-foot UI principles, Top Shelf extensions, media playback, and tab bar patterns. ## When to Use - Designing or reviewing tvOS applications - Building focus-based navigation systems - Creating Top Shelf extensions - Implementing media playback interfaces - Adapting existing apps for the living room ## Key Principles 1. **Focus is everything** -- tvOS has no pointer or touch; all interaction is focus-driven 2. **Design for distance** -- assume 10-foot viewing; large text, bold imagery, high contrast 3. **Respect the remote** -- Siri Remote is simple; never require complex gestures 4. **Content first** -- TV is a lean-back, content-consumption experience 5. **Parallax communicates depth** -- use layered images to reinforce focus ## Rule Categories | # | Category | Impact | |---|----------|--------| | 1 | Focus-Based Navigation | CRITICAL | | 2 | Siri Remote | CRITICAL | | 3 | 10-Foot UI | HIGH | | 4 | Top Shelf | HIGH | | 5 | Media & Playback | MEDIUM | | 6 | Tab Bar | MEDIUM | | 7 | Accessibility | CRITICAL | ## File Structure - `SKILL.md` -- complete design rules and evaluation checklist - `rules/_sections.md` -- categorized rules reference - `metadata.json` -- version and source references ## Never Do - Never use bottom tab bars — use the top tab bar - Never trap focus — users must always be able to move away - Never override the Menu button behavior - Never require complex or multi-finger gestures on the Siri Remote - Never repurpose the Play/Pause button for non-media actions - Never use small touch targets — minimum 250x150pt for cards - Never use body text below 29pt - Never use TVTopShelfProvider (deprecated since tvOS 14) — use TVTopShelfContentProvider - Never omit accessibility labels on image cards and icon buttons - Never apply parallax animations without respecting Reduce Motion { "version": "1.0.0", "organization": "Platform Design Skills", "date": "February 2026", "abstract": "Apple Human Interface Guidelines for Apple TV. 47+ rules across 7 categories covering focus-based navigation, Siri Remote, Top Shelf, parallax icons, living room viewing distances, media playback patterns, and accessibility.", "references": [ "https://developer.apple.com/design/human-interface-guidelines", "https://developer.apple.com/design/human-interface-guidelines/designing-for-tvos", "https://developer.apple.com/documentation/tvos-release-notes", "https://developer.apple.com/documentation/tvservices" ] } # tvOS Design Rules -- Sectioned Reference Quick-access reference organized by category. Each rule has a severity and unique ID for citation. --- ## Section 1: Focus-Based Navigation | ID | Rule | Severity | |----|------|----------| | FOCUS-01 | Every interactive element must have a clearly visible focus state | CRITICAL | | FOCUS-02 | Focus movement must be predictable and follow logical spatial layout | CRITICAL | | FOCUS-03 | Use UIFocusGuide to bridge gaps between focusable elements | CRITICAL | | FOCUS-04 | Apply parallax effect to focused items using layered images (LSR) | CRITICAL | | FOCUS-05 | Minimum card size 250x150pt for comfortable focus targeting | CRITICAL | | FOCUS-06 | Provide a default focused element on every screen | CRITICAL | | FOCUS-07 | Preserve focus memory when returning to a screen | HIGH | | FOCUS-08 | Never trap focus; users must always be able to move away | CRITICAL | | FOCUS-09 | Keep row order stable and focus moves local to reduce re-orientation | HIGH | ### Key APIs - `UIFocusEnvironment`, `UIFocusGuide`, `UIFocusSystem` - `didUpdateFocus(in:with:)` for tracking focus changes - `preferredFocusEnvironments` for setting default focus - Layered images: LSR format via Xcode asset catalog --- ## Section 2: Siri Remote | ID | Rule | Severity | |----|------|----------| | REMOTE-0