Vercel React Native Skills

What it does

This skill provides a comprehensive set of best practices for developing React Native and Expo applications. It offers guidelines across various categories, including performance optimization, animations, UI patterns, and platform-specific considerations. The goal is to help developers build efficient, well-structured, and performant mobile user interfaces.

When to use it

• When building new React Native or Expo apps from scratch.
• To optimize the performance of existing lists and scroll views within your application.
• When implementing animations using Reanimated.
• For guidance on working with images and media assets in a performant way.

Key capabilities

• Performance Optimization: Guidelines for virtualizing lists (using FlashList), memoizing components, optimizing image loading, and more.
• Animation Best Practices: Recommendations for efficient animations using Reanimated, including animating only specific properties and leveraging useDerivedValue.
• Navigation Guidance: Suggestions for utilizing native navigation components.
• UI Pattern Standardization: Provides a set of UI patterns to ensure consistency across your application.
• Categorized Rules: Organizes best practices by priority (Critical, High, Medium, Low) with associated prefixes for easy reference.

Example prompts

• "What are the best practices for optimizing list performance in React Native?"
• "How should I implement animations efficiently using Reanimated?"
• "Give me guidelines for working with images and media in a React Native app."
• “Show me the rules related to navigation.”

Tips & gotchas

• This skill focuses on best practices; it doesn't provide code generation or debugging capabilities.
• Pay close attention to the "Priority" assigned to each rule category, as critical issues should be addressed first.
• The skill provides guidance for React Native and Expo projects—ensure your project aligns with these technologies.