react-native-tv-best-practices
starsforks
How to install react-native-tv-best-practices?
callstackincubator/agent-skills/react-native-tv-best-practices
$npx -y skills add callstackincubator/agent-skills --skill react-native-tv-best-practicesReviews React Native TV apps for focus/D-pad navigation, 10-foot UI layout, TV playback/DRM integration, low-memory TV performance, and TV accessibility. Use when building, debugging, or reviewing react-native-tvos, Expo TV, Amazon Vega/Kepler, or React Native web TV targets wher
SKILL.md
| 1 | # React Native TV Best Practices |
| 2 | |
| 3 | ## Overview |
| 4 | |
| 5 | TV-specific review guidance for React Native-backed apps on Apple TV, Android TV, Fire TV, Amazon Vega/Kepler, and web-based TV targets such as Tizen or webOS. |
| 6 | |
| 7 | Use this skill only for TV deltas: remote input, focus engines, 10-foot layout, platform packaging, playback/DRM, low-memory TV hardware, and TV accessibility. For ordinary React Native performance or architecture issues, use [react-native-best-practices](../react-native-best-practices/SKILL.md). |
| 8 | |
| 9 | ## Skill Format |
| 10 | |
| 11 | Reference files are grouped by topic prefix: |
| 12 | |
| 13 | - `focus-*`: focus engines, focus guides, focus event performance |
| 14 | - `nav-*`: D-pad navigation, Back/Menu behavior, keyboard/search input |
| 15 | - `design-*`: 10-foot typography, layout, color, focus visibility |
| 16 | - `perf-*`: startup, memory, lists, animation, and network constraints on TV hardware |
| 17 | - `video-*`: playback architecture, DRM/protocol selection, debugging |
| 18 | - `a11y-*`: TV accessibility implementation and audit checks |
| 19 | - `setup-*`: stack detection, setup, architecture, cross-platform behavior |
| 20 | - `test-*` and `release-*`: test coverage, E2E, and CI/release workflows |
| 21 | |
| 22 | ## When to Apply |
| 23 | |
| 24 | Apply this skill when the app targets a TV platform and the work involves: |
| 25 | |
| 26 | - Focus movement, visible focus, focus restoration, or remote/D-pad input |
| 27 | - TV layout readability, overscan/safe areas, or 10-foot UI density |
| 28 | - TV player controls, manifests, DRM, decoder support, or playback errors |
| 29 | - Performance on low-memory TV hardware, especially with video or large carousels |
| 30 | - TV accessibility with screen readers, captions, focus order, or remote-only interaction |
| 31 | - Platform setup for `react-native-tvos`, Expo TV, Amazon Vega/Kepler, Tizen, or webOS |
| 32 | |
| 33 | ## Before You Start — Identify the TV Stack |
| 34 | |
| 35 | This skill covers several TV stacks. **Detect which one the app targets before flagging setup issues** — demanding `react-native-tvos`, a tvOS Podfile, or an Android TV manifest on a Vega/Kepler or web-based TV app produces false positives. |
| 36 | |
| 37 | | Stack | How to detect | Setup expectations | |
| 38 | | ----------------------------------------------------- | ------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------ | |
| 39 | | **react-native-tvos** (Apple TV, Android TV, Fire TV) | `"react-native": "npm:react-native-tvos@…"` in package.json | tvOS Podfile (`platform :tvos`); Android TV `leanback`/`LEANBACK_LAUNCHER` manifest entries; TV emulator/simulator | |
| 40 | | **Expo + react-native-tvos** | above **plus** `@react-native-tvos/config-tv` in app.json | `EXPO_TV=1` prebuild; `react-native-tvos` version must match the Expo SDK; not all Expo features/libraries are available on TV | |
| 41 | | **Amazon Vega / Kepler** | Vega/Kepler SDK & tooling (`@amazon-devices/*` deps, Kepler manifest); **no** `react-native-tvos` | Amazon's Vega/Kepler toolchain — `react-native-tvos`, tvOS Podfile, and Android TV manifest do **not** apply | |
| 42 | | **Web-based TV** (Tizen, webOS) | web bundler (Rsbuild/webpack) + platform packaging; spatial-nav library | Platform SDK packaging; `@noriginmedia/norigin-spatial-navigation` for focus | |
| 43 | |
| 44 | The focus, 10-foot design, performance, accessibility, and player guidance applies across all of these — only the **setup/build** expectations are stack-specific. |
| 45 | |
| 46 | ## Review Rules |
| 47 | |
| 48 | - Resolve the target stack before setup advice. |
| 49 | - Prefer natural focus order and focus guides before imperative focus calls or broad `nextFocus*` maps. |
| 50 | - Treat focus loss, invisible focus, and broken Back/Menu behavior as navigation bugs. |
| 51 | - Check readability, safe areas, and focus states at TV distance before tuning visual details. |
| 52 | - Profile on the weakest supported TV device before reporting performance fixes as complete. |
| 53 | - Separate playback failures by layer: manifest request, DRM license exchange, decoder capability, |
People who liked this also viewed
6 picksType
- hyperframes-cliUse the HyperFrames CLI development loop: init, add, catalog, capture, lint, check, snapshot, compare, grade-compare, preview, play, present, beats, keyframes, single or batch render, publish, cloud, SkillsJul 2026
- request-refactor-planSkills for Real Engineers. Straight from my .agents directory.SkillsJul 2026
- analyze-projectRigor Analyze / Rigor Audit read-only skill for deep learning research repositories. Use when the user wants to read and understand a repository, inspect model structure and training or inference entrSkillsMay 2026
- explore-codeRigor Improve implementation leaf skill for auditable candidate implementation in deep learning research repositories. Use when the researcher explicitly authorizes exploratory work on an isolated braSkillsMay 2026
- ubiquitous-languageSkills for Real Engineers. Straight from my .agents directory.SkillsJul 2026
- scaffold-exercisesSkills for Real Engineers. Straight from my .agents directory.SkillsJul 2026
