react-native-skills · diff

v1.0.0 to git:20260228.ebd03ee

24 added, 107 removed. Audit B to A.

---

- name: vercel-react-native-skills

- description:

- 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.

- license: MIT

- metadata:

- author: vercel

- version: '1.0.0'

+ name: react-native-skills

+ description: "React Native and Expo best practices for performance, UI patterns, and native integrations."

---

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

- | -------- | ---------------- | -------- | -------------------- |

- | 4 | UI Patterns | HIGH | `ui-` |

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

+ # react-native-skills

- ### 7. Monorepo (MEDIUM)

+ ## Purpose

- - `monorepo-native-deps-in-app` - Keep native dependencies in app package

- - `monorepo-single-dependency-versions` - Use single versions across packages

+ React Native and Expo best practices for performance, UI patterns, and native integrations.

- ### 8. Configuration (LOW)

+ ## Routing

- - `fonts-config-plugin` - Use config plugins for custom fonts

- - `imports-design-system-folder` - Organize design system imports

- - `js-hoist-intl` - Hoist Intl object creation

+ - Use when: Use when the user asks to react Native and Expo best practices for performance, UI patterns, and native integrations.

+ - Do not use when: Do not use when the request is asking for planning documents, high-level strategy, or non-executable discussion; use the relevant planning or design workflow instead.

+ - Outputs: Outcome from react-native-skills: task-specific result plus concrete action notes.

+ - Success criteria: Returns concrete actions and decisions matching the requested task, with no fabricated tool-side behavior.

- ## How to Use

+ ## Trigger Examples

- Read individual rule files for detailed explanations and code examples:

+ ### Positive

- ```

- rules/list-performance-virtualize.md

- rules/animation-gpu-properties.md

- ```

+ - Use the react-native-skills skill for this request.

+ - Help me with react-native-skills.

+ - Use when the user asks to react Native and Expo best practices for performance, UI patterns, and native integrations.

+ - react-native-skills: provide an actionable result.

- Each rule file contains:

+ ### Negative

- - Brief explanation of why it matters

- - Incorrect code example with explanation

- - Correct code example with explanation

- - Additional context and references

+ - Do not use when the request is asking for planning documents, high-level strategy, or non-executable discussion; use the relevant planning or design workflow instead.

+ - Do not use react-native-skills for unrelated requests.

+ - This request is outside react-native-skills scope.

+ - This is conceptual discussion only; no tool workflow is needed.

- ## Full Compiled Document

+ ## Runtime Prompt

- For the complete guide with all rules expanded: `AGENTS.md`

+ - Current runtime prompt length: 4180 characters.

+ - Runtime prompt is defined directly in `../react-native-skills.json`.