skilld
All skills
vercel-labs avatar

/vercel-react-native-skills

@f2d73db
by Vercel Labsvercel-labs/openreview1.7k stars
118

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.

Ask your Agent

Use this Skill: https://skilld.dev/gh/vercel-labs/openreview/vercel-react-native-skills

This session only. Nothing lands on disk.

SKILL.md

≈81 tokens always: the name and description. ≈1k when used: this file. ≈38k more on demand in 38 files.

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

Source: SKILL.md on GitHub

Third-party checks

No alerts16d4 checks · Risk SAFE
  • Gen Agent Trust Hub16d

    This skill provides a comprehensive set of React Native and Expo best practices optimized for AI agents and LLMs. It focuses on performance optimization, UI patterns, and proper state management within mobile applications. The skill is entirely composed of documentation and guidelines without any executable scripts or hidden network operations, making it safe for use.

  • Socket16d

    No alerts

  • Snyk16d

    Risk: LOW · No issues

  • Runlayer6mo

    39 files scanned · No issues

Provenance

Signed by skilld at f2d73db. This ties the file your Agent reads to that commit on GitHub. It does not review the instructions.

Last checked against GitHub 2 months ago.

Dormantupdated 7 months ago

Capability

metadata
{
  "author": "vercel",
  "version": "1.0.0"
}

Topics

  • Performance
  • react-native
  • expo
  • animations
  • reanimated
  • flashlist
  • mobile
  • native-modules
  • monorepo

README badge

README badge for vercel-labs/openreview/vercel-react-native-skills

What it does

Provides React Native and Expo best practices organized by priority, covering list performance, animations, navigation, UI patterns, and native module configuration. Use when building or optimizing React Native components, implementing Reanimated animations, or configuring native dependencies in Expo projects.

Generated from the current SKILL.md.

Frequently asked

Does this skill cover both React Native and Expo?
Yes. The skill provides best practices for React Native and Expo applications, including Expo-specific patterns like expo-image and config plugins.
What animation library does this skill assume?
Reanimated. The skill includes rules for animating with Reanimated, such as using useDerivedValue and limiting animations to transform and opacity properties.
Does this skill address monorepo setups?
Yes. It includes rules for structuring monorepo projects with native dependencies, such as keeping native dependencies in the app package and maintaining single dependency versions across packages.
What is the priority focus of this skill?
List performance is marked as critical priority, covering virtualization with FlashList, memoization, and image optimization. Animation and navigation are high priority.

Generated from the current SKILL.md. These answers refresh after source changes.