vercel-react-native-skills
React Native and Expo best practices for performant mobile apps across list rendering, animations, navigation, and native modules.
- Covers eight rule categories prioritized by impact: list performance (FlashList, memoization, callback stability), animations (GPU properties, derived values), navigation, UI patterns, state management, rendering, monorepo structure, and configuration
- List performance rules address critical concerns like virtualizing large lists, optimizing images, and avoiding inline objects that trigger unnecessary re-renders
- Animation guidance focuses on GPU-accelerated properties (transform, opacity) and Reanimated patterns; navigation recommends native stack and tab navigators over JavaScript alternatives
- Includes rules for modern UI patterns: expo-image for all images, Pressable over TouchableOpacity, native modals, and safe area handling in ScrollViews
React Native Skills
Comprehensive best practices for React Native and Expo applications. Contains rules across multiple categories covering performance, animations, UI patterns, and platform-specific optimizations.
When to Apply
Reference these guidelines when:
- Building React Native or Expo apps
- Optimizing list and scroll performance
- Implementing animations with Reanimated
- Working with images and media
- Configuring native modules or fonts
- Structuring monorepo projects with native dependencies
Rule Categories by Priority
More from vercel-labs/agent-skills
vercel-react-best-practices
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.
392.2Kweb-design-guidelines
Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices".
313.5Kvercel-composition-patterns
React composition patterns that scale. Use when refactoring components with
170.2Kdeploy-to-vercel
Deploy applications and websites to Vercel. Use when the user requests deployment actions like "deploy my app", "deploy and give me the link", "push this live", or "create a preview deployment".
48.8Kvercel-react-view-transitions
Guide for implementing smooth, native-feeling animations using React's View Transition API (`<ViewTransition>` component, `addTransitionType`, and CSS view transition pseudo-elements). Use this skill whenever the user wants to add page transitions, animate route changes, create shared element animations, animate enter/exit of components, animate list reorder, implement directional (forward/back) navigation animations, or integrate view transitions in Next.js. Also use when the user mentions view transitions, `startViewTransition`, `ViewTransition`, transition types, or asks about animating between UI states in React without third-party animation libraries.
31.9Kvercel-cli-with-tokens
Deploy and manage projects on Vercel using token-based authentication. Use when working with Vercel CLI using access tokens rather than interactive login — e.g. "deploy to vercel", "set up vercel", "add environment variables to vercel".
31.4K
More in Mobile
sleek-design-mobile-apps
Mobile-first design patterns for iOS and Android: gestures, safe areas, and native feel
sleekdotdesign/agent-skillsbuilding-native-ui
Expo native UI components: lists, modals, tabs, bottom sheets, and haptics
expo/skillsnative-data-fetching
Data fetching for native apps: offline caching, background refresh, and sync patterns
expo/skillsexpo-tailwind-setup
NativeWind and Tailwind setup in Expo with correct native class handling
expo/skillsupgrading-expo
Expo SDK upgrade guide covering breaking changes, native module compatibility, and migration steps
expo/skills