SkillRepo
Sign InSign Up
Catalog
vercel-labs/vercel-react-native-skills

vercel-labs

vercel-react-native-skills

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.

globalMIT
author:vercel
version:1.0.0
0installs0uses—~1.1k
v1.1Saved Apr 20, 2026

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

Files41
41 files · 151.0 KB

Select a file to preview

Overall Score

87/100

Grade

A

Excellent

Safety

94

Quality

89

Clarity

85

Completeness

84

Summary

A comprehensive React Native best practices guide containing 35+ rules across 13 categories (core rendering, list performance, animation, navigation, state management, UI patterns, and more). Organized as both a quick reference (SKILL.md) and compiled expanded guide (AGENTS.md), it provides detailed explanations, incorrect/correct code examples, and impact metrics to guide LLMs and agents in optimizing React Native and Expo applications.

Detected Capabilities

Categorized performance optimization rules with priority levelsSide-by-side incorrect/correct code examples for 35+ patternsImpact assessment for each rule (CRITICAL, HIGH, MEDIUM, LOW)Integration guidance for Reanimated, Gesture Handler, Expo RouterList virtualization strategies (LegendList, FlashList)Native UI patterns (modals, menus, navigation)State architecture and React Compiler compatibility patternsMonorepo and design system structural guidance

Trigger Keywords

Phrases that MCP clients use to match this skill to user intent.

react native optimizationlist performancereanimated animationsexpo appmobile performancenative modulesreact native stategesture handling

Risk Signals

INFO

Referenced external documentation and third-party libraries (react-native-reanimated, expo-image, zeego, react-navigation)

metadata.json references, throughout rule files
INFO

Code examples demonstrating anti-patterns (incorrect implementations)

All rule files, marked with **Incorrect** sections
INFO

Guidance on native module configuration in monorepo packages

rules/monorepo-native-deps-in-app.md, rules/monorepo-single-dependency-versions.md

Referenced Domains

External domains referenced in skill content, detected by static analysis.

docs.expo.devdocs.swmansion.comexample.comgithub.comlegendapp.comoss.callstack.comreact.devreactnative.devreactnavigation.orgzeego.dev

Use Cases

  • Optimizing React Native list performance and virtualization
  • Building performant Expo and React Native applications
  • Implementing animations with Reanimated and gesture handling
  • Structuring state management and avoiding common pitfalls
  • Configuring native modules and monorepo dependencies
  • Code review and refactoring guidance for mobile apps

Quality Notes

  • STRENGTH: Excellent structure with clear priority levels (CRITICAL → LOW) and impact descriptions for every rule
  • STRENGTH: Comprehensive side-by-side examples (Incorrect vs Correct) make patterns immediately actionable
  • STRENGTH: Consistent frontmatter with title, impact, impactDescription, and tags across all rule files
  • STRENGTH: Table of contents in AGENTS.md mirrors rule organization perfectly, enabling easy navigation
  • STRENGTH: Links to authoritative sources (React, React Native, Expo, Reanimated docs) for deeper learning
  • STRENGTH: Rules cover both performance (list, animation, scroll) and architectural concerns (state, design system, monorepo)
  • WEAKNESS: Some rules reference specific third-party libraries (Zeego, Galeria, Legend List) without discussing alternatives or tradeoffs
  • WEAKNESS: React Compiler rules (8.1, 8.2) would benefit from clearer guidance on when to apply (feature detection or version pinning)
  • WEAKNESS: No explicit guidance on handling backward compatibility when refactoring toward these patterns in existing codebases
  • NOTE: Rule files consistently include 'Reference' links but some use example.com placeholder instead of real links (list-performance-callbacks.md)
Model: claude-haiku-4-5-20251001Analyzed: Apr 20, 2026

Reviews

Add this skill to your library to leave a review.

No reviews yet

Be the first to share your experience.

Version History

v1.1

Content updated

2026-04-20

Latest
v1.0

No changelog

2026-04-03

Add vercel-labs/vercel-react-native-skills to your library

Get Started Free

Command Palette

Search for a command to run...