Agent-Skills.md

Agent Skills: Mobile Performance Skill

Optimizes React Native Expo applications for speed, responsiveness, and battery efficiency. Use when fixing lag, optimizing lists, or reducing bundle size.

UncategorizedID: dtsvetkov1/agent-rules/mobile-perf

Repository

dtsvetkov1/agent-rules
dtsvetkov1

Install this agent skill to your local

pnpm dlx add-skill https://github.com/dtsvetkov1/agent-rules/tree/HEAD/skills/mobile-perf

Skill Files

Browse the full folder contents for mobile-perf.

Download Skill

Loading file tree…

skills/mobile-perf/SKILL.md

Skill Metadata

Name
mobile-perf
Description
Optimizes React Native Expo applications for speed, responsiveness, and battery efficiency. Use when fixing lag, optimizing lists, or reducing bundle size.

Mobile Performance Skill

This skill focuses on delivering a "butter-smooth" user experience.

Focus Areas

  • List Optimization: Use LegendList or highly optimized FlatList settings.
  • Animation Performance: Ensure all animations run on the UI thread using react-native-reanimated.
  • Image Handling: Use expo-image for caching and performant loading.
  • JS Bundle Size: Analyze and reduce the size of the JavaScript bundle.
  • Memory Leaks: Identify and fix component memory leaks or excessive re-renders.

Instructions

  1. Profile: Identify the bottleneck (JS thread vs UI thread).
  2. Optimize Lists: Use removeClippedSubviews, maxToRenderPerBatch, and initialNumToRender.
  3. Memoization: Apply useMemo and useCallback judiciously to prevent unnecessary renders.
  4. Bridge Traffic: Minimize the data sent across the React Native bridge.

Recommended Tools

  • Flashlight for performance testing.
  • react-devtools for profiling renders.
  • expo-bundle-analyzer to check bundle composition.