Menü
10-foot UI design guidelines: safe zones, font sizes, contrast, focus indicators for TV viewing distance
Mit Codex oder Claude installieren Kopieren Sie diesen Prompt, fügen Sie ihn in Codex, Claude oder einen anderen Assistant ein und lassen Sie die Skill-Seite prüfen und installieren.
Basierend auf der SOC-Berufsklassifikation
Template repo file structure: where screens, navigation, theme, data, and platform entries live in the monorepo
Android TV build and D-pad QA using Android CLI first, with bounded Gradle and ADB fallbacks
Expo Application Services cloud build configuration for TV app APK and IPA generation
Expo TV configuration: app.json plugins, prebuild settings, platform-specific config for react-native-tvos
Fire TV leanback manifest configuration: banner icons, LEANBACK_LAUNCHER intent filter, TV-specific Android settings
Gradle build commands: assembleDebug, assembleRelease, APK output paths, and emulator installation
| name | 10ft-ui |
| description | 10-foot UI design guidelines: safe zones, font sizes, contrast, focus indicators for TV viewing distance |
| applies_to | ["phase_screens"] |
| load_when | writing a new screen that doesn't reuse a shared-ui screen |
TV is a 10-foot UI: viewer sits 8–12 ft from a 1080p–4K screen. Decisions that are fine on phone (12pt text, 4:1 contrast, dense layouts) are broken on TV. This skill is the checklist for new screens that don't reuse the template's vetted ones.
If you're reusing Home, Detail, etc., you don't need this skill — they already comply. Load this only when generating something genuinely new.
| Spec | TV minimum | Phone minimum (for contrast) |
|---|---|---|
| Body text size | 24pt | 14pt |
| Heading 1 | 48–64pt | 24–28pt |
| Line height | 1.4× font size | 1.2× |
| Touch / focus target | 96×96pt | 44×44pt |
| Body text contrast | 7:1 (AAA) | 4.5:1 (AA) |
| Focus ring thickness | 4px+ | n/a |
| Safe area margin | 5% of width/height each edge (overscan) | n/a |
The phone column is there to make the deltas obvious. On TV, everything is bigger, thicker, more contrasted.
TVs historically cropped 5% of the image edges. Modern flatscreens mostly don't, but the convention persists, and the platforms (especially Apple TV) enforce safe areas in their HIG. Practical rules:
useSafeAreaInsets() (from react-native-safe-area-context) and offset all root containers.The template's screen wrappers handle this. For a brand-new screen, replicate that pattern — don't put a <View> at top: 0 and call it done.
A 10-ft UI is navigated by D-pad, not by pointing. Every interactive element must:
<SpatialNavigationFocusableView> or themed <Pressable>).If you can't D-pad to it, it doesn't exist.
See spatial-navigation.md for the focus tree primitives. This skill is about visual focus, not the focus tree.
Phone designers cram. TV designers don't.
When in doubt, fewer-larger over more-smaller.
Lower-quality TVs and bright rooms compress contrast. Account for the worst case:
#FFFFFF on #1F1F1F = 13:1, fine. #CCCCCC on #1F1F1F = 9.2:1, also fine. #888888 on #1F1F1F = 4.5:1, not fine for body.theming.md focus ring decision rule).Motion is great on TV — large screens, dramatic feel — but with rules:
Animations that work on phone (subtle bounce, slide-in-from-bottom) often feel cheap on TV. Bigger, calmer motion reads better.
A screen with no content is a real possibility (empty watchlist, search with no results, category with no items). Don't let it render blank:
This is the difference between "looks broken" and "looks intentional."
video-player.md).accessibilityLabel on focusables. The template's components do this — preserve it when extending.Home, Category, Detail, Player, Search, Settings? → Use that screen with different data. Stop.SpatialNavigationRoot, safe area, focus model.<SpatialNavigationRoot> + safe-area-aware container.Hero, Rail, Grid, Tile where possible.run_focus_check before considering it done.