Expert tvOS decisions for iOS developers: when to use custom focus effects vs system defaults, Siri Remote gesture trade-offs, Top Shelf content strategies, and 10-foot UI adaptation patterns. Use when building tvOS apps, debugging focus issues, or designing TV-optimized interfaces. Trigger keywords: tvOS, Focus Engine, @FocusState, isFocused, focusable, focusSection, Siri Remote, Top Shelf, TVTopShelfContentProvider, 10-foot UI, CardButtonStyle, large cards
View on GitHubKaakati/rails-enterprise-dev
reactree-ios-dev
January 25, 2026
Select agents to install to:
npx add-skill https://github.com/Kaakati/rails-enterprise-dev/blob/main/plugins/reactree-ios-dev/skills/tvos-specific-patterns/SKILL.md -a claude-code --skill tvos-specific-patternsInstallation paths:
.claude/skills/tvos-specific-patterns/# tvOS Specific Patterns — Expert Decisions
Expert decision frameworks for tvOS choices. Claude knows @FocusState and SwiftUI basics — this skill provides judgment calls for focus architecture, remote handling, and TV-optimized UI trade-offs.
---
## Decision Trees
### Focus Management Strategy
```
How complex is your focus navigation?
├─ Linear list/grid navigation
│ └─ System focus handling
│ Default behavior, no custom code needed
│
├─ Multiple focus sections with priority
│ └─ .focusSection() grouping
│ Group related elements, system handles within
│
├─ Custom initial focus on appear
│ └─ @FocusState + .onAppear
│ Set focused item programmatically
│
├─ Complex conditional focus logic
│ └─ .prefersDefaultFocus() + @FocusState
│ Combine for sophisticated control
│
└─ Focus must follow data changes
└─ Bind @FocusState to data model
Update focus when selection changes
```
**The trap**: Overriding focus behavior when system defaults work fine. Custom focus logic adds complexity and can break expected navigation patterns.
### Custom Focus Effect Decision
```
Should you create custom focus effects?
├─ Standard card/button scaling
│ └─ Use .buttonStyle(.card)
│ Apple's built-in TV-appropriate effect
│
├─ Need subtle highlight
│ └─ .isFocused environment
│ Opacity/border changes only
│
├─ Complex parallax/tilt effects
│ └─ Custom view with rotation3DEffect
│ Only for hero content, not lists
│
└─ Media-browsing app (Netflix-like)
└─ Custom focus with content preview
Scale + shadow + metadata reveal
```
### Top Shelf Content Strategy
```
What content should appear in Top Shelf?
├─ Personalized content (continue watching)
│ └─ TVTopShelfCarouselContent with .actions style
│ Play and display actions per item
│
├─ Browse/discovery content
│ └─ TVTopShelfSectionedContent
│ Multiple categories with items
│
├─ Single featured item
│ └─ TVTopShelfCarouselContent single item
│ Hero image with actions
│
├─