React Native Best Practices
vercel-labs/openreview
A prioritized rule set for React Native and Expo apps covering list performance, animation, navigation, UI patterns, state, rendering, monorepos and configuration.
Official agent skill
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.
$ npx skills add callstackincubator/agent-skills --skill react-native-tv-best-practices -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install callstackincubator/agent-skills react-native-tv-best-practices --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ 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-srcUse ~/.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/
Install the "react-native-tv-best-practices" agent skill from https://github.com/callstackincubator/agent-skills/tree/main/skills/react-native-tv-best-practices into .claude/skills/react-native-tv-best-practices/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "react-native-tv-best-practices", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/callstackincubator/agent-skills/tree/main/skills/react-native-tv-best-practicesType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add callstackincubator/agent-skills --skill react-native-tv-best-practices -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install callstackincubator/agent-skills react-native-tv-best-practices --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/callstackincubator/agent-skills.git skills-src && mkdir -p .agents/skills && cp -r skills-src/skills/react-native-tv-best-practices .agents/skills/react-native-tv-best-practices && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "react-native-tv-best-practices" agent skill from https://github.com/callstackincubator/agent-skills/tree/main/skills/react-native-tv-best-practices into .agents/skills/react-native-tv-best-practices/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "react-native-tv-best-practices", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add callstackincubator/agent-skills --skill react-native-tv-best-practices -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install callstackincubator/agent-skills react-native-tv-best-practices --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/callstackincubator/agent-skills.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/skills/react-native-tv-best-practices .cursor/skills/react-native-tv-best-practices && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "react-native-tv-best-practices" agent skill from https://github.com/callstackincubator/agent-skills/tree/main/skills/react-native-tv-best-practices into .cursor/skills/react-native-tv-best-practices/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "react-native-tv-best-practices", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/callstackincubator/agent-skills.git --path skills/react-native-tv-best-practices--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add callstackincubator/agent-skills --skill react-native-tv-best-practices -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install callstackincubator/agent-skills react-native-tv-best-practices --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/callstackincubator/agent-skills.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/skills/react-native-tv-best-practices .gemini/skills/react-native-tv-best-practices && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "react-native-tv-best-practices" agent skill from https://github.com/callstackincubator/agent-skills/tree/main/skills/react-native-tv-best-practices into .gemini/skills/react-native-tv-best-practices/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "react-native-tv-best-practices", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install callstackincubator/agent-skills react-native-tv-best-practicesInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add callstackincubator/agent-skills --skill react-native-tv-best-practices -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/callstackincubator/agent-skills.git skills-src && mkdir -p .github/skills && cp -r skills-src/skills/react-native-tv-best-practices .github/skills/react-native-tv-best-practices && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "react-native-tv-best-practices" agent skill from https://github.com/callstackincubator/agent-skills/tree/main/skills/react-native-tv-best-practices into .github/skills/react-native-tv-best-practices/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "react-native-tv-best-practices", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add callstackincubator/agent-skills --skill react-native-tv-best-practices -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install callstackincubator/agent-skills react-native-tv-best-practices --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/callstackincubator/agent-skills.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/skills/react-native-tv-best-practices .opencode/skills/react-native-tv-best-practices && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "react-native-tv-best-practices" agent skill from https://github.com/callstackincubator/agent-skills/tree/main/skills/react-native-tv-best-practices into .opencode/skills/react-native-tv-best-practices/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "react-native-tv-best-practices", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
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.
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.
5 steps, taken from the first numbered list in SKILL.md.
Read from SKILL.md and the folder at commit 61e6e7d. It shows what the files ask for, not the result of running them.
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.
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.
No URLs in SKILL.md.
From URLs in SKILL.md, links to its own repository left out.
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
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.
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.
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.
The full file from callstackincubator/agent-skills at commit 61e6e7d, republished under its MIT licence (© callstackincubator). 928 words, ~2,782 tokens.
.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.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.
Reference files are grouped by topic prefix:
focus-*: focus engines, focus guides, focus event performancenav-*: D-pad navigation, Back/Menu behavior, keyboard/search inputdesign-*: 10-foot typography, layout, color, focus visibilityperf-*: startup, memory, lists, animation, and network constraints on TV hardwarevideo-*: playback architecture, DRM/protocol selection, debugginga11y-*: TV accessibility implementation and audit checkssetup-*: stack detection, setup, architecture, cross-platform behaviortest-* and release-*: test coverage, E2E, and CI/release workflowsApply this skill when the app targets a TV platform and the work involves:
react-native-tvos, Expo TV, Amazon Vega/Kepler, Tizen, or webOSThis 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.
| Stack | How to detect | Setup expectations |
|---|---|---|
| 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 |
| 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 |
| 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 |
| Web-based TV (Tizen, webOS) | web bundler (Rsbuild/webpack) + platform packaging; spatial-nav library | Platform 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.
nextFocus* maps.| Priority | Category | Impact | Prefix |
|---|---|---|---|
| 1 | Focus and D-pad navigation | CRITICAL | focus-*, nav-* |
| 2 | List, animation, and input performance | CRITICAL | perf-* |
| 3 | Playback and DRM failures | HIGH | video-* |
| 4 | 10-foot readability and layout | HIGH | design-* |
| 5 | TV accessibility | HIGH | a11y-* |
| 6 | Stack setup, testing, and release | MEDIUM | setup-*, test-*, release-* |
| File | Impact | Description |
|---|---|---|
| focus-management.md | CRITICAL | Focus engines, focus guides, nextFocus*, and focus restoration |
| focus-performance.md | CRITICAL | Avoiding frame drops from focus event handling |
| nav-directional.md | CRITICAL | Directional navigation rules across TV platforms |
| nav-patterns.md | CRITICAL | Global/local navigation, modals, tabs, and Back behavior |
| nav-keyboard.md | MEDIUM | Search and text input with remotes |
| File | Impact | Description |
|---|---|---|
| design-10foot.md | HIGH | 10-foot review heuristics |
| design-typography.md | HIGH | TV type sizing and readability |
| design-layout.md | HIGH | Safe areas, spacing, carousels, and focus room |
| design-color.md | MEDIUM | Contrast and TV display color constraints |
| File | Impact | Description |
|---|---|---|
| perf-overview.md | HIGH | TV performance targets and profiling order |
| perf-lists.md | CRITICAL | Virtualized rows and poster-heavy lists |
| perf-animations.md | CRITICAL | Focus and transition animation performance |
| perf-memory.md | HIGH | Low-memory TV crashes and image/video pressure |
| perf-network.md | HIGH | Remote input, request stalls, and network resilience |
| File | Impact | Description |
|---|---|---|
| video-streaming.md | HIGH | TV platform protocol/DRM selection |
| video-players.md | HIGH | Player choices and custom controls |
| video-debugging.md | HIGH | Manifest, DRM, codec, and playback debugging |
| a11y-overview.md | MEDIUM | TV-specific accessibility differences |
| a11y-implementation.md | HIGH | Accessible labels, roles, live regions, and focus |
| a11y-checklist.md | MEDIUM | Launch accessibility audit checklist |
| setup-getting-started.md | MEDIUM | react-native-tvos and Expo TV setup |
| setup-cross-platform.md | MEDIUM | Platform detection and cross-platform caveats |
| setup-architecture.md | MEDIUM | Code sharing and project structure |
| test-strategy.md | MEDIUM | TV testing scope and coverage split |
| test-javascript.md | MEDIUM | JS-level remote/focus test helpers |
| test-e2e.md | MEDIUM | Appium and TV E2E coverage |
| release-cicd.md | MEDIUM | CI, build fingerprinting, and release checks |
| Symptom | Start 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 |
General dependency/input hygiene applies as in any RN app; the TV-specific deltas worth calling out:
© callstackincubator, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
SKILL.md and 28 other files (references) in skills/react-native-tv-best-practices of callstackincubator/agent-skills.
Open the folder on GitHubat commit 61e6e7d
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.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| React Native Tv Best Practices this skillcallstackincubator/agent-skills | 1.7k | — | ~2.8k | Automated safety check: Pass | MIT | |
| React Native Best Practicesvercel-labs/openreview | 1.7k | 17 repos | ~1.1k | Automated safety check: Pass | MIT | |
| Appllama App Design SkillAppllama/appllama-skills | 2.4k | 1 repos | ~5k | Automated safety check: Pass | MIT | |
| Appllama UsageAppllama/appllama-skills | 2.4k | 1 repos | ~1.6k | Automated safety check: Pass | MIT | |
| Release Sample SweepAtmosphere/atmosphere | 3.8k | — | ~4.2k | Automated safety check: Pass | Apache-2.0 | |
| App Store Reviewsafaiyeh/app-store-review-skill | 361 | 1 repos | ~3.4k | Automated safety check: Pass | MIT |
vercel-labs/openreview
A prioritized rule set for React Native and Expo apps covering list performance, animation, navigation, UI patterns, state, rendering, monorepos and configuration.
Appllama/appllama-skills
Build native-feeling, benchmark-quality mobile app screens (Expo / React Native).
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.
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…
safaiyeh/app-store-review-skill
Evaluates code against Apple's App Store Review Guidelines. An agent skill from safaiyeh/app-store-review-skill.
callstackincubator/cali
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.
callstackincubator/agent-skills
Systematically explore and test a mobile app on iOS/Android with agent-device to find bugs, UX issues, and other problems.
callstackincubator/agent-skills
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…
callstackincubator/agent-skills
Provides React Native performance optimization guidelines for FPS, TTI, bundle size, memory leaks, re-renders, and animations.
callstackincubator/agent-skills
Scaffolds React Native libraries with create-react-native-library for standalone libraries or local native modules and views.
callstackincubator/agent-skills
Write tests using React Native Testing Library (RNTL) v13 and v14 (@testing-library/react-native).
callstackincubator/agent-skills
Assesses whether and how an existing mobile product should migrate to React Native.
Works with
Categories
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.
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.
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.
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.
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.
SKILL.md names no scripts, command-line tools or credentials: React Native Tv Best Practices is instructions for the agent only.
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.
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.
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.
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.
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.
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.