Kipt

React Native skill: Vercel's React Native and Expo rules for coding agents

Vercel's React Native skill gives your agent 36 React Native and Expo rules for lists, animation, navigation and native UI. What it does and how to install it.

By the Kipt team · Updated 24 October 2026

Source: vercel-labs/agent-skills · Maintainer: Vercel · License: MIT (per the SKILL.md frontmatter and repo README; no LICENSE file in the repo) · Checked: 24 October 2026

What is the React Native skill?

The React Native skill gives your coding agent Vercel Engineering's rules for building fast React Native and Expo apps: virtualize every list, animate only transform and opacity, use native navigators and native menus, and avoid the rendering mistakes that crash a release build. It is for developers who write mobile code with an agent and want it to reach for the right library and pattern the first time.

It is the most-installed skill in vercel-labs/agent-skills after the React best practices, web design guidelines and composition patterns skills. It lives in the react-native-skills folder, but its frontmatter name is vercel-react-native-skills, the name you install it by. The description reads: "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."

As of 24 October 2026, its skills.sh page listed about 252,900 installs (snapshot, 24 October 2026).

What does it do?

The SKILL.md tells the agent to reference the rules 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, and structuring monorepos with native dependencies. It indexes the rules by priority:

Priority Category Impact Example rules
1 List performance Critical Virtualize lists, memoize items, stable callbacks
2 Animation High Animate transform and opacity, useDerivedValue
3 Navigation High Native stack and native tabs
4 UI patterns High expo-image, native menus and modals, Pressable
5 State management Medium Minimize subscriptions, dispatch updaters
6 Rendering Medium Text inside <Text>, no falsy &&
7 Monorepo Medium Native deps in the app package, single versions
8 Configuration Low Font config plugins, hoisting Intl objects

Some of the rules, as the rule files put them:

  • Virtualize any list. Use LegendList or FlashList instead of a ScrollView with mapped children, "even for short lists."
  • Never use && with values that might be falsy. If count is 0 or name is an empty string, React Native tries to render it as text outside a <Text> component, which the rule says causes "a hard crash in production." Use a ternary, an explicit boolean or an early return, and turn on the react/jsx-no-leaked-render lint rule.
  • Animate transform and opacity only. Animating width, height, margin or padding triggers layout on every frame.
  • Use native navigators. @react-navigation/native-stack or expo-router's default stack, and native tabs, instead of the JavaScript stack and bottom tabs.
  • Use native UI primitives. expo-image instead of Image, zeego for native menus, native <Modal> form sheets instead of JS bottom sheets, Galeria for image lightboxes.
  • Use Pressable. Never TouchableOpacity or TouchableHighlight; for animated press states, use GestureDetector with Reanimated shared values.
  • Never track scroll position in useState. Use a shared value or a ref.
  • Keep native dependencies in the app package in a monorepo, because autolinking only scans the app's node_modules.

Each rule file has an explanation, an incorrect example and a correct example, plus links to library docs where relevant.

What's in the folder:

  • SKILL.md: the priority table and the rule index.
  • rules/: 36 rule files, plus _sections.md and _template.md for maintainers.
  • AGENTS.md: all rules compiled into one document of about 2,900 lines.
  • README.md and metadata.json: contributor notes and document metadata, with references to react.dev, reactnative.dev, the Reanimated, Gesture Handler and Expo docs, LegendList, Galeria and zeego.

How do you install the React Native skill?

skills.sh lists this command for the skills CLI:

npx skills add https://github.com/vercel-labs/agent-skills --skill vercel-react-native-skills

Use vercel-react-native-skills, not the folder name; the CLI matches --skill against the name in the frontmatter. Add -g to install for every project, or -a claude-code to skip the agent prompt. npx skills add vercel-labs/agent-skills with no --skill, the command in the repo README, lets you pick from all of Vercel's skills.

For Claude Code, the skill lands in .claude/skills/vercel-react-native-skills/ in your project, or ~/.claude/skills/vercel-react-native-skills/ with -g, the standard Claude Code skill locations. Codex and Cursor read the same SKILL.md format; see Codex skills and Cursor skills.

claude.ai. Custom skills upload as a ZIP of the skill folder under Customize, then Skills (Claude Help Center). The repo has no prebuilt ZIP for this skill. The Agent Skills spec says the name must match the parent folder, so rename the folder to vercel-react-native-skills before zipping.

How do you use it?

Because the description names React Native, Expo, mobile performance and native platform APIs, the agent should load it for most mobile work. You can name it to be sure: "use the React Native skill."

Example prompts (suggestions, not quotes from the repo):

  • "The feed screen drops frames when scrolling. Check it against the list performance rules and fix the worst issues first."
  • "Replace our JS bottom sheet with a native form sheet modal."
  • "Find every {x && <Component />} where x could be 0 or an empty string, and fix them."
  • "Add a press animation to the card component using GestureDetector and Reanimated."
  • "We're moving to a monorepo. Check where our native dependencies are installed."

The skill installs nothing. Its rules recommend libraries such as FlashList or LegendList, Reanimated, Gesture Handler, expo-image, zeego and Galeria; adding them is a change to your app, so expect the agent to ask or to propose the install.

Tips and limits

  • The rule counts disagree. The rules/ folder held 36 rule files when checked. The SKILL.md index lists 33 (it leaves out scroll-position-no-state, state-ground-truth and design-system-compound-components), metadata.json says "35+ rules across 13 categories", and the repo README still describes "16 rules across 7 sections" under the older name react-native-guidelines.
  • Impact labels differ too. The SKILL.md rates list performance Critical and rendering Medium; _sections.md rates rendering Critical and list performance High. The individual rule files carry their own impact line, which is the more specific guide.
  • The rules are opinionated. "Never use TouchableOpacity" and "use a virtualizer even for short lists" are Vercel's defaults, not React Native requirements. If your app has a reason to differ, say so in your CLAUDE.md.
  • Library advice ages. Navigation, modal and styling rules name specific packages and APIs, such as React Navigation v7's native form sheet and experimental_backgroundImage. Check the library's current docs before a large migration.
  • Security. The folder has no scripts. As of 24 October 2026, its skills.sh page showed Pass from Gen Agent Trust Hub, Socket and Snyk.
  • License. The SKILL.md frontmatter says license: MIT and the repo README ends with "MIT", but the repo has no LICENSE file.

Save it in your Kipt library

In Kipt, open Skills and paste the skill's GitHub folder link into the import box. Kipt reads the SKILL.md and the rules/ folder; for a repo with many skills, like this one, it shows a list to pick from. You can also drop the folder or a .zip. Your skills live in your own private GitHub repo and install into Claude Code or Codex with one command:

npx skills add https://github.com/<you>/<repo>.git --all -g

Kipt is not affiliated with Vercel.

Similar skills

Questions

What is the Vercel React Native skill?

It is an official Vercel Agent Skill, named vercel-react-native-skills in its frontmatter and stored in the react-native-skills folder of vercel-labs/agent-skills. It gives your agent React Native and Expo best practices for list performance, animation, navigation, native UI, state, rendering, monorepos and configuration, each with incorrect and correct code.

How do I install the React Native skill?

Run npx skills add https://github.com/vercel-labs/agent-skills --skill vercel-react-native-skills. Use the frontmatter name, because the skills CLI matches --skill against it, not against the folder name react-native-skills.

Does the React Native skill require Expo?

No. The description covers both React Native and Expo, and most rules apply to any React Native app. Some rules recommend Expo packages such as expo-image, or expo-router's native stack and tabs, and others recommend libraries like Reanimated, Gesture Handler, FlashList or LegendList.

How many rules does the React Native skill have?

As of 24 October 2026, the rules folder held 36 rule files. The SKILL.md index lists 33 of them in 8 categories, the repo README still describes 16 rules in 7 sections, and metadata.json says 35+ rules across 13 categories, so the counts in the repo disagree.

Does the skill run any code?

No. The folder holds Markdown rule files, a compiled AGENTS.md, a README and a metadata file. As of 24 October 2026, its skills.sh page showed Pass from Gen Agent Trust Hub, Socket and Snyk.

More in Skill directory

All guides

Keep your prompts and skills in one place, in your own GitHub. Install every skill with one command.

Get started

Kipt is an independent product, not affiliated with or endorsed by Anthropic, OpenAI, Cursor or GitHub. Claude, ChatGPT, Codex, Cursor and GitHub are trademarks of their owners.