skills.rest
jgwill
jgwillCOMMUNITY
Explore all skills by this author →
𝕏@jgipubGitHub

vercel-react-native-skills

Enforce crash-safe rendering and virtualized list patterns in React Native and Expo applications.

1|2|Updated Apr 13, 2026
Search Tags:#performance optimization#code refactoring#react native#expo#reanimated#virtualized lists#native UI patterns
One-click install
npx skills add https://github.com/jgwill/dotagents --skill vercel-react-native-skills-jgwill
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vercel-react-native-skills
Source: https://github.com/jgwill/dotagents/tree/main/skills/vercel-react-native-skills
Command: npx skills add https://github.com/jgwill/dotagents --skill vercel-react-native-skills-jgwill

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It prevents performance regressions and runtime crashes in React Native codebases by standardizing high-impact patterns for rendering, lists, animations, and native UI integration.

Core Features & Use Cases

  • Crash-proof rendering: Enforces rules like wrapping strings in Text components and avoiding falsy JSX patterns that can hard-crash production.
  • List performance at scale: Guides virtualized list usage (LegendList/FlashList), stable references, memoization-friendly props, lightweight item rendering, and heterogeneous item typing.
  • Animation and native UX: Recommends GPU-friendly animation properties, correct Reanimated patterns, and native navigators/modals/menus for smoother platform-consistent behavior.
  • Expo-ready optimizations: Encourages expo-image usage, blurhash/placeholder patterns, and build-time font loading via config plugins.

Quick Start

Apply the vercel-react-native-skills guidance to your code changes by asking an AI to refactor the relevant React Native component(s) to follow these rules and report any high-impact deviations.

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 fix React Native crashes caused by falsy JSX patterns?▼

To prevent React Native crashes from falsy JSX, the Skill enforces crash-proof rendering rules like wrapping strings in Text components and avoiding unstable falsy patterns that hard-crash production apps.

What's the best way to optimize React Native virtualized lists for large data sets?▼

Optimizing React Native virtualized lists involves enforcing stable references, memoization-friendly props, and lightweight item rendering patterns using tools like LegendList or FlashList to handle heterogeneous data at scale.

How does Reanimated work with GPU-accelerated animations in Expo?▼

Reanimated in Expo provides GPU-friendly animation by enforcing correct patterns that constrain animation properties to the GPU thread, ensuring smoother platform-consistent behavior for native UI elements.

Can I use expo-image with blurhash placeholders for faster React Native loading?▼

Yes, you can use expo-image with blurhash placeholders in React Native. The Skill encourages this pattern alongside build-time font loading via config plugins to achieve Expo-ready performance optimizations.

Why do my React Native components re-render unnecessarily during code refactoring?▼

Unnecessary React Native re-renders during refactoring often stem from unstable references and non-memoization-friendly props. Enforcing stable references and GPU-accelerated animation constraints mitigates these performance regressions.

Related Skills

Explore More Software Engineering Skills→
amplitudeamplitude
28

integration-expo

Automates Amplitude integration for Expo applications using React Native SDK and AsyncStorage.

Official
Advanced
msichtermanmsichterman

vercel-react-native-skills

Apply React Native and Expo performance best practices to components, lists, animations, and images.

Community
Advanced
princejoogieprincejoogie
30

vercel-react-native-skills

Document React Native and Expo performance optimization patterns for lists, animations, images, and native modules.

Community
Advanced
benaorbenaor

react-performance

Profile React Native apps to identify and optimize rendering, startup, and memory bottlenecks.

Community
Advanced