Skip to main content
affpapa.org
RU EN
skill Claude Code CX Codex Cursor GitHub Copilot

vercel-react-native-skills — Claude Code skill for React Native

A rules pack for React Native and Expo work: lists, animations, navigation, native modules. Load it so your agent makes mobile changes the same way every time.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓ 
npx skills add vercel-labs/agent-skills --skill vercel-react-native-skills -a claude-code
npx skills add vercel-labs/agent-skills --skill react-native-skills -a claude-code
Open on GitHub

What vercel-react-native-skills does

The rules come in eight categories, ordered by how much damage a mistake does. List performance comes first and is marked critical: FlashList for long lists, memoized rows, stable callbacks, expensive work moved out of the item. Then animations limited to transform and opacity, navigation on native stack and native tabs, UI patterns such as expo-image and Pressable. State, rendering, monorepos and configuration sit lower.

Each rule has its own file under rules/, named after the category prefix: list-performance-virtualize, animation-gpu-properties, ui-measure-views. A file carries the reasoning, a wrong code sample with an explanation, and a corrected version. All of it is compiled into AGENTS.md if you would rather read one document.

It ships as plain guidance for the agent. No scripts run and nothing is added to your project. Install it with npx skills add for Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI or OpenCode. Worth doing before you start chasing list jank, since the rules apply while the code is being written. On a project outside React Native and Expo, skip it.

What it helps with

  • make a long list scroll on FlashList
  • cut re-renders in list rows
  • keep animations on transform and opacity
  • swap a JS navigator for the native stack
  • place native dependencies correctly in a monorepo

Example prompts for the agent

  • Check this task list against the FlashList rules and drop inline style objects
  • Rewrite the card animation with useDerivedValue instead of setState
  • Set up a custom font through an Expo config plugin

How to install vercel-react-native-skills

1Skills CLI (Vercel)

npx skills add vercel-labs/agent-skills --skill vercel-react-native-skills -a claude-code
npx skills add vercel-labs/agent-skills --skill react-native-skills -a claude-code

2Manually: put the files in place

~/.claude/skills/react-native-skills/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/react-native-skills/

From the same set6

The whole set →
vercel-composition-patterns vercel A rule set that pushes your agent away from boolean props and toward compound components, shared context and state lifted into providers. Claude Code CX Codex Cursor +1 416,700installs vercel-react-view-transitions vercel This skill guides React View Transition API work for route changes, shared elements, component enter and exit, and list reordering. It fits UI state changes without a third-party animation library. Claude Code CX Codex Cursor +1 166,700installs vercel-cli-with-tokens vercel Lets your agent drive the Vercel CLI with an access token instead of an interactive login: find the token, link the project, ship a preview, edit env vars. Claude Code CX Codex Cursor +1 135,200installs vercel-optimize vercel-labs A skill that audits Vercel spend and speed: it gathers usage and route metrics first, then recommends code and config changes. Claude Code CX Codex Cursor +1 110,000installs writing-guidelines vercel A skill that reviews docs and prose against a written style guide. You get findings with line numbers instead of hunting through the file yourself. Claude Code CX Codex Cursor +1 105,900installs

Similar

animate-expo emilkowalski Builds React Native and Expo animations using Reanimated and Gesture Handler. Helps keep motion on the UI thread and avoid dropped frames on physical devices. Claude Code CX Codex Cursor +1 135,900installs mobile-native emilkowalski Strips the tells that give a web app away on a phone: sticky hover, tap highlight flash, the 100vh bug. Claude Code CX Codex Cursor +1 84,500installs aso coreyhaines31 Audits App Store and Google Play listings against store optimization standards. Helps uncover gaps in metadata, visual assets, and conversion. Claude Code CX Codex Cursor +1 74,900installs swiftui-pro Paul Hudson Reviews SwiftUI code for deprecated APIs, data-flow issues, accessibility gaps, and performance concerns. Use it during feature work or code review. Claude Code CX Codex Cursor +1 35,000installs orca-emulator stablyai Controls booted iOS Simulators inside Orca with a live device view. Handy for running gestures, hardware buttons, accessibility tree checks, and UI verification. Claude Code CX Codex Cursor +1 5,800installs orca-emulator-android stablyai Lets the agent drive an adb-connected Android emulator or phone from inside Orca: taps, swipes, APK install, logcat. Handy for running a flow on a real device. Claude Code CX Codex Cursor +1 5,600installs

Questions about vercel-react-native-skills

How do I install vercel-react-native-skills in Claude Code?

Run npx skills add vercel-labs/agent-skills --skill vercel-react-native-skills -a claude-code. The skill file then sits at ~/.claude/skills/react-native-skills/SKILL.md.

What does vercel-react-native-skills do?

It hands the agent ranked rules for React Native and Expo: list performance, animations, navigation, UI patterns, state, rendering, monorepos, configuration. The agent leans on them while writing or editing mobile code.

Can I read a single rule instead of the whole thing?

Yes. Each rule is a file in rules/ named with its category prefix, like list-performance-item-memo or ui-pressable. AGENTS.md holds the full compiled set.

Source text

SKILL.md · MIT 
---
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
  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 lists
- `list-performance-item-memo` - Memoize list item components
- `list-performance-callbacks` - Stabilize callback references
- `list-performance-inline-objects` - Avoid inline style objects
- `list-performance-function-references` - Extract functions outside render
- `list-performance-images` - Optimize images in lists
- `list-performance-item-expensive` - Move expensive work outside items
- `list-performance-item-types` - Use item types for heterogeneous lists

### 2. Animation (HIGH)

- `animation-gpu-properties` - Animate only transform and opacity
- `animation-derived-value` - Use useDerivedValue for computed animations
- `animation-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 images
- `ui-image-gallery` - Use Galeria for image lightboxes
- `ui-pressable` - Use Pressable over TouchableOpacity
- `ui-safe-area-scroll` - Handle safe areas in ScrollViews
- `ui-scrollview-content-inset` - Use contentInset for headers
- `ui-menus` - Use native context menus
- `ui-native-modals` - Use native modals when possible
- `ui-measure-views` - Use onLayout, not measure()
- `ui-styling` - Use StyleSheet.create or Nativewind

### 5. State Management (MEDIUM)

- `react-state-minimize` - Minimize state subscriptions
- `react-state-dispatcher` - Use dispatcher pattern for callbacks
- `react-state-fallback` - Show fallback on first render
- `react-compiler-destructure-functions` - Destructure for React Compiler
- `react-compiler-reanimated-shared-values` - Handle shared values with compiler

### 6. Rendering (MEDIUM)

- `rendering-text-in-text-component` - Wrap text in Text components
- `rendering-no-falsy-and` - Avoid falsy && for conditional rendering

### 7. Monorepo (MEDIUM)

- `monorepo-native-deps-in-app` - Keep native dependencies in app package
- `monorepo-single-dependency-versions` - Use single versions across packages

### 8. Configuration (LOW)

- `fonts-config-plugin` - Use config plugins for custom fonts
- `imports-design-system-folder` - Organize design system imports
- `js-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.md
```

Each 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 · MIT · vercel-labs/agent-skills

See also

Project sponsors

Companies that keep this analytics open
Gold sponsor
Nutra.Club

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor