Vercel React Native Skills

React Native Guidelines

A structured repository for creating and maintaining React Native Best Practices optimized for agents and LLMs.

Structure

• rules/ - Individual rule files (one per rule)

  • _sections.md - Section metadata (titles, impacts, descriptions)

  • _template.md - Template for creating new rules

  • area-description.md - Individual rule files

• metadata.json - Document metadata (version, organization, abstract)

• AGENTS.md - Compiled output (generated)

Rules

Core Rendering (CRITICAL)

• rendering-text-in-text-component.md - Wrap strings in Text components

• rendering-no-falsy-and.md - Avoid falsy && operator in JSX

List Performance (HIGH)

• list-performance-virtualize.md - Use virtualized lists (LegendList, FlashList)

• list-performance-function-references.md - Keep stable object references

• list-performance-callbacks.md - Hoist callbacks to list root

• list-performance-inline-objects.md - Avoid inline objects in renderItem

• list-performance-item-memo.md - Pass primitives for memoization

• list-performance-item-expensive.md - Keep list items lightweight

• list-performance-images.md - Use compressed images in lists

• list-performance-item-types.md - Use item types for heterogeneous lists

Animation (HIGH)

• animation-gpu-properties.md - Animate transform/opacity instead of layout

• animation-gesture-detector-press.md - Use GestureDetector for press animations

• animation-derived-value.md - Prefer useDerivedValue over useAnimatedReaction

Scroll Performance (HIGH)

• scroll-position-no-state.md - Never track scroll in useState

Navigation (HIGH)

• navigation-native-navigators.md - Use native stack and native tabs

React State (MEDIUM)

• react-state-dispatcher.md - Use functional setState updates

• react-state-fallback.md - State should represent user intent only

• react-state-minimize.md - Minimize state variables, derive values

State Architecture (MEDIUM)

• state-ground-truth.md - State must represent ground truth

React Compiler (MEDIUM)

• react-compiler-destructure-functions.md - Destructure functions early

• react-compiler-reanimated-shared-values.md - Use .get()/.set() for shared values

User Interface (MEDIUM)

• ui-expo-image.md - Use expo-image for optimized images

• ui-image-gallery.md - Use Galeria for lightbox/galleries

• ui-menus.md - Native dropdown and context menus with Zeego

• ui-native-modals.md - Use native Modal with formSheet

• ui-pressable.md - Use Pressable instead of TouchableOpacity

• ui-measure-views.md - Measuring view dimensions

• ui-safe-area-scroll.md - Use contentInsetAdjustmentBehavior

• ui-scrollview-content-inset.md - Use contentInset for dynamic spacing

• ui-styling.md - Modern styling patterns (gap, boxShadow, gradients)

Design System (MEDIUM)

• design-system-compound-components.md - Use compound components

Monorepo (LOW)

• monorepo-native-deps-in-app.md - Install native deps in app directory

• monorepo-single-dependency-versions.md - Single dependency versions

Third-Party Dependencies (LOW)

• imports-design-system-folder.md - Import from design system folder

JavaScript (LOW)

• js-hoist-intl.md - Hoist Intl formatter creation

Fonts (LOW)

• fonts-config-plugin.md - Load fonts natively at build time

Creating a New Rule

1. Copy rules/_template.md to rules/area-description.md

2. Choose the appropriate area prefix:

   • rendering- for Core Rendering

   • list-performance- for List Performance

   • animation- for Animation

   • scroll- for Scroll Performance

   • navigation- for Navigation

   • react-state- for React State

   • state- for State Architecture

   • react-compiler- for React Compiler

   • ui- for User Interface

   • design-system- for Design System

   • monorepo- for Monorepo

   • imports- for Third-Party Dependencies

   • js- for JavaScript

   • fonts- for Fonts

3. Fill in the frontmatter and content

4. Ensure you have clear examples with explanations

Rule File Structure

Each rule file should follow this structure:

---
title: Rule Title Here
impact: MEDIUM
impactDescription: Optional description
tags: tag1, tag2, tag3
---

## Rule Title Here

Brief explanation of the rule and why it matters.

**Incorrect (description of what's wrong):**

```tsx
// Bad code example
```

Correct (description of what's right):

// Good code example

Reference: Link

## File Naming Convention

- Files starting with `_` are special (excluded from build)
- Rule files: `area-description.md` (e.g., `animation-gpu-properties.md`)
- Section is automatically inferred from filename prefix
- Rules are sorted alphabetically by title within each section

## Impact Levels

- `CRITICAL` - Highest priority, causes crashes or broken UI
- `HIGH` - Significant performance improvements
- `MEDIUM` - Moderate performance improvements
- `LOW` - Incremental improvements