vercel-react-native-skills

Optimize React Native and Expo codebases with performance and architecture best practices.

1|Updated Jun 27, 2026

Search Tags:#performance #navigation #monorepo #animations #react native #expo

Ready to run

npx skills add https://github.com/babually/bongo-template --skill vercel-react-native-skills-babually

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: vercel-react-native-skills
Source: https://github.com/babually/bongo-template/tree/main/.agents/skills/vercel-react-native-skills
Command: npx skills add https://github.com/babually/bongo-template --skill vercel-react-native-skills-babually

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps teams build and maintain React Native and Expo apps with fewer crashes, smoother interactions, and more consistent architecture. It provides opinionated guidance for avoiding common mobile performance pitfalls and for aligning code with native platform behavior.

Core Features & Use Cases

Performance Rules: Covers list virtualization, stable references, lightweight list items, image optimization, scroll handling, and React Compiler compatibility.
UI and Native Patterns: Guides animations, gestures, navigation, safe areas, modals, fonts, menus, and design-system composition for mobile-first UX.
Monorepo and Architecture Guidance: Supports shared packages, native dependency installation, dependency version control, and reusable import patterns.
Use Case: A developer can use this Skill to refactor a laggy feed screen, choose the right navigator, or standardize component patterns across a React Native monorepo.

Quick Start

Ask the AI to review your React Native screen or component and rewrite it using these best practices.

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 a laggy React Native feed screen with slow list scrolling?▼

To fix a laggy React Native feed screen, apply list virtualization rules, stabilize references, and optimize images for lightweight list items. This ensures smooth scroll handling and prevents dropped frames during rendering.

What's the best way to structure a React Native monorepo with shared packages?▼

The best way to structure a React Native monorepo is by standardizing reusable import patterns and managing native dependency versions across shared packages. This architecture guidance prevents version conflicts and ensures consistent module behavior.

Does this Expo optimization guidance work with Reanimated and gesture-handler patterns?▼

Yes, this Expo optimization guidance fully adheres to Reanimated and gesture-handler patterns. It provides opinionated rules for mobile-first UX, ensuring animations and gestures align with native platform behavior without causing crashes.

How do I choose the right React Native navigator for my app architecture?▼

To choose the right React Native navigator, evaluate your navigation patterns against safe areas, modals, and design-system composition rules. This guidance aligns your choice with Expo conventions and native platform constraints to avoid routing conflicts.

Why does my React Native app crash when setting up native modules in a monorepo?▼

React Native apps often crash during native module setup due to improper dependency installation or version mismatches in a monorepo. Applying strict dependency version control and following Expo conventions resolves these native runtime conflicts.

Can I use React Compiler compatibility rules for my existing Expo codebase?▼

Yes, you can apply React Compiler compatibility rules to an existing Expo codebase. The optimization process checks stable references and scroll handling to ensure your components meet the compiler's performance requirements.