# React Native Tv Best Practices

Reviews React Native TV apps for focus/D-pad navigation, 10-foot UI layout, TV...

- Repository: https://github.com/callstackincubator/agent-skills (1694 stars)
- Category: Design
- License: MIT
- Last updated: 2026-10-08
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add callstackincubator/agent-skills --skill react-native-tv-best-practices -g -a claude-code -y`
Codex: `npx skills add callstackincubator/agent-skills --skill react-native-tv-best-practices -g -a codex -y`
Cursor: `npx skills add callstackincubator/agent-skills --skill react-native-tv-best-practices -g -a cursor -y`
Gemini CLI: `npx skills add callstackincubator/agent-skills --skill react-native-tv-best-practices -g -a gemini-cli -y`
Claude Code plugin marketplace: `/plugin marketplace add callstackincubator/agent-skills`

## Description

Reviews 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 where the issue depends on remote input, TV focus, TV packaging, TV hardware, or TV playback constraints.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# React Native TV Best Practices

## Overview

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.

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).

## Skill Format

Reference files are grouped by topic prefix:

- `focus-*`: focus engines, focus guides, focus event performance
- `nav-*`: D-pad navigation, Back/Menu behavior, keyboard/search input
- `design-*`: 10-foot typography, layout, color, focus visibility
- `perf-*`: startup, memory, lists, animation, and network constraints on TV hardware
- `video-*`: playback architecture, DRM/protocol selection, debugging
- `a11y-*`: TV accessibility implementation and audit checks
- `setup-*`: stack detection, setup, architecture, cross-platform behavior
- `test-*` and `release-*`: test coverage, E2E, and CI/release workflows

## When to Apply

Apply this skill when the app targets a TV platform and the work involves:

- Focus movement, visible focus, focus restoration, or remote/D-pad input
- TV layout readability, overscan/safe areas, or 10-foot UI density
- TV player controls, manifests, DRM, decoder support, or playback errors
- Performance on low-memory TV hardware, especially with video or large carousels
- TV accessibility with screen readers, captions, focus order, or remote-only interaction
- Platform setup for `react-native-tvos`, Expo TV, Amazon Vega/Kepler, Tizen, or webOS

## Before You Start, Identify the TV Stack

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.

The rest: https://github.com/callstackincubator/agent-skills/blob/HEAD/skills/react-native-tv-best-practices/SKILL.md