vercel-react-native-skills

Enforce React Native and Expo best practices for rendering, lists, animations, and state.

1|Updated May 5, 2026
One-click install
npx skills add https://github.com/yashs33244/my-mac-claude --skill vercel-react-native-skills-yashs33244
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: vercel-react-native-skills
Source: https://github.com/yashs33244/my-mac-claude/tree/main/skills/vercel-labs/react-native-skills
Command: npx skills add https://github.com/yashs33244/my-mac-claude --skill vercel-react-native-skills-yashs33244

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

It prevents crashes and performance regressions in React Native and Expo apps by enforcing safe rendering, efficient list virtualization, and correct animation/state patterns.

Core Features & Use Cases

Use it while building or refactoring React Native UI components to fix common runtime issues (like rendering strings in the wrong place) and to optimize scrolling performance (like stable references and lightweight list items). It also guides implementing Reanimated animations correctly (GPU-friendly properties and proper shared-value derivation) and handling navigation, images, and React state with production-grade best practices. Example use case: during a performance review, apply the rules to refactor a slow feed screen that uses ScrollView and inline objects, then verify the changes align with the repo’s “impact-first” priorities.

Quick Start

Apply the vercel-react-native-skills rules to the current React Native codebase by scanning for the category-prefixed violations (rendering-, list-performance-, animation-, scroll-, and ui-/state- rules) and rewriting the identified components to match the provided incorrect vs. correct patterns.

Frequently Asked Questions about vercel-react-native-skills

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I prevent React Native list virtualization crashes and scrolling bottlenecks?

Prevent React Native list virtualization crashes by enforcing stable references for list items, replacing ScrollView with virtualized lists, and removing inline objects from render props to optimize scrolling performance.

Why does wrapping strings directly in React Native cause runtime crashes?

Wrapping strings directly in React Native causes runtime crashes because raw text must be explicitly wrapped in a Text component to render safely and avoid violating core rendering rules.

What's the best way to implement GPU-friendly animations with Reanimated?

The best way to implement GPU-friendly Reanimated animations is to target GPU-accelerated properties and properly derive shared values, ensuring smooth gesture-driven UI without blocking the JavaScript thread.

How do I refactor a slow Expo feed screen to improve mobile UI performance?

Refactor a slow Expo feed screen by applying an impact-first priority set: moving to virtualized lists, stabilizing references, and correcting state management patterns to eliminate UI bottlenecks.

Does this React Native performance skill apply to Expo applications?

Yes, this React Native performance skill applies directly to Expo applications, enforcing safe rendering, correct list virtualization, and efficient animation patterns across both frameworks.

When should I update React state safely across mobile screens in React Native?

Update React state safely across mobile screens by using production-grade patterns for deriving shared and UI state, preventing performance regressions during navigation and component rendering.