Official agent skill

React Native Tv Best Practices

by callstackincubator in callstackincubator/agent-skills

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.

OfficialMITAuto-check passedMobile

Install React Native Tv Best Practices

skills CLI
$ npx skills add callstackincubator/agent-skills --skill react-native-tv-best-practices -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install callstackincubator/agent-skills react-native-tv-best-practices --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/callstackincubator/agent-skills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/react-native-tv-best-practices .claude/skills/react-native-tv-best-practices && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
react-native-tv-best-practices
GitHub stars
1.7k
Token cost
~2.8k tokens
SKILL.md length
928 words
Files
29 (incl. references)
Skills in repo
12
Repo updated
First seen
Licence
MIT

At a glance

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.

  • Works in 5 steps: Detect the TV stack from package files,… → Reproduce navigation with the remote or… → Confirm the focused element is always… → …
  • Reviewing react-native-tvos
  • SKILL.md covers Overview, Skill Format, When to Apply and Before You Start — Identify…, plus 6 more sections
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

React Native Tv Best Practices is an agent skill from callstackincubator/agent-skills, published by the product's own GitHub organization. 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.

Its SKILL.md is about 2.8k tokens, which your agent loads only when the skill is triggered. The skill folder holds 30 other files, including reference files (for example `agents/openai.yaml`, `references/a11y-checklist.md` and `references/a11y-implementation.md`).

It sits in Mobile, covering Cross-platform mobile apps. It works with React Native and Expo. The repository describes itself as: A collection of agent-optimized React Native skills for AI coding assistants. The licence is MIT.

When your agent uses it

  • Reviewing react-native-tvos
  • Amazon Vega/Kepler
  • React Native web TV targets where the issue depends on remote input
  • TV playback constraints

Example prompts

  • “Use the react-native-tv-best-practices skill to review React Native TV apps for focus/D-pad navigation, 10-foot UI layout, TV playback/DRM…”
  • “/react-native-tv-best-practices”

Workflow steps

5 steps, taken from the first numbered list in SKILL.md.

  1. Detect the TV stack from package files, manifests, native folders, and platform tooling.
  2. Reproduce navigation with the remote or D-pad path, not mouse/touch assumptions.
  3. Confirm the focused element is always visible, reachable, and restored after modals/routes.
  4. Check playback failures from the network/DRM layer upward before changing React controls.
  5. Measure list, animation, memory, and startup work on the weakest supported TV target.

What it can do on your machine

Read from SKILL.md and the folder at commit 61e6e7d. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    No scripts in the folder and no shell commands in SKILL.md.

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

React Native Tv Best Practices loads about 2.8k tokens when it runs, and up to ~26k if it reads all its reference files. Until then it costs about 103 tokens; SKILL.md has 928 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~103
When it runs · the whole SKILL.md, loaded when a task matches
~2.8k
With references · SKILL.md plus every file in references/, read only if the agent opens them
~26k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from callstackincubator/agent-skills at commit 61e6e7d, republished under its MIT licence (© callstackincubator). 928 words, ~2,782 tokens.

Download SKILL.mdSave it as .claude/skills/react-native-tv-best-practices/SKILL.md (or your agent's skills folder). This skill also uses 28 other files; get the full folder from GitHub.
name
react-native-tv-best-practices
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.
license
MIT

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.

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.

StackHow to detectSetup expectations
react-native-tvos (Apple TV, Android TV, Fire TV)"react-native": "npm:react-native-tvos@…" in package.jsontvOS Podfile (platform :tvos); Android TV leanback/LEANBACK_LAUNCHER manifest entries; TV emulator/simulator
Expo + react-native-tvosabove plus @react-native-tvos/config-tv in app.jsonEXPO_TV=1 prebuild; react-native-tvos version must match the Expo SDK; not all Expo features/libraries are available on TV
Amazon Vega / KeplerVega/Kepler SDK & tooling (@amazon-devices/* deps, Kepler manifest); no react-native-tvosAmazon's Vega/Kepler toolchain — react-native-tvos, tvOS Podfile, and Android TV manifest do not apply
Web-based TV (Tizen, webOS)web bundler (Rsbuild/webpack) + platform packaging; spatial-nav libraryPlatform SDK packaging; @noriginmedia/norigin-spatial-navigation for focus

The focus, 10-foot design, performance, accessibility, and player guidance applies across all of these — only the setup/build expectations are stack-specific.

Review Rules

  • Resolve the target stack before setup advice.
  • Prefer natural focus order and focus guides before imperative focus calls or broad nextFocus* maps.
  • Treat focus loss, invisible focus, and broken Back/Menu behavior as navigation bugs.
  • Check readability, safe areas, and focus states at TV distance before tuning visual details.
  • Profile on the weakest supported TV device before reporting performance fixes as complete.
  • Separate playback failures by layer: manifest request, DRM license exchange, decoder capability, player state, and React UI controls.

Priority-Ordered Guidelines

PriorityCategoryImpactPrefix
1Focus and D-pad navigationCRITICALfocus-*, nav-*
2List, animation, and input performanceCRITICALperf-*
3Playback and DRM failuresHIGHvideo-*
410-foot readability and layoutHIGHdesign-*
5TV accessibilityHIGHa11y-*
6Stack setup, testing, and releaseMEDIUMsetup-*, test-*, release-*

Quick Reference

  1. Detect the TV stack from package files, manifests, native folders, and platform tooling.
  2. Reproduce navigation with the remote or D-pad path, not mouse/touch assumptions.
  3. Confirm the focused element is always visible, reachable, and restored after modals/routes.
  4. Check playback failures from the network/DRM layer upward before changing React controls.
  5. Measure list, animation, memory, and startup work on the weakest supported TV target.
Show full SKILL.md (359 more words)Show less

References

Focus and Navigation
FileImpactDescription
focus-management.mdCRITICALFocus engines, focus guides, nextFocus*, and focus restoration
focus-performance.mdCRITICALAvoiding frame drops from focus event handling
nav-directional.mdCRITICALDirectional navigation rules across TV platforms
nav-patterns.mdCRITICALGlobal/local navigation, modals, tabs, and Back behavior
nav-keyboard.mdMEDIUMSearch and text input with remotes
Design
FileImpactDescription
design-10foot.mdHIGH10-foot review heuristics
design-typography.mdHIGHTV type sizing and readability
design-layout.mdHIGHSafe areas, spacing, carousels, and focus room
design-color.mdMEDIUMContrast and TV display color constraints
Performance
FileImpactDescription
perf-overview.mdHIGHTV performance targets and profiling order
perf-lists.mdCRITICALVirtualized rows and poster-heavy lists
perf-animations.mdCRITICALFocus and transition animation performance
perf-memory.mdHIGHLow-memory TV crashes and image/video pressure
perf-network.mdHIGHRemote input, request stalls, and network resilience
Video, Accessibility, Setup, Testing
FileImpactDescription
video-streaming.mdHIGHTV platform protocol/DRM selection
video-players.mdHIGHPlayer choices and custom controls
video-debugging.mdHIGHManifest, DRM, codec, and playback debugging
a11y-overview.mdMEDIUMTV-specific accessibility differences
a11y-implementation.mdHIGHAccessible labels, roles, live regions, and focus
a11y-checklist.mdMEDIUMLaunch accessibility audit checklist
setup-getting-started.mdMEDIUMreact-native-tvos and Expo TV setup
setup-cross-platform.mdMEDIUMPlatform detection and cross-platform caveats
setup-architecture.mdMEDIUMCode sharing and project structure
test-strategy.mdMEDIUMTV testing scope and coverage split
test-javascript.mdMEDIUMJS-level remote/focus test helpers
test-e2e.mdMEDIUMAppium and TV E2E coverage
release-cicd.mdMEDIUMCI, build fingerprinting, and release checks

Problem → Skill Mapping

SymptomStart Here
"Focus jumps to wrong element"focus-management.md → Debugging section
"App freezes when scrolling lists"perf-lists.md → Virtualization
"Animations stutter on Fire TV"perf-animations.md → Native driver
"Text too small on TV"design-typography.md → Minimum sizes
"Video won't play / DRM errors"video-streaming.md → DRM section
"Screen reader skips elements"a11y-implementation.md → Roles & labels
"Back button doesn't work right"nav-patterns.md → Back navigation
"Keyboard covers content"nav-keyboard.md → Built-in vs custom
"App takes forever to start"perf-overview.md → Startup time
"Images causing memory crashes"perf-memory.md → Image optimization
"CI pipeline takes hours"release-cicd.md → Fingerprinting
"How to share code across platforms"setup-architecture.md → Code sharing

Security (TV-Specific)

General dependency/input hygiene applies as in any RN app; the TV-specific deltas worth calling out:

  • Never embed FairPlay/Widevine/PlayReady keys in client code — treat the license server as the trust boundary and keep DRM tokens server-issued.

© callstackincubator, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 28 other files (references) in skills/react-native-tv-best-practices of callstackincubator/agent-skills.

  • SKILL.md
  • agents/openai.yaml
  • references/a11y-checklist.md
  • references/a11y-implementation.md
  • references/a11y-overview.md
  • references/design-10foot.md
  • references/design-color.md
  • references/design-layout.md
  • references/design-typography.md
  • references/focus-management.md
  • references/focus-performance.md
  • references/nav-directional.md
  • references/nav-keyboard.md
  • references/nav-patterns.md
  • references/perf-animations.md
  • references/perf-lists.md
  • references/perf-memory.md
  • references/perf-network.md
  • references/perf-overview.md
  • … and 10 more

Open the folder on GitHubat commit 61e6e7d

Compare with similar skills

React Native Tv Best Practices next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

React Native Tv Best Practices compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
React Native Tv Best Practices this skillcallstackincubator/agent-skills1.7k—~2.8kAutomated safety check: PassMIT
React Native Best Practicesvercel-labs/openreview1.7k17 repos~1.1kAutomated safety check: PassMIT
Appllama App Design SkillAppllama/appllama-skills2.4k1 repos~5kAutomated safety check: PassMIT
Appllama UsageAppllama/appllama-skills2.4k1 repos~1.6kAutomated safety check: PassMIT
Release Sample SweepAtmosphere/atmosphere3.8k—~4.2kAutomated safety check: PassApache-2.0
App Store Reviewsafaiyeh/app-store-review-skill3611 repos~3.4kAutomated safety check: PassMIT

Similar skills

  • React Native Best Practices

    vercel-labs/openreview

    Official

    A prioritized rule set for React Native and Expo apps covering list performance, animation, navigation, UI patterns, state, rendering, monorepos and configuration.

    1.7k GitHub starsUsed in 17 repos~1.1k tokens
    MobileAuto-check passed
  • Appllama App Design Skill

    Appllama/appllama-skills

    Build native-feeling, benchmark-quality mobile app screens (Expo / React Native).

    2.4k GitHub starsUsed in 1 repo~5k tokens
    MobileAuto-check passed
  • Appllama Usage

    Appllama/appllama-skills

    Use the Appllama MCP (mcp.appllama.io) well — research real top-grossing mobile apps, their screens, flows, and UI elements, then build from what you learn.

    2.4k GitHub starsUsed in 1 repo~1.6k tokens
    MobileAuto-check passed
  • Release Sample Sweep

    Atmosphere/atmosphere

    Run the pre-release end-to-end sweep of every user-facing surface — the 33 samples under samples/ (booted from their packaged artifacts and driven in a real browser via chrome-devtools MCP), the…

    3.8k GitHub stars~4.2k tokensUpdated yesterday
    MobileAuto-check passed
  • App Store Review

    safaiyeh/app-store-review-skill

    Evaluates code against Apple's App Store Review Guidelines. An agent skill from safaiyeh/app-store-review-skill.

    361 GitHub starsUsed in 1 repo~3.4k tokens
    MobileAuto-check passed
  • Cali

    callstackincubator/cali

    Official

    A skill your agent uses when working in the Cali repository or when you need to run, extend, or debug the Cali CLI for mobile React Native and Expo workflows.

    991 GitHub stars~731 tokensUpdated 3 mo ago
    MobileAuto-check passed

More from callstackincubator/agent-skills

All 12 skills in this repo
  • Dogfood

    callstackincubator/agent-skills

    Official

    Systematically explore and test a mobile app on iOS/Android with agent-device to find bugs, UX issues, and other problems.

    1.7k GitHub starsUsed in 1 repo~1.7k tokens
    Auto-check passed
  • Upgrading React Native

    callstackincubator/agent-skills

    Official

    Upgrades React Native apps to newer versions by applying rn-diff-purge template diffs, updating package.json dependencies, migrating native iOS and Android configuration, resolving CocoaPods and…

    1.7k GitHub starsUsed in 1 repo~1.1k tokens
    Auto-check passed
  • React Native Best Practices

    callstackincubator/agent-skills

    Official

    Provides React Native performance optimization guidelines for FPS, TTI, bundle size, memory leaks, re-renders, and animations.

    1.7k GitHub starsUsed in 4 repos~3.1k tokens
    Auto-check passed
  • Create React Native Library

    callstackincubator/agent-skills

    Official

    Scaffolds React Native libraries with create-react-native-library for standalone libraries or local native modules and views.

    1.7k GitHub stars~684 tokensUpdated yesterday
    Auto-check passed
  • React Native Testing

    callstackincubator/agent-skills

    Official

    Write tests using React Native Testing Library (RNTL) v13 and v14 (@testing-library/react-native).

    1.7k GitHub stars~1.8k tokensUpdated yesterday
    Auto-check passed
  • Assess React Native Migration

    callstackincubator/agent-skills

    Official

    Assesses whether and how an existing mobile product should migrate to React Native.

    1.7k GitHub stars~3.6k tokensUpdated yesterday
    Auto-check passed

Categories

Questions about React Native Tv Best Practices

What does React Native Tv Best Practices do?

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. React Native Tv Best Practices is an agent skill from callstackincubator/agent-skills, published by the product's own GitHub organization. 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.

When should I use React Native Tv Best Practices?

React Native Tv Best Practices fits situations like: reviewing react-native-tvos; amazon Vega/Kepler; React Native web TV targets where the issue depends on remote input; TV playback constraints.

How do I install React Native Tv Best Practices in Claude Code?

Run `npx skills add callstackincubator/agent-skills --skill react-native-tv-best-practices -a claude-code`. Or copy the skill folder (skills/react-native-tv-best-practices in callstackincubator/agent-skills) into .claude/skills/react-native-tv-best-practices in your project. Claude Code loads it when a task matches its description.

How do I install React Native Tv Best Practices in Codex?

Run `npx skills add callstackincubator/agent-skills --skill react-native-tv-best-practices -a codex`. Or copy the skill folder (skills/react-native-tv-best-practices in callstackincubator/agent-skills) into .agents/skills/react-native-tv-best-practices in your project. Codex loads it when a task matches its description.

Can I use React Native Tv Best Practices in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add callstackincubator/agent-skills --skill react-native-tv-best-practices -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/react-native-tv-best-practices, .gemini/skills/react-native-tv-best-practices, .github/skills/react-native-tv-best-practices and .opencode/skills/react-native-tv-best-practices in your project.

What does React Native Tv Best Practices need to run?

SKILL.md names no scripts, command-line tools or credentials: React Native Tv Best Practices is instructions for the agent only.

Does React Native Tv Best Practices access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is React Native Tv Best Practices safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does React Native Tv Best Practices use?

React Native Tv Best Practices is published under the MIT licence (declared in SKILL.md). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does React Native Tv Best Practices use?

About 2.8k tokens (SKILL.md is roughly 11k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 24k tokens, read only when the agent opens those files.

What are the alternatives to React Native Tv Best Practices?

Skills that share tags, products or a category with React Native Tv Best Practices: React Native Best Practices (vercel-labs/openreview, 1.7k stars), Appllama App Design Skill (Appllama/appllama-skills, 2.4k stars), Appllama Usage (Appllama/appllama-skills, 2.4k stars) and Release Sample Sweep (Atmosphere/atmosphere, 3.8k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains React Native Tv Best Practices?

callstackincubator (a GitHub organization, an official publisher) maintains it in callstackincubator/agent-skills, which has 1,664 GitHub stars. The repository holds 12 skills in this directory. The repository was last updated on October 6, 2026.

Source: callstackincubator/agent-skills on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.