Vercel React Native Skills

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://mp-staging.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/ui-styling.md

title: Modern React Native Styling Patterns impact: MEDIUM impactDescription: consistent design, smoother borders, cleaner layouts tags: styling, css, layout, shadows, gradients

Modern React Native Styling Patterns

Follow these styling patterns for cleaner, more consistent React Native code.

Always use borderCurve: 'continuous' with borderRadius:

// Incorrect
{ borderRadius: 12 }

// Correct – smoother iOS-style corners
{ borderRadius: 12, borderCurve: 'continuous' }

Use gap instead of margin for spacing between elements:

// Incorrect – margin on children
<View>
  <Text style={{ marginBottom: 8 }}>Title</Text>
  <Text style={{ marginBottom: 8 }}>Subtitle</Text>
</View>

// Correct – gap on parent
<View style={{ gap: 8 }}>
  <Text>Title</Text>
  <Text>Subtitle</Text>
</View>

Use padding for space within, gap for space between:

<View style={{ padding: 16, gap: 12 }}>
  <Text>First</Text>
  <Text>Second</Text>
</View>

Use experimental_backgroundImage for linear gradients:

// Incorrect – third-party gradient library
<LinearGradient colors={['#000', '#fff']} />

// Correct – native CSS gradient syntax
<View
  style={{
    experimental_backgroundImage: 'linear-gradient(to bottom, #000, #fff)',
  }}
/>

Use CSS boxShadow string syntax for shadows:

// Incorrect – legacy shadow objects or elevation
{ shadowColor: '#000', shadowOffset: { width: 0, height: 2 }, shadowOpacity: 0.1 }
{ elevation: 4 }

// Correct – CSS box-shadow syntax
{ boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)' }

Avoid multiple font sizes – use weight and color for emphasis:

// Incorrect – varying font sizes for hierarchy
<Text style={{ fontSize: 18 }}>Title</Text>
<Text style={{ fontSize: 14 }}>Subtitle</Text>
<Text style={{ fontSize: 12 }}>Caption</Text>

// Correct – consistent size, vary weight and color
<Text style={{ fontWeight: '600' }}>Title</Text>
<Text style={{ color: '#666' }}>Subtitle</Text>
<Text style={{ color: '#999' }}>Caption</Text>

Limiting font sizes creates visual consistency. Use fontWeight (bold/semibold) and grayscale colors for hierarchy instead.

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.

React Native Architecture
Seth Hobson· Community
Architectural patterns and best practices for building React Native applications with Expo.
Software developmentClaude CodeClaude appsOpenAI Codex+14 more
MITGitHub stars of the source repository42.3k
Frontend Mobile Development Mobile Developer
Seth Hobson· Community
An expert mobile developer persona for building and optimizing cross-platform and native applications.
Software developmentClaude Code
MITGitHub stars of the source repository42.3k
Multi Platform Apps Mobile Developer
Seth Hobson· Community
An expert mobile developer persona for building and optimizing React Native, Flutter, and native iOS or Android applications.
Software developmentClaude Code
MITGitHub stars of the source repository42.3k
iOS Developer
Seth Hobson· Community
An expert iOS developer persona specializing in native Swift, SwiftUI, and the Apple ecosystem.
Software developmentClaude Code
MITGitHub stars of the source repository42.3k
Contact Center Android
AnthropicOfficial
Official integration guide for the Zoom Contact Center SDK on Android.
Software developmentClaude CodeClaude appsOpenAI Codex+14 more
MITGitHub stars of the source repository35.1k
Zoom Video SDK Flutter
AnthropicOfficial
Integrate the Zoom Video SDK into Flutter applications to build custom real-time video session experiences.
Software developmentClaude CodeClaude appsOpenAI Codex+14 more
MITGitHub stars of the source repository35.1k

Download ZIP

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

From the author

AutoGineer summary

What it does

When to use it

Advantages

Usage examples

Install

Documentation by vercel

React Native Skills

When to Apply

Rule Categories by Priority

Quick Reference

1. List Performance (CRITICAL)

2. Animation (HIGH)

3. Navigation (HIGH)

4. UI Patterns (HIGH)

5. State Management (MEDIUM)

6. Rendering (MEDIUM)

7. Monorepo (MEDIUM)

8. Configuration (LOW)

How to Use

Full Compiled Document

Files

rules/ui-styling.md

title: Modern React Native Styling Patterns impact: MEDIUM impactDescription: consistent design, smoother borders, cleaner layouts tags: styling, css, layout, shadows, gradients

Modern React Native Styling Patterns

Requirements and compatibility

Security

Attribution and licence

Download ZIP

From the author

AutoGineer summary

What it does

When to use it

Advantages

Usage examples

Install

Documentation by vercel

React Native Skills

When to Apply

Rule Categories by Priority

Quick Reference

1. List Performance (CRITICAL)

2. Animation (HIGH)

3. Navigation (HIGH)

4. UI Patterns (HIGH)

5. State Management (MEDIUM)

6. Rendering (MEDIUM)

7. Monorepo (MEDIUM)

8. Configuration (LOW)

How to Use

Full Compiled Document

Files

rules/ui-styling.md

title: Modern React Native Styling Patterns impact: MEDIUM impactDescription: consistent design, smoother borders, cleaner layouts tags: styling, css, layout, shadows, gradients

Modern React Native Styling Patterns

Requirements and compatibility

Security

Attribution and licence

Related skills

React Native Architecture

Frontend Mobile Development Mobile Developer

Multi Platform Apps Mobile Developer

iOS Developer

Contact Center Android

Zoom Video SDK Flutter

Download ZIP