vercel-react-native-skills

Files (43)

• AGENTS.md
• README.md
• SKILL.md
• metadata.json
• README.md · rules/
• _sections.md · rules/
• _template.md · rules/
• animation-derived-value.md · rules/
• animation-gesture-detector-press.md · rules/
• animation-gpu-properties.md · rules/
• design-system-compound-components.md · rules/
• fonts-config-plugin.md · rules/
• imports-design-system-folder.md · rules/
• js-hoist-intl.md · rules/
• list-performance-callbacks.md · rules/
• list-performance-function-references.md · rules/
• list-performance-images.md · rules/
• list-performance-inline-objects.md · rules/
• list-performance-item-expensive.md · rules/
• list-performance-item-memo.md · rules/
• list-performance-item-types.md · rules/
• list-performance-virtualize.md · rules/
• monorepo-native-deps-in-app.md · rules/
• monorepo-single-dependency-versions.md · rules/
• navigation-native-navigators.md · rules/
• react-compiler-destructure-functions.md · rules/
• react-compiler-reanimated-shared-values.md · rules/
• react-state-dispatcher.md · rules/
• react-state-fallback.md · rules/
• react-state-minimize.md · rules/
• rendering-no-falsy-and.md · rules/
• rendering-text-in-text-component.md · rules/
• scroll-position-no-state.md · rules/
• state-ground-truth.md · rules/
• ui-expo-image.md · rules/
• ui-image-gallery.md · rules/
• ui-measure-views.md · rules/
• ui-menus.md · rules/
• ui-native-modals.md · rules/
• ui-pressable.md · rules/
• ui-safe-area-scroll.md · rules/
• ui-scrollview-content-inset.md · rules/
• ui-styling.md · rules/

SKILL.md (first lines)

# 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`

From tdealer01-crypto/tdealer01-crypto-dsg-control-plane, MIT.

More from tdealer01-crypto/tdealer01-crypto-dsg-control-plane