vercel-react-native-skills

Provide React Native and Expo performance best practices for lists, animations, and navigation.

Updated Dec 13, 2025
One-click install
npx skills add https://github.com/Posteriot/makalah-app --skill vercel-react-native-skills-posteriot
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: vercel-react-native-skills
Source: https://github.com/Posteriot/makalah-app/tree/main/.agents/skills/vercel-react-native-skills
Command: npx skills add https://github.com/Posteriot/makalah-app --skill vercel-react-native-skills-posteriot

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Captures Vercel's curated React Native and Expo best practices so teams no longer guess how to keep mobile investments performant, safe, and idiomatic across screens.

Core Features & Use Cases

  • Performance rules by priority: Covers critical list performance, high-impact animation and navigation guidance, and medium-impact rendering, UI, and state patterns so you know what to fix first.
  • Operational playbooks: Includes detailed instructions for images, gestures, native modals, compilers, and monorepo configurations, enabling consistent decision-making when refactoring or building new screens.
  • Agent-ready documentation: Serves as a discovery and execution plan for AI agents working on React Native, Expo, or native module tasks by linking to individual rule files and the compiled AGENTS.md.

Quick Start

Review the list-performance, animation, and navigation rules before optimizing a slow React Native screen.

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 optimize a slow React Native list with heavy rendering?

Optimize slow React Native lists by applying list virtualization best practices to ensure only visible items render on screen. This Skill provides prioritized performance guidance for list-heavy screens, covering rendering trade-offs and configuration rules to maintain smooth scrolling.

What is the best way to handle React Native animations without dropping frames?

Handle React Native animations without dropping frames by applying Reanimated patterns that run animations on the native UI thread. This Skill outlines high-impact animation guidance and gesture handling rules to prevent JavaScript thread blocking during interactions.

Can I use native navigation patterns in an Expo monorepo setup?

Yes, you can use native navigation patterns in an Expo monorepo setup. This Skill provides native navigation guidance alongside monorepo configuration playbooks, ensuring consistent routing decisions and safe native dependency management across shared packages.

When do I need to replace React Native image components for better performance?

Replace standard React Native image components when optimizing critical screen load times by adopting expo-image for faster rendering and caching. This Skill specifies expo-image usage as part of its UI best practices to improve image loading performance.

Does this React Native performance guidance apply to both Expo and bare native modules?

Yes, this performance guidance applies to both Expo and bare native module workflows. The Skill covers configuration trade-offs, native dependency management, and operational playbooks for images, gestures, and compilers across both mobile environments.