performance-optimization

What This Skill Does

The performance-optimization skill is a specialized toolkit designed to bring modern web-standard performance patterns to React Native 0.83+ and Expo SDK 54+ applications. It acts as an expert consultant, guiding you through the complexities of Hermes V1 bytecode optimization, concurrent rendering via React 19.2, and efficient resource loading. By integrating advanced Web Performance APIs and the Intersection Observer API, this skill helps you identify bottlenecks, monitor frame drops, and implement code-level architectural changes that result in a snappier, more professional mobile experience.

Installation

You can integrate this skill into your project by running the following command in your terminal within your project root:

clawhub install openclaw/skills/skills/anton-abyzov/sw-performance-optimization

Use Cases

• Slow App Startup: Utilize Hermes V1 configuration and bytecode analysis to reduce the Time to Interactive (TTI).
• Jank and FPS Drops: Implement concurrent rendering to offload heavy calculations from the JS thread and ensure smooth animations.
• Memory Leaks: Use PerformanceObserver and memory monitoring strategies to track component lifecycle issues.
• Bundle Bloat: Leverage built-in analysis commands like source-map-explorer and react-native-bundle-visualizer to pinpoint large dependencies and prune unused code.
• Heavy Image Loading: Replace legacy image components with expo-image v2 for native caching and blurhash support.

Example Prompts

1. "My app is experiencing significant frame drops when scrolling through long lists. How can I use FlashList and the Intersection Observer API to optimize this?"
2. "I need to analyze my bundle size because my APK is over 60MB. What commands should I run to visualize the dependency tree and identify bloat?"
3. "Can you help me implement the new React 19.2 Activity component to preserve state in my tab navigation and improve perceived performance?"

Tips & Limitations

• Compatibility: This skill is strictly optimized for React Native 0.83+ and Expo SDK 54+. Older projects may require significant refactoring before these features are applicable.
• Hermes V1: As an experimental feature, ensure you test on multiple device architectures (ARM64 vs x86) after enabling, as engine-level changes can occasionally introduce edge-case crashes.
• Instrumentation: While performance.now() and the User Timing API are powerful, avoid over-instrumenting your production code, as the tracking itself can occasionally contribute to minor overhead. Always use the PerformanceObserver pattern for cleaner, non-blocking monitoring.