vercel-react-native-skills

Audit React Native and Expo projects for list, animation, and navigation anti-patterns.

Updated Apr 5, 2026
One-click install
npx skills add https://github.com/rizaldiem/digital-invitation-web_V2 --skill vercel-react-native-skills-rizaldiem
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: vercel-react-native-skills
Source: https://github.com/rizaldiem/digital-invitation-web_V2/tree/main/.windsurf/skills/vercel-react-native-skills
Command: npx skills add https://github.com/rizaldiem/digital-invitation-web_V2 --skill vercel-react-native-skills-rizaldiem

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill captures actionable best practices and anti-patterns to prevent runtime crashes, scrolling jank, and poor native integration in React Native and Expo apps, enabling more predictable performance and maintainable codebases.

Core Features & Use Cases

  • List Performance & Virtualization: Rules to avoid inline objects, hoist callbacks, memoize items, and use virtualizers like FlashList or LegendList for smooth scrolling in feeds and galleries.
  • Animation & Gestures: Guidance to use GPU-accelerated transforms, Reanimated derived values, and GestureDetector for UI-thread press animations to reduce frame drops.
  • Native Integration & Architecture: Recommendations for native navigators, monorepo native dependency placement, embedded fonts, and design-system imports to ensure correct autolinking and platform behavior.

Quick Start

Audit my React Native/Expo project for list, animation, and navigation anti-patterns and produce a prioritized list of concrete fixes and code examples.

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 scrolling jank in React Native lists?

Fix React Native scrolling jank by hoisting callbacks, avoiding inline objects, and memoizing items. Use virtualizers like FlashList or LegendList to ensure smooth scrolling performance in feeds and galleries.

Does Reanimated work with React Compiler?

Reanimated works with React Compiler. Apply Reanimated derived values and GPU-accelerated transforms via GestureDetector to execute press animations on the UI thread and reduce frame drops.

What is the best way to manage native dependencies in an Expo monorepo?

Manage Expo monorepo native dependencies by placing native packages correctly to ensure proper autolinking. Correct placement guarantees expected platform behavior and stable native integration across your packages.

Why does my React Native app crash during runtime?

React Native runtime crashes often stem from unstable object references and poor native integration. Stabilize object references, use native navigators, and ensure embedded font configuration to prevent crashes.

Can I audit my React Native project for performance anti-patterns?

You can audit a React Native project for performance anti-patterns. The process evaluates component rendering, virtualized lists, and Reanimated animations to produce a prioritized list of concrete fixes and code examples.