vercel-react-native-skills

Applies React Native and Expo performance rules to mobile app code.

Updated May 22, 2026
One-click install
npx skills add https://github.com/viniciuscs84/sdd-toolkit --skill vercel-react-native-skills-viniciuscs84
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: vercel-react-native-skills
Source: https://github.com/viniciuscs84/sdd-toolkit/tree/main/skills/vercel-react-native-skills
Command: npx skills add https://github.com/viniciuscs84/sdd-toolkit --skill vercel-react-native-skills-viniciuscs84

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? React Native apps frequently suffer from scroll jank, unnecessary re-renders, runtime crashes, and slow animations caused by common coding mistakes. This Skill provides a structured rulebook of 35+ best practices so AI agents and developers can generate, refactor, and review React Native and Expo code that performs well on real devices. ## Core Features & Use Cases - Prioritized Rule Set: 35+ rules across 13 categories ranked by impact, from CRITICAL rendering crashes (falsy && rendering, text outside Text components) to HIGH-impact list virtualization and animation patterns, down to LOW-impact font and import optimizations. - Incorrect vs. Correct Examples: Every rule includes concrete TypeScript/TSX code comparisons showing the broken pattern and the fixed implementation, covering FlashList/LegendList, Reanimated, Gesture Handler, expo-image, and native navigators. - Use Case: When building a product feed screen, apply the list performance rules to virtualize the list, pass primitive props to memoized items, compress images, and keep items lightweight—eliminating scroll jank before it ships. ## Quick Start Review my React Native product list screen and apply the list performance and animation rules to fix any re-render or scroll issues.

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 improve FlatList performance in React Native?

Replace ScrollView with a virtualized list like LegendList or FlashList, pass primitive props to memoized list items, hoist callbacks to the list root, and avoid creating inline objects in renderItem. Keep list items lightweight by moving queries and computations to the parent.

What causes React Native apps to crash with conditional rendering?

Using {value && <Component />} crashes when value is an empty string or 0, because React Native tries to render the falsy value as text outside a Text component. Use ternaries, explicit boolean coercion, or early returns instead.

Should I use Reanimated useDerivedValue or useAnimatedReaction?

Use useDerivedValue when deriving one shared value from another, since it tracks dependencies automatically and returns a usable value. Reserve useAnimatedReaction for side effects like haptics or runOnJS calls that produce no value.

Does this work with the React Compiler enabled?

Yes, several rules address React Compiler compatibility specifically. Destructure functions from hooks early in render, and use .get() and .set() on Reanimated shared values instead of accessing .value directly.

Why is my React Native scroll animation dropping frames?

Storing scroll position in useState causes render thrashing because scroll events fire rapidly. Track position with a Reanimated shared value for animations or a ref for non-reactive tracking, and animate only transform and opacity properties.