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.
Install this agent skill to your Project
npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/design/mobile-perf
SKILL.md
Mobile Performance Skill
This skill focuses on delivering a "butter-smooth" user experience.
Focus Areas
- List Optimization: Use
LegendListor highly optimizedFlatListsettings. - Animation Performance: Ensure all animations run on the UI thread using
react-native-reanimated. - Image Handling: Use
expo-imagefor 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
- Profile: Identify the bottleneck (JS thread vs UI thread).
- Optimize Lists: Use
removeClippedSubviews,maxToRenderPerBatch, andinitialNumToRender. - Memoization: Apply
useMemoanduseCallbackjudiciously to prevent unnecessary renders. - Bridge Traffic: Minimize the data sent across the React Native bridge.
Recommended Tools
Flashlightfor performance testing.react-devtoolsfor profiling renders.expo-bundle-analyzerto check bundle composition.
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
Didn't find tool you were looking for?