Vercel React Native Skills

VercelOfficialCreated by vercel

Skill
Guidelines
Software development
MIT
No issues found

From the author

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.

— the description by vercel

AutoGineer summary

Written by AutoGineer from the skill’s own files, not by the author

This skill provides a structured set of guidelines for React Native and Expo development. It covers a wide range of topics including list performance, animation techniques, navigation, UI patterns, state management, and monorepo configuration. The rules are organized by priority to help developers maintain consistent and efficient codebases when building mobile applications.

What it does

Provides prioritized rules for React Native and Expo development
Offers guidance on optimizing list and scroll performance
Defines best practices for implementing animations and gestures
Outlines standards for UI patterns and native component usage
Suggests strategies for state management and rendering efficiency
Includes configuration advice for monorepo structures and fonts

When to use it

When building or maintaining React Native and Expo applications
During the optimization phase of mobile app development
When implementing complex animations or list views
When structuring projects with native dependencies
When establishing coding standards for a mobile development team

Advantages

Centralizes best practices for React Native and Expo
Prioritizes critical performance areas like list rendering
Provides clear prefixes for categorizing and identifying rules
Offers actionable guidance for common mobile development challenges

Usage examples

“How should I optimize a long list in my React Native app?”: The agent will suggest using FlashList, memoizing list items, and stabilizing callback references based on the list performance guidelines.
“What is the recommended way to handle animations in React Native?”: The agent will provide rules for animating only transform and opacity properties and using specific gesture detectors.

Install

Download the skill as a ZIP:
https://autogineer.com/agent-skills/vercel-labs/vercel-react-native-skills/download

Unzip it into the cross-client skills folder of your project:

mkdir -p .agents/skills && unzip vercel-react-native-skills.zip -d .agents/skills

Documentation by vercel

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

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

Files

AGENTS.md72.0 KiB
ATTRIBUTION.mdAdded by AutoGineer890 B
README.md4.9 KiB
SKILL.md4.3 KiB
metadata.json896 B
rules/_sections.md2.2 KiB
rules/_template.md631 B
rules/animation-derived-value.md1.3 KiB
rules/animation-gesture-detector-press.md2.5 KiB
rules/animation-gpu-properties.md2.0 KiB
rules/design-system-compound-components.md1.6 KiB
rules/fonts-config-plugin.md1.4 KiB
rules/imports-design-system-folder.md1.4 KiB
rules/js-hoist-intl.md1.6 KiB
rules/list-performance-callbacks.md1.0 KiB
rules/list-performance-function-references.md4.0 KiB
rules/list-performance-images.md1.4 KiB
rules/list-performance-inline-objects.md2.3 KiB
rules/list-performance-item-expensive.md2.4 KiB
rules/list-performance-item-memo.md2.2 KiB
rules/list-performance-item-types.md2.7 KiB
rules/list-performance-virtualize.md1.7 KiB
rules/monorepo-native-deps-in-app.md1.1 KiB
rules/monorepo-single-dependency-versions.md1.3 KiB
rules/navigation-native-navigators.md4.8 KiB
rules/react-compiler-destructure-functions.md1.2 KiB
rules/react-compiler-reanimated-shared-values.md1.2 KiB
rules/react-state-dispatcher.md2.2 KiB
rules/react-state-fallback.md1.7 KiB
rules/react-state-minimize.md1.7 KiB
rules/rendering-no-falsy-and.md1.8 KiB
rules/rendering-text-in-text-component.md697 B
rules/scroll-position-no-state.md1.9 KiB
rules/state-ground-truth.md2.1 KiB
rules/ui-expo-image.md1.6 KiB
rules/ui-image-gallery.md2.5 KiB
rules/ui-measure-views.md2.2 KiB
rules/ui-menus.md4.5 KiB
rules/ui-native-modals.md1.8 KiB
rules/ui-pressable.md1.5 KiB
rules/ui-safe-area-scroll.md1.5 KiB
rules/ui-scrollview-content-inset.md1.3 KiB
rules/ui-styling.md2.2 KiB

rules/list-performance-function-references.md

title: Optimize List Performance with Stable Object References impact: CRITICAL impactDescription: virtualization relies on reference stability tags: lists, performance, flatlist, virtualization

Optimize List Performance with Stable Object References

Don't map or filter data before passing to virtualized lists. Virtualization relies on object reference stability to know what changed—new references cause full re-renders of all visible items. Attempt to prevent frequent renders at the list-parent level.

Where needed, use context selectors within list items.

Incorrect (creates new object references on every keystroke):

function DomainSearch() {
  const { keyword, setKeyword } = useKeywordZustandState()
  const { data: tlds } = useTlds()

  // Bad: creates new objects on every render, reparenting the entire list on every keystroke
  const domains = tlds.map((tld) => ({
    domain: `${keyword}.${tld.name}`,
    tld: tld.name,
    price: tld.price,
  }))

  return (
    <>
      <TextInput value={keyword} onChangeText={setKeyword} />
      <LegendList
        data={domains}
        renderItem={({ item }) => <DomainItem item={item} keyword={keyword} />}
      />
    </>
  )
}

Correct (stable references, transform inside items):

const renderItem = ({ item }) => <DomainItem tld={item} />

function DomainSearch() {
  const { data: tlds } = useTlds()

  return (
    <LegendList
      // good: as long as the data is stable, LegendList will not re-render the entire list
      data={tlds}
      renderItem={renderItem}
    />
  )
}

function DomainItem({ tld }: { tld: Tld }) {
  // good: transform within items, and don't pass the dynamic data as a prop
  // good: use a selector function from zustand to receive a stable string back
  const domain = useKeywordZustandState((s) => s.keyword + '.' + tld.name)
  return <Text>{domain}</Text>
}

Updating parent array reference:

Creating a new array instance can be okay, as long as its inner object references are stable. For instance, if you sort a list of objects:

// good: creates a new array instance without mutating the inner objects
// good: parent array reference is unaffected by typing and updating "keyword"
const sortedTlds = tlds.toSorted((a, b) => a.name.localeCompare(b.name))

return <LegendList data={sortedTlds} renderItem={renderItem} />

Even though this creates a new array instance sortedTlds, the inner object references are stable.

With zustand for dynamic data (avoids parent re-renders):

const useSearchStore = create<{ keyword: string }>(() => ({ keyword: '' }))

function DomainSearch() {
  const { data: tlds } = useTlds()

  return (
    <>
      <SearchInput />
      <LegendList
        data={tlds}
        // if you aren't using React Compiler, wrap renderItem with useCallback
        renderItem={({ item }) => <DomainItem tld={item} />}
      />
    </>
  )
}

function DomainItem({ tld }: { tld: Tld }) {
  // Select only what you need—component only re-renders when keyword changes
  const keyword = useSearchStore((s) => s.keyword)
  const domain = `${keyword}.${tld.name}`
  return <Text>{domain}</Text>
}

Virtualization can now skip items that haven't changed when typing. Only visible items (~20) re-render on keystroke, rather than the parent.

Deriving state within list items based on parent data (avoids parent re-renders):

For components where the data is conditional based on the parent state, this pattern is even more important. For example, if you are checking if an item is favorited, toggling favorites only re-renders one component if the item itself is in charge of accessing the state rather than the parent:

function DomainItemFavoriteButton({ tld }: { tld: Tld }) {
  const isFavorited = useFavoritesStore((s) => s.favorites.has(tld.id))
  return <TldFavoriteButton isFavorited={isFavorited} />
}

Note: if you're using the React Compiler, you can read React Context values directly within list items. Although this is slightly slower than using a Zustand selector in most cases, the effect may be negligible.

Requirements and compatibility

Works with: Claude Code, Claude apps, OpenAI Codex, GitHub Copilot, Cursor, Gemini CLI, Kiro, OpenCode, Goose, Amp, Roo Code, JetBrains Junie, Factory Droid, Devin (ex-Windsurf), Mistral Vibe, OpenHands, Letta

“Works with” means the tool reads the open Agent Skills format; a skill written for one tool may use features others lack.

Security

No issues found by our static scan· No issues found

A static scan is not a guarantee. Skills are third-party content: review a skill before you let an agent use it.

Attribution and licence

Created by

vercel

Publisher

Vercel (Official)

Source

vercel-labs/agent-skills · skills/react-native-skills · commit 1a2c79d

Licence

MIT License (redistribution allowed)

ATTRIBUTION.md (written by AutoGineer)

Synced

2026-11-09

AutoGineer is not affiliated with or endorsed by vercel or Vercel.

Download ZIP

The ZIP holds the skill’s files, its licence files and an ATTRIBUTION.md. Download vercel-react-native-skills.zip