vercel-react-native-skills

SKILL.md

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