All skills
vercel-labs avatar

/react-native-skills

@757ccb4 official
by Vercel Labsvercel-labs/agent-skills32k stars
2,784

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.

  • 42 files
  • 155.3 KB
  • MIT
  • Updated 8 months ago
  • GitHub

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

This session only. Nothing lands on disk.

rules_sections.md

≈557 tokens on demand. Your agent reads this file only when SKILL.md points to it.

Sections

This file defines all sections, their ordering, impact levels, and descriptions. The section ID (in parentheses) is the filename prefix used to group rules.


1. Core Rendering (rendering)

Impact: CRITICAL
Description: Fundamental React Native rendering rules. Violations cause runtime crashes or broken UI.

2. List Performance (list-performance)

Impact: HIGH
Description: Optimizing virtualized lists (FlatList, LegendList, FlashList) for smooth scrolling and fast updates.

3. Animation (animation)

Impact: HIGH
Description: GPU-accelerated animations, Reanimated patterns, and avoiding render thrashing during gestures.

4. Scroll Performance (scroll)

Impact: HIGH
Description: Tracking scroll position without causing render thrashing.

5. Navigation (navigation)

Impact: HIGH
Description: Using native navigators for stack and tab navigation instead of JS-based alternatives.

6. React State (react-state)

Impact: MEDIUM
Description: Patterns for managing React state to avoid stale closures and unnecessary re-renders.

7. State Architecture (state)

Impact: MEDIUM
Description: Ground truth principles for state variables and derived values.

8. React Compiler (react-compiler)

Impact: MEDIUM
Description: Compatibility patterns for React Compiler with React Native and Reanimated.

9. User Interface (ui)

Impact: MEDIUM
Description: Native UI patterns for images, menus, modals, styling, and platform-consistent interfaces.

10. Design System (design-system)

Impact: MEDIUM
Description: Architecture patterns for building maintainable component libraries.

11. Monorepo (monorepo)

Impact: LOW
Description: Dependency management and native module configuration in monorepos.

12. Third-Party Dependencies (imports)

Impact: LOW
Description: Wrapping and re-exporting third-party dependencies for maintainability.

13. JavaScript (js)

Impact: LOW
Description: Micro-optimizations like hoisting expensive object creation.

14. Fonts (fonts)

Impact: LOW
Description: Native font loading for improved performance.

Source: SKILL.md on GitHub

No third-party reports yet.

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

Last checked against GitHub last month.

Steadyupdated 8 months ago
metadata
{
  "author": "vercel",
  "version": "1.0.0"
}
  • Performance
  • react-native
  • expo
  • animations
  • list-virtualization
  • mobile
  • reanimated
  • native-modules
  • ui-patterns
  • monorepo

README badge

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

Provides React Native and Expo best practices organized by performance impact, covering list virtualization, animations with Reanimated, navigation patterns, and native module configuration. Use when optimizing list rendering, implementing GPU-accelerated animations, or structuring React Native projects with native dependencies.

Generated from the current SKILL.md.

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?
The skill focuses on React Native Reanimated for animations, with rules like using useDerivedValue and animating only transform and opacity properties.
Does this cover list performance optimization?
Yes. List performance is the highest priority category, covering FlashList virtualization, memoization, callback stabilization, and image optimization in lists.
Will this skill help with monorepo setup?
Yes, but only for monorepos with native dependencies. The skill includes guidance on structuring packages and managing dependency versions across a monorepo.
Does this cover state management frameworks like Redux or Zustand?
No. The skill covers only general state subscription patterns and dispatcher patterns, not specific state management libraries.

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