848d2de1-1e7c-4445-96c5-31bdafcca5b1/.claude/skills/performance/SKILL.md

name, description, disable-model-invocation

name	description	disable-model-invocation
performance	Performance optimization workflow for frontend applications	true

Performance

Optimize: $ARGUMENTS

Process

1. Identify the problem

   • What is slow? (initial load, interaction, render)
   • Measure current performance
   • Set a target improvement

2. Analyze causes

   • Large bundle size?
   • Unnecessary re-renders?
   • Expensive calculations?
   • Network waterfalls?
   • Layout thrashing?

3. React optimizations

   • Add memo() for expensive list items
   • Use useMemo for costly computations
   • Use useCallback for stable function refs
   • Split components to isolate re-renders
   • Lazy load with dynamic() or React.lazy()

4. Bundle optimizations

   • Code split large dependencies
   • Dynamic imports for heavy features
   • Tree shake unused code
   • Analyze with bundle analyzer

5. Render optimizations

   • Virtualize long lists
   • Debounce/throttle frequent updates
   • Use CSS transforms over layout properties
   • Avoid layout shifts

6. Network optimizations

   • Preload critical resources
   • Cache API responses
   • Optimize images (WebP, lazy load)
   • Reduce request waterfalls

7. Verify improvement

   • Measure after changes
   • Compare to baseline
   • Test on slow devices/networks

Output

Report optimizations applied and measured improvements.