React Native Expert
tech-leads-club/agent-skills
Guides React Native and Expo work for cross-platform apps: Expo Router navigation, fast lists, Reanimated animation, platform-specific code and project structure.
A prioritized rule set for React Native and Expo apps covering list performance, animation, navigation, UI patterns, state, rendering, monorepos and configuration.
Install React Native Best Practices
$ npx skills add vercel-labs/openreview --skill vercel-react-native-skills -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install vercel-labs/openreview vercel-react-native-skills --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/vercel-labs/openreview.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/skills/vercel-react-native-skills .claude/skills/vercel-react-native-skills && 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 "vercel-react-native-skills" agent skill from https://github.com/vercel-labs/openreview/tree/main/.agents/skills/vercel-react-native-skills into .claude/skills/vercel-react-native-skills/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "vercel-react-native-skills", 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/vercel-labs/openreview/tree/main/.agents/skills/vercel-react-native-skillsType 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 vercel-labs/openreview --skill vercel-react-native-skills -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install vercel-labs/openreview vercel-react-native-skills --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/vercel-labs/openreview.git skills-src && mkdir -p .agents/skills && cp -r skills-src/.agents/skills/vercel-react-native-skills .agents/skills/vercel-react-native-skills && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "vercel-react-native-skills" agent skill from https://github.com/vercel-labs/openreview/tree/main/.agents/skills/vercel-react-native-skills into .agents/skills/vercel-react-native-skills/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "vercel-react-native-skills", 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 vercel-labs/openreview --skill vercel-react-native-skills -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install vercel-labs/openreview vercel-react-native-skills --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/vercel-labs/openreview.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/.agents/skills/vercel-react-native-skills .cursor/skills/vercel-react-native-skills && 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 "vercel-react-native-skills" agent skill from https://github.com/vercel-labs/openreview/tree/main/.agents/skills/vercel-react-native-skills into .cursor/skills/vercel-react-native-skills/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "vercel-react-native-skills", 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/vercel-labs/openreview.git --path .agents/skills/vercel-react-native-skills--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 vercel-labs/openreview --skill vercel-react-native-skills -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install vercel-labs/openreview vercel-react-native-skills --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/vercel-labs/openreview.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/.agents/skills/vercel-react-native-skills .gemini/skills/vercel-react-native-skills && 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 "vercel-react-native-skills" agent skill from https://github.com/vercel-labs/openreview/tree/main/.agents/skills/vercel-react-native-skills into .gemini/skills/vercel-react-native-skills/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "vercel-react-native-skills", 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 vercel-labs/openreview vercel-react-native-skillsInstalls 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 vercel-labs/openreview --skill vercel-react-native-skills -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/vercel-labs/openreview.git skills-src && mkdir -p .github/skills && cp -r skills-src/.agents/skills/vercel-react-native-skills .github/skills/vercel-react-native-skills && 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 "vercel-react-native-skills" agent skill from https://github.com/vercel-labs/openreview/tree/main/.agents/skills/vercel-react-native-skills into .github/skills/vercel-react-native-skills/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "vercel-react-native-skills", 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 vercel-labs/openreview --skill vercel-react-native-skills -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install vercel-labs/openreview vercel-react-native-skills --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/vercel-labs/openreview.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/.agents/skills/vercel-react-native-skills .opencode/skills/vercel-react-native-skills && 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 "vercel-react-native-skills" agent skill from https://github.com/vercel-labs/openreview/tree/main/.agents/skills/vercel-react-native-skills into .opencode/skills/vercel-react-native-skills/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "vercel-react-native-skills", 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.
Facts
- Skill name
vercel-react-native-skills- GitHub stars
- 1.7k
- Used in
- 17 other repos
- Token cost
- ~1.1k tokens
- SKILL.md length
- 374 words
- Files
- 39
- Skills in repo
- 5
- Repo updated
- First seen
- Licence
- MIT
At a glance
A prioritized rule set for React Native and Expo apps covering list performance, animation, navigation, UI patterns, state, rendering, monorepos and configuration.
- Works in 8 steps: List Performance (CRITICAL) → Animation (HIGH) → Navigation (HIGH) → …
- Building React Native or Expo components
- SKILL.md covers When to Apply, Rule Categories by Priority, Quick Reference and How to Use, plus 1 more section
- Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md
What it does
The skill bundles rules for React Native and Expo applications, ranked by impact: list performance is critical, animation, navigation and UI patterns are high, state management, rendering and monorepo structure are medium, and configuration such as fonts and imports is low. Each rule has its own file under rules/, named with a prefix per category, such as list-performance-, animation- and ui-.
Typical rules say to virtualize large lists with FlashList, memoize list items and stabilize callbacks, avoid inline style objects, animate only transform and opacity, use useDerivedValue and Gesture.Tap, prefer native stack and tab navigators, use expo-image, choose Pressable over TouchableOpacity and handle safe areas in scroll views. It applies when building components, tuning list and scroll performance, writing Reanimated animations, handling images and media, configuring native modules or fonts, or structuring monorepos with native dependencies.
When your agent uses it
- Building React Native or Expo components
- Tuning list and scroll performance in a mobile app
- Writing Reanimated animations that stay smooth
- Configuring native modules, fonts or a monorepo with native dependencies
Example prompts
- “My FlashList feed stutters while scrolling. Apply the list performance rules.”
- “Replace TouchableOpacity with Pressable across the settings screens and fix safe-area handling.”
- “Review this Reanimated animation for properties that should not be animated.”
Workflow steps
8 steps, taken from the step headings in SKILL.md.
What it can do on your machine
Read from SKILL.md and the folder at commit 672deb2. 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 Best Practices loads about 1.1k tokens when it runs. Until then it costs about 81 tokens; SKILL.md has 374 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.
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 vercel-labs/openreview at commit 672deb2, republished under its MIT licence (© vercel-labs). 374 words, ~1,110 tokens.
Download SKILL.mdSave it as
.claude/skills/vercel-react-native-skills/SKILL.md (or your agent's skills folder). This skill also uses 38 other files; get the full folder from GitHub.- name
- vercel-react-native-skills
- description
- React Native and Expo best practices for building performant mobile apps. Use when building React Native components, optimizing list performance, implementing animations, or working with native modules. Triggers on tasks involving React Native, Expo, mobile performance, or native platform APIs.
- license
- MIT
- metadata.author
- vercel
- metadata.version
- 1.0.0
React Native Skills
Comprehensive best practices for React Native and Expo applications. Contains rules across multiple categories covering performance, animations, UI patterns, and platform-specific optimizations.
When to Apply
Reference these guidelines when:
- Building React Native or Expo apps
- Optimizing list and scroll performance
- Implementing animations with Reanimated
- Working with images and media
- Configuring native modules or fonts
- Structuring monorepo projects with native dependencies
Rule Categories by Priority
| Priority | Category | Impact | Prefix |
|---|---|---|---|
| 1 | List Performance | CRITICAL | list-performance- |
| 2 | Animation | HIGH | animation- |
| 3 | Navigation | HIGH | navigation- |
| 4 | UI Patterns | HIGH | ui- |
| 5 | State Management | MEDIUM | react-state- |
| 6 | Rendering | MEDIUM | rendering- |
| 7 | Monorepo | MEDIUM | monorepo- |
| 8 | Configuration | LOW | fonts-, imports- |
Quick Reference
1. List Performance (CRITICAL)
list-performance-virtualize- Use FlashList for large listslist-performance-item-memo- Memoize list item componentslist-performance-callbacks- Stabilize callback referenceslist-performance-inline-objects- Avoid inline style objectslist-performance-function-references- Extract functions outside renderlist-performance-images- Optimize images in listslist-performance-item-expensive- Move expensive work outside itemslist-performance-item-types- Use item types for heterogeneous lists
2. Animation (HIGH)
animation-gpu-properties- Animate only transform and opacityanimation-derived-value- Use useDerivedValue for computed animationsanimation-gesture-detector-press- Use Gesture.Tap instead of Pressable
3. Navigation (HIGH)
navigation-native-navigators- Use native stack and native tabs over JS navigators
4. UI Patterns (HIGH)
ui-expo-image- Use expo-image for all imagesui-image-gallery- Use Galeria for image lightboxesui-pressable- Use Pressable over TouchableOpacityui-safe-area-scroll- Handle safe areas in ScrollViewsui-scrollview-content-inset- Use contentInset for headersui-menus- Use native context menusui-native-modals- Use native modals when possibleui-measure-views- Use onLayout, not measure()ui-styling- Use StyleSheet.create or Nativewind
Show full SKILL.md (131 more words)Show less
5. State Management (MEDIUM)
react-state-minimize- Minimize state subscriptionsreact-state-dispatcher- Use dispatcher pattern for callbacksreact-state-fallback- Show fallback on first renderreact-compiler-destructure-functions- Destructure for React Compilerreact-compiler-reanimated-shared-values- Handle shared values with compiler
6. Rendering (MEDIUM)
rendering-text-in-text-component- Wrap text in Text componentsrendering-no-falsy-and- Avoid falsy && for conditional rendering
7. Monorepo (MEDIUM)
monorepo-native-deps-in-app- Keep native dependencies in app packagemonorepo-single-dependency-versions- Use single versions across packages
8. Configuration (LOW)
fonts-config-plugin- Use config plugins for custom fontsimports-design-system-folder- Organize design system importsjs-hoist-intl- Hoist Intl object creation
How to Use
Read individual rule files for detailed explanations and code examples:
rules/list-performance-virtualize.md
rules/animation-gpu-properties.mdEach rule file contains:
- Brief explanation of why it matters
- Incorrect code example with explanation
- Correct code example with explanation
- Additional context and references
Full Compiled Document
For the complete guide with all rules expanded: AGENTS.md
© vercel-labs, 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 38 other files in .agents/skills/vercel-react-native-skills of vercel-labs/openreview.
- SKILL.md
- AGENTS.md
- README.md
- rules/animation-derived-value.md
- rules/animation-gesture-detector-press.md
- rules/animation-gpu-properties.md
- rules/design-system-compound-components.md
- rules/fonts-config-plugin.md
- rules/imports-design-system-folder.md
- rules/js-hoist-intl.md
- rules/list-performance-callbacks.md
- rules/list-performance-function-references.md
- rules/list-performance-images.md
- rules/list-performance-inline-objects.md
- rules/list-performance-item-expensive.md
- rules/list-performance-item-memo.md
- rules/list-performance-item-types.md
- rules/list-performance-virtualize.md
- rules/monorepo-native-deps-in-app.md
- rules/monorepo-single-dependency-versions.md
- … and 19 more
Open the folder on GitHubat commit 672deb2
Used in 18 other repositories
We found 20 copies of this SKILL.md (exact, near-identical or edited) in other folders, from 17 other GitHub owners. This page covers the copy in vercel-labs/openreview, which our catalogue first saw on October 7, 2026.
- vercel-labs/agent-skillsskills/react-native-skills
- JetBrains/skillsreact-native-skills
- shepherdjerred/monorepopackages/dotfiles/dot_agents/skills/react-native-guidelines
- CherryHQ/cherry-studio-app.agents/skills/vercel-react-native-skills
- fcakyon/claude-codex-settingsplugins/react-skills/skills/react-native-skills
- julianromli/ai-skillsskills/react-native-skills
- guanyang/open-agent-hubskills/react-native-skills
- GravityPoet/ChordVox.agents/skills/vercel-react-native-skills
- Jeric-X/syncclipboard-mobile.claude/skills/vercel-react-native-skills
- gronxb/codex-relay.agents/skills/vercel-react-native-skills
- fujioky/reach.agents/skills/vercel-react-native-skills
- VelaPayments/vela-payments.agents/skills/vercel-react-native-skills
- secondsky/claude-skillsplugins/react-native-skills/skills/react-native-skills
- CraftOS-dev/CraftBotskills/vercel-react-native-skills
- aiskillstore/marketplaceskills/vercel-labs/vercel-react-native-skills
- Asymmetric-al/core.agents/skills/vercel-react-native-skills.claude/skills/vercel-react-native-skills+1 more
- ECNU-ICALK/AutoSkillSkillBank/Common/vercel-labs-agent-skills/react-native-skills
- lingxling/awesome-skills-cnvercel-labs-agent-skills/skills/react-native-skills
Compare with similar skills
React Native 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 Best Practices this skillvercel-labs/openreview | 1.7k | 17 repos | ~1.1k | Automated safety check: Pass | MIT | |
| React Native Experttech-leads-club/agent-skills | 7k | — | ~3.2k | Automated safety check: Pass | CC-BY-4.0 | |
| React Native ExpertJeffallan/claude-skills | 12k | — | ~1.7k | Automated safety check: Pass | MIT | |
| Argent Metro Debuggerbbplayer-app/BBPlayer | 1.1k | — | ~3.4k | Automated safety check: Pass | MIT | |
| ThemingCode-with-Beto/skills | 141 | — | ~2.5k | Automated safety check: Pass | None | |
| UniwindCherryHQ/cherry-studio-app | 4k | — | ~20k | Automated safety check: Warn | AGPL-3.0 |
Similar skills
React Native Expert
Jeffallan/claude-skills
Builds React Native and Expo apps for iOS and Android: Expo Router navigation, FlatList tuning, platform-specific code and build error recovery.
Argent Metro Debugger
bbplayer-app/BBPlayer
Debug a JS runtime via CDP using argent debugger tools. An agent skill from bbplayer-app/BBPlayer.
Theming
Code-with-Beto/skills
Scaffold a unified, cross-platform color theme system into an Expo Router app.
Uniwind
CherryHQ/cherry-studio-app
Uniwind — Tailwind CSS v4 styling for React Native. An agent skill from CherryHQ/cherry-studio-app.
Mobile Accessibility
Community-Access/accessibility-agents
React Native, Expo, iOS and Android: labels, roles and touch targets.
More from vercel-labs/openreview
- Official
Web Interface Guidelines Reviewer
vercel-labs/openreview
Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my…
- Official
Next Cache Components
vercel-labs/openreview
Next.js 16 Cache Components - PPR, use cache directive, cacheLife, cacheTag, updateTag
- Official
Next Best Practices
vercel-labs/openreview
Next.js best practices - file conventions, RSC boundaries, data patterns, async APIs, metadata, error handling, route handlers, image/font optimization, bundling
- Official
Next Upgrade
vercel-labs/openreview
Upgrade Next.js to the latest version following official migration guides and codemods
Related
Works with
Categories
Questions about React Native Best Practices
What does React Native Best Practices do?
A prioritized rule set for React Native and Expo apps covering list performance, animation, navigation, UI patterns, state, rendering, monorepos and configuration. The skill bundles rules for React Native and Expo applications, ranked by impact: list performance is critical, animation, navigation and UI patterns are high, state management, rendering and monorepo structure are medium, and configuration such as fonts and imports is low. Each rule has its own file under rules/, named with a prefix per category, such as list-performance-, animation- and ui-.
When should I use React Native Best Practices?
React Native Best Practices fits situations like: building React Native or Expo components; tuning list and scroll performance in a mobile app; writing Reanimated animations that stay smooth; configuring native modules, fonts or a monorepo with native dependencies.
How do I install React Native Best Practices in Claude Code?
Run `npx skills add vercel-labs/openreview --skill vercel-react-native-skills -a claude-code`. Or copy the skill folder (.agents/skills/vercel-react-native-skills in vercel-labs/openreview) into .claude/skills/vercel-react-native-skills in your project. Claude Code loads it when a task matches its description.
How do I install React Native Best Practices in Codex?
Run `npx skills add vercel-labs/openreview --skill vercel-react-native-skills -a codex`. Or copy the skill folder (.agents/skills/vercel-react-native-skills in vercel-labs/openreview) into .agents/skills/vercel-react-native-skills in your project. Codex loads it when a task matches its description.
Can I use React Native 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 vercel-labs/openreview --skill vercel-react-native-skills -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/vercel-react-native-skills, .gemini/skills/vercel-react-native-skills, .github/skills/vercel-react-native-skills and .opencode/skills/vercel-react-native-skills in your project.
What does React Native Best Practices need to run?
SKILL.md names no scripts, command-line tools or credentials: React Native Best Practices is instructions for the agent only.
Does React Native 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 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 Best Practices use?
React Native 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 Best Practices use?
About 1.1k tokens (SKILL.md is roughly 4.4k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.
What are the alternatives to React Native Best Practices?
Skills that share tags, products or a category with React Native Best Practices: React Native Expert (tech-leads-club/agent-skills, 7k stars), React Native Expert (Jeffallan/claude-skills, 12k stars), Argent Metro Debugger (bbplayer-app/BBPlayer, 1.1k stars) and Theming (Code-with-Beto/skills, 141 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains React Native Best Practices?
vercel-labs (a GitHub organization, an official publisher) maintains it in vercel-labs/openreview, which has 1,698 GitHub stars. The repository holds 5 skills in this directory. The repository was last updated on March 6, 2026.
Source: vercel-labs/openreview on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.