Agent skill

mobile-perf

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

View SKILL.md on GitHub Repository
Stars 0
Forks 0

Install this agent skill to your Project

npx add-skill https://github.com/dtsvetkov1/agent-rules/tree/main/skills/mobile-perf

SKILL.md

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.

Recommended Agent Skills

Expand your agent's capabilities with these related and highly-rated skills.

dtsvetkov1/agent-rules

change-writer

Generates clean, human-readable changelogs and release notes from git commits and file changes. Use when preparing for a release or summarizing recent work.

0 0
Explore
dtsvetkov1/agent-rules

doc-sync

Ensures that documentation files like README.md and AGENTS.md stay in sync with the actual code and project structure. Use when adding new features or changing project architecture.

0 0
Explore
dtsvetkov1/agent-rules

security-audit

Scans code for security vulnerabilities, hardcoded secrets, and unsafe patterns in React Native and Expo applications. Use before merging sensitive changes or as part of a regular audit.

0 0
Explore
dtsvetkov1/agent-rules

navigation-architect

Designs and implements navigation flows using Expo Router (file-based routing). Use when adding new screens, handling deep links, or restructuring the app's layout.

0 0
Explore
dtsvetkov1/agent-rules

api-expert

Handles backend integration using best practices like expo/fetch and React Query. Use when the user needs to connect to an API, handle data fetching, or implement caching.

0 0
Explore
dtsvetkov1/agent-rules

opinion-critic

Provides critical feedback and alternative architectural perspectives on code changes. Use when you want to explore different ways to implement a feature or find potential flaws in the current plan.

0 0
Explore

Didn't find tool you were looking for?

Be as detailed as possible for better results