vercel-react-native-skills

Enforce React Native and Expo performance best practices for lists, animations, and native UI.

Updated Aug 23, 2026
One-click install
npx skills add https://github.com/stellarone/evaluate --skill vercel-react-native-skills-stellarone
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: vercel-react-native-skills
Source: https://github.com/stellarone/evaluate/tree/main/.agents/skills/vercel-react-native-skills
Command: npx skills add https://github.com/stellarone/evaluate --skill vercel-react-native-skills-stellarone

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps prevent common React Native and Expo performance pitfalls (like list jank and animation stutter) by enforcing practical, production-grade best practices during component development and refactoring.

Core Features & Use Cases

  • Performance-safe React Native patterns: Guides you away from crash-prone JSX patterns and into safe rendering practices (e.g., wrapping strings correctly).
  • Virtualized list optimization rules: Improves scrolling performance by enforcing stable references, primitive props for memoization, lightweight list items, and correct use of list virtualizers.
  • Animation and native UI guidance: Promotes GPU-friendly animation properties, correct Reanimated/Reanimated-gesture patterns, and native platform UI choices for smoother UX.

Quick Start

Use the vercel-react-native-skills skill to refactor a React Native screen so its virtualized lists avoid unnecessary re-renders and its animations use GPU-friendly properties.

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 virtualized list scrolling jank and unnecessary re-renders?

Fix React Native list scrolling jank by enforcing stable references, primitive props for memoization, lightweight list items, and correct use of list virtualizers to prevent unnecessary re-renders during component refactoring.

What are the best practices for Reanimated animations in Expo to avoid stutter?

Best practices for Reanimated animations in Expo involve using GPU-friendly animation properties and correct Reanimated-gesture patterns to promote native UI choices, ensuring smoother UX and reducing animation stutter.

Can I use this Skill to refactor existing React Native screens for better performance?

You can refactor existing React Native and Expo screens by applying deterministic rules for list virtualization, stable references, crash-safe JSX rendering, and native UI components to reduce jank and production issues.

Why does my React Native app crash when rendering strings in JSX components?

React Native app crashes during JSX rendering often stem from unsafe patterns; this Skill guides you away from crash-prone JSX patterns and into safe rendering practices like wrapping strings correctly.

Does this Skill work with Expo managed workflow or only bare React Native?

The Skill improves code quality for both React Native and Expo by enforcing performance, rendering, and native-UX best practices across mobile app screens involving scroll behavior, animations, images, and state navigation.