DEV Community

Ajmal Hasan
Ajmal Hasan

Posted on

How to Use React Native Best Practices Agent Skills

#javascript #reactnative #performance

Introduction

React Native performance optimization can be complex, with many pitfalls that affect FPS, bundle size, memory usage, and startup time. The react-native-best-practices skill package provides AI coding agents with comprehensive guidelines to automatically detect, suggest, and implement performance optimizations in React Native and Expo applications.

These best practices are packaged as Agent skills that integrate seamlessly into Cursor and other AI-powered coding agents.

When your agent reviews, optimizes, or develops a React Native codebase, it can automatically reference these patterns and suggest fixes based on proven optimization techniques from Callstack's "Ultimate Guide to React Native Optimization."

For detailed information, refer to the official announcement: Announcing: React Native Best Practices for AI Agents

What Are Agent Skills?

Agent skills are knowledge packages that enhance AI coding assistants with domain-specific expertise. Instead of manually searching documentation or remembering optimization patterns, your AI assistant can:

  • Automatically detect performance issues in your code
  • Suggest specific fixes based on proven patterns
  • Reference detailed guides when working on optimization tasks
  • Apply best practices without you having to prompt for each one

The react-native-best-practices skill contains:

  • 1 main SKILL.md file with quick references and problem mappings
  • 28 detailed reference files covering JavaScript, Native, and Bundling optimizations
  • Priority-ordered guidelines (CRITICAL → HIGH → MEDIUM impact)
  • Code examples showing incorrect vs. correct patterns

Installation

For Cursor

Install the skill package using npm:

npx add-skill callstackincubator/agent-skills
Enter fullscreen mode Exit fullscreen mode

This command will:

  1. Download the skill package
  2. Install it into your agent's skill directory (typically .agents/skills/ or .windsurf/skills/)
  3. Make it available for automatic reference during coding sessions

How It Works

Automatic Activation

The skill is automatically activated when your AI assistant detects tasks related to:

Performance Issues

  • "App feels slow/janky"
  • "Animation drops frames"
  • "List scroll is laggy"
  • "Too many re-renders"
  • "FPS is low"

Bundle & App Size

  • "Bundle size is too large"
  • "App size optimization"
  • "Reduce bundle size"
  • "Tree shaking issues"

Memory Problems

  • "Memory leaks"
  • "Memory growing over time"
  • "App crashes due to memory"

Startup Time

  • "Slow app startup"
  • "TTI (Time to Interactive) optimization"
  • "Cold start performance"

Native Modules

  • "Native module performance"
  • "Turbo Modules"
  • "Bridge overhead"
  • "Android 16KB alignment"

Specific Technologies

  • FlashList optimization
  • Hermes optimization
  • React Native profiling
  • Reanimated worklets

Example: Automatic Detection

You ask:

"My FlatList is scrolling slowly, how can I optimize it?"

The agent automatically:

  1. Recognizes this as a performance issue
  2. References js-lists-flatlist-flashlist.md from the skill
  3. Suggests replacing FlatList with FlashList
  4. Provides code examples and migration steps
  5. Explains the performance benefits

You ask:

"My bundle size is 15MB, how can I reduce it?"

The agent automatically:

  1. Detects bundle size optimization need
  2. References multiple bundle-related skills:
    • bundle-analyze-js.md (to analyze current bundle)
    • bundle-barrel-exports.md (to fix barrel imports)
    • bundle-tree-shaking.md (to enable tree shaking)
  3. Provides step-by-step optimization plan
  4. Shows before/after code examples

What's Included

Priority-Ordered Guidelines

The skill organizes optimizations by impact:

Priority Category Impact Examples
1 FPS & Re-renders CRITICAL FlashList, React Compiler, atomic state
2 Bundle Size CRITICAL Barrel exports, tree shaking, R8
3 TTI Optimization HIGH Hermes mmap, native navigation
4 Native Performance HIGH Turbo Modules, threading
5 Memory Management MEDIUM-HIGH Memory leak detection
6 Animations MEDIUM Reanimated worklets

Reference Files

JavaScript/React (js-*)

  • js-lists-flatlist-flashlist.md - Replace ScrollView with virtualized lists
  • js-profile-react.md - React DevTools profiling
  • js-measure-fps.md - FPS monitoring
  • js-memory-leaks.md - JS memory leak detection
  • js-atomic-state.md - Jotai/Zustand patterns
  • js-concurrent-react.md - useDeferredValue, useTransition
  • js-react-compiler.md - Automatic memoization
  • js-animations-reanimated.md - Reanimated worklets
  • js-uncontrolled-components.md - TextInput optimization

Native (native-*)

  • native-turbo-modules.md - Building fast native modules
  • native-sdks-over-polyfills.md - Native vs JS libraries
  • native-measure-tti.md - TTI measurement
  • native-threading-model.md - Turbo Module threads
  • native-profiling.md - Xcode/Android Studio profiling
  • native-memory-leaks.md - Native memory leak detection
  • native-android-16kb-alignment.md - Google Play alignment

Bundling (bundle-*)

  • bundle-barrel-exports.md - Avoid barrel imports
  • bundle-analyze-js.md - JS bundle visualization
  • bundle-tree-shaking.md - Dead code elimination
  • bundle-r8-android.md - Android code shrinking
  • bundle-hermes-mmap.md - Disable bundle compression

Real-World Usage Examples

Example 1: Fixing Slow List Scrolling

Before (without skill):
You might manually search for "React Native list optimization" and try various solutions.

With skill:

// Agent automatically suggests:
// ❌ Current code
<ScrollView>
  {items.map(item => <Item key={item.id} />)}
</ScrollView>

// ✅ Optimized code
import { FlashList } from '@shopify/flash-list';

<FlashList
  data={items}
  renderItem={({ item }) => <Item item={item} />}
  estimatedItemSize={100}
/>
Enter fullscreen mode Exit fullscreen mode

The agent explains:

  • Why FlashList is better than FlatList/ScrollView
  • How to estimate item sizes
  • Performance improvements (often 2-3x faster)

Example 2: Reducing Bundle Size

With skill, the agent automatically:

  1. Analyzes your imports
  2. Detects barrel exports
  3. Suggests direct imports 
// ❌ Barrel import (bundles everything)
import { Button, Card, Modal } from './components';

// ✅ Direct imports (only bundles what you use)
import Button from './components/Button';
import Card from './components/Card';
Enter fullscreen mode Exit fullscreen mode

Example 3: Memory Leak Detection

You mention: "My app's memory keeps growing"

Agent automatically:

  1. References js-memory-leaks.md
  2. Suggests profiling steps
  3. Identifies common leak patterns:
    • Event listeners not cleaned up
    • Timers/intervals not cleared
    • Subscriptions not unsubscribed
  4. Provides fix examples

Problem → Skill Mapping

The skill includes a built-in mapping so agents know which reference to use:

Problem Agent References
App feels slow/janky js-measure-fps.md → js-profile-react.md
Too many re-renders js-profile-react.md → js-react-compiler.md
Slow startup (TTI) native-measure-tti.md → bundle-analyze-js.md
Large app size bundle-analyze-app.md → bundle-r8-android.md
Memory growing js-memory-leaks.md or native-memory-leaks.md
Animation drops frames js-animations-reanimated.md
List scroll jank js-lists-flatlist-flashlist.md
TextInput lag js-uncontrolled-components.md
Native module slow native-turbo-modules.md → native-threading-model.md

Benefits

1. Automatic Pattern Recognition

No need to remember all optimization patterns. The agent recognizes issues and suggests fixes automatically.

2. Proven Solutions

Based on Callstack's comprehensive optimization guide, tested in real-world applications.

3. Context-Aware Suggestions

The agent understands your specific problem and provides relevant solutions, not generic advice.

4. Code Examples

Each skill includes before/after code examples, making implementation straightforward.

5. Priority Guidance

CRITICAL issues are addressed first, ensuring maximum impact.

6. Comprehensive Coverage

28 reference files cover JavaScript, Native, and Bundling optimizations.

Best Practices for Using the Skill

1. Be Specific About Problems

Instead of "my app is slow," say:

  • "My FlatList scrolls at 30 FPS"
  • "App startup takes 5 seconds"
  • "Bundle size is 20MB"

2. Let the Agent Analyze First

Ask the agent to:

  • "Analyze my codebase for performance issues"
  • "Check for barrel imports"
  • "Review my list components"

3. Follow the Suggestions

The agent provides prioritized fixes. Start with CRITICAL items first.

4. Measure Before and After

Use the profiling tools mentioned in the skills to verify improvements:

  • FPS monitoring
  • Bundle analysis
  • Memory profiling
  • TTI measurement

Integration with Your Workflow

During Code Review

The agent automatically flags:

  • ScrollView usage (should be FlashList)
  • Barrel imports
  • Missing memoization
  • Inline styles (if using Unistyles)

During Development

The agent suggests:

  • Better component patterns
  • Performance optimizations
  • Memory-efficient implementations

During Optimization

The agent provides:

  • Step-by-step optimization plans
  • Measurement tools
  • Before/after comparisons

Troubleshooting

Skill Not Activating?

  1. Check Installation 
   ls .agents/skills/react-native-best-practices/
   # or
   ls .windsurf/skills/react-native-best-practices/
Enter fullscreen mode Exit fullscreen mode

  1. Use Specific Keywords

    • "performance"
    • "optimization"
    • "bundle size"
    • "memory leak"
    • "FPS"

  2. Be Explicit

    • "Use react-native-best-practices to optimize this"
    • "Check this code against performance best practices"

Skill Suggestions Not Relevant?

The skill is designed for React Native/Expo apps. For other frameworks, different skills may be needed.

Conclusion

The react-native-best-practices agent skill transforms your AI coding assistant into a React Native performance expert. By automatically detecting issues and suggesting proven optimizations, it helps you:

  • Build faster apps with better FPS and responsiveness
  • Reduce bundle sizes for faster downloads
  • Prevent memory leaks that cause crashes
  • Optimize startup time for better user experience

Install it once, and your agent will continuously help you write performant React Native code.

Additional Resources

Happy Optimizing! 🚀

Top comments (0)