Vercel React Native Skills

tl;dr: the mobile half of vercel-labs/agent-skills. Eight priority bands covering list perf (FlashList, not FlatList), animation (transform/opacity only), navigation (native stacks, not JS navigators), UI patterns (expo-image, native modals), state, rendering, monorepo structure, and config. Load this when the target is iOS/Android and the user complains about scroll jank, dropped frames, or a sluggish UI thread.

What it actually does

SKILL.md (version 1.0.0, 2026-09-09) is a prioritised index. The agent reads the matching rules/<prefix>-*.md file when the user signals a mobile job:

The CRITICAL band is list-performance-. Eight rules, all about not letting the JS thread block scroll: list-performance-virtualize (use @shopify/flash-list, not FlatList, for any list over a few dozen rows), list-performance-item-memo, list-performance-callbacks (stable useCallback refs), list-performance-inline-objects (no { marginTop: 8 } inside renderItem), list-performance-images (expo-image with cachePolicy="memory-disk").

HIGH bands: animate only transform and opacity (animation-gpu-properties — anything else hits the JS thread on every frame), use useDerivedValue instead of computing inside the animated callback (animation-derived-value), use Gesture.Tap instead of Pressable when gesture handler is already wired (animation-gesture-detector-press), prefer @react-navigation/native-stack and bottom-tabs over JS navigators (navigation-native-navigators).

UI patterns band codifies the Expo defaults: expo-image for every image, Galeria for lightboxes, Pressable over TouchableOpacity, native context menus, native modals, onLayout instead of the imperative measure(), StyleSheet.create or Nativewind.

When the agent should load it

The description field enumerates the trigger phrases:

• “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”

If the user says “FlatList is janky” or “this animation drops frames”, this is the right skill. If they’re building for web, load react-best-practices instead. If the complaint is component API shape (boolean props, compound components), load composition-patterns — same repo, web-only.

Install

# installs the whole vercel-labs/agent-skills pack (includes this skill)
npx skills add vercel-labs/agent-skills

The npx skills add invocation is what the upstream README documents. If your host does not speak the Agent Skills loader (or you want just this one skill), clone the repo and point the agent at the file:

git clone https://github.com/vercel-labs/agent-skills
# Claude Code / Cursor pick up SKILL.md from:
#   ~/.claude/skills/react-native-skills/SKILL.md
#   .claude/skills/react-native-skills/SKILL.md
# or any path the host's skill loader watches

The published GitHub release for this skill ships as a .skill artifact (zip with SKILL.md + rules/). Unzip into the same path if your host expects that layout.

Gotchas

• Web rules do not transfer. Agents trained on react-best-practices will reach for React.memo, useMemo, useCallback everywhere. On mobile the JS-thread cost of these often exceeds what they save — list-performance-callbacks is the rule that maps, and even then only inside renderItem. Default to no memoization unless the rule says so.
• animation-gpu-properties is non-negotiable. Animating width, height, top, left, background-color forces a layout pass per frame. The skill is explicit: transform + opacity only. Agents that “just animate the height” will drop frames on low-end Android.
• navigation-native-navigators excludes react-navigation/stack. The JS stack is on the JS thread; the native stack uses react-native-screens and stays on the UI thread. This is the rule most agents miss when porting from a web React background.
• React Compiler interacts with Reanimated. Shared values and worklets need care under the compiler — react-compiler-reanimated-shared-values is the rule. If the project does not use the compiler, skip it.
• Monorepo rules assume Expo + native deps. monorepo-native-deps-in-app keeps native modules in the app package, not in shared libs — autolinking fails otherwise. This bites when lifting web monorepo patterns onto an Expo workspace.
• AGENTS.md is the compiled source of truth. If SKILL.md and rules/*.md ever drift, AGENTS.md is the one to trust. It is not auto-generated at install time.
• sandbox_test.verdict: untested — we read SKILL.md and the README; we did not run an agent through the rule checklist.

Related: Vercel React Best Practices — web sibling, same author and rule format; Vercel Composition Patterns — same repo, architecture patterns that apply to mobile components too; UI Skills catalog — broader routing index for UI jobs across web and mobile.