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 range of topics including list management, animation implementation, navigation, UI patterns, state management, and monorepo configuration. The rules are organized by priority to help developers maintain consistent coding standards and architectural patterns across their mobile projects.

What it does

Provides rules for optimizing list and scroll behavior
Offers guidance on implementing animations with Reanimated
Defines patterns for UI components and native module usage
Suggests state management and rendering practices
Outlines configuration standards for monorepo projects

When to use it

When building or maintaining React Native and Expo applications
When implementing complex animations or list views
When structuring projects with native dependencies
When seeking standardized approaches to common mobile UI patterns

Advantages

Categorized rules based on development priority
Covers both core React Native and Expo-specific patterns
Includes guidance for modern React compiler compatibility
Provides clear prefixes for rule identification

Usage examples

“How should I handle large lists in my React Native app?”: The agent will provide guidelines on using FlashList, memoizing items, and stabilizing callback references to manage list rendering.
“What are the best practices for animations in Expo?”: The agent will suggest animating only transform and opacity properties and using specific gesture detectors for better interaction handling.

Install

Download the skill as a ZIP:
https://autogineer.com/agent-skills/jetbrains/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 AutoGineer861 B
README.md4.9 KiB
SKILL.md4.5 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/react-state-minimize.md

title: Minimize State Variables and Derive Values impact: MEDIUM impactDescription: fewer re-renders, less state drift tags: state, derived-state, hooks, optimization

Minimize State Variables and Derive Values

Use the fewest state variables possible. If a value can be computed from existing state or props, derive it during render instead of storing it in state. Redundant state causes unnecessary re-renders and can drift out of sync.

Incorrect (redundant state):

function Cart({ items }: { items: Item[] }) {
  const [total, setTotal] = useState(0)
  const [itemCount, setItemCount] = useState(0)

  useEffect(() => {
    setTotal(items.reduce((sum, item) => sum + item.price, 0))
    setItemCount(items.length)
  }, [items])

  return (
    <View>
      <Text>{itemCount} items</Text>
      <Text>Total: ${total}</Text>
    </View>
  )
}

Correct (derived values):

function Cart({ items }: { items: Item[] }) {
  const total = items.reduce((sum, item) => sum + item.price, 0)
  const itemCount = items.length

  return (
    <View>
      <Text>{itemCount} items</Text>
      <Text>Total: ${total}</Text>
    </View>
  )
}

Another example:

// Incorrect: storing both firstName, lastName, AND fullName
const [firstName, setFirstName] = useState('')
const [lastName, setLastName] = useState('')
const [fullName, setFullName] = useState('')

// Correct: derive fullName
const [firstName, setFirstName] = useState('')
const [lastName, setLastName] = useState('')
const fullName = `${firstName} ${lastName}`

State should be the minimal source of truth. Everything else is derived.

Reference: Choosing the State Structure

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/react-state-minimize.md

title: Minimize State Variables and Derive Values impact: MEDIUM impactDescription: fewer re-renders, less state drift tags: state, derived-state, hooks, optimization

Minimize State Variables and Derive Values

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/react-state-minimize.md

title: Minimize State Variables and Derive Values impact: MEDIUM impactDescription: fewer re-renders, less state drift tags: state, derived-state, hooks, optimization

Minimize State Variables and Derive Values

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