~/.claude/skills/performance-profiler/SKILL.mdPerformance Profiler
Identifies performance bottlenecks: slow queries, unnecessary re-renders, large bundles, unoptimized images, missing caching.
--- name: performance-profiler description: | Identifies and fixes performance bottlenecks in web applications. IMPORTANT: Activate this skill whenever the user says "app is slow", "optimize performance", "page load is slow", or "improve speed". This skill MUST be used for all performance optimization requests. --- # Performance Profiler Systematically identifies performance bottlenecks in your application: slow database queries, unnecessary re-renders, large JavaScript bundles, unopti
Systematically identifies performance bottlenecks in your application: slow database queries, unnecessary re-renders, large JavaScript bundles, unoptimized images, and missing caching opportunities.
Say any of these to activate this skill: - "my app is slow" - "optimize performance" - "page load is slow" - "Use skill: performance profiler"
1. Identify the performance concern (initial load, specific page, API response time, memory growth, etc.) 2. Bundle analysis: Look for large dependencies, missing code splitting, unoptimized imports, tree-shaking failures 3. Database queries: Look for N+1 patterns, missing indexes, queries without limits, sequential awaits that should be parallel 4. Caching audit: Check for missing HTTP cache headers, CDN opportunities, application-level caching (unstable_cache, React.cache, Redis) 5. Frontend rendering: Unnecessary re-renders, missing memoization, unoptimized images, layout thrashing 6. Memory profiling: Check for event listener leaks (addEventListener without removeEventListener), growing closures, detached DOM nodes, unbounded caches or Maps, setInterval without clearInterval 7. Runtime bottlenecks: Synchronous file reads, unparallelized API calls, sequential queries, blocking the main thread with heavy computation 8. Prioritize fixes by impact: measure each bottleneck, fix the biggest first 9. Apply fixes and verify improvement with before/after metrics
- Measure before and after every optimization (do not guess at impact)
- Fix the biggest bottleneck first; small optimizations rarely matter
- Use
Promise.all()for independent async operations - Prefer lazy loading and dynamic imports for below-the-fold content
- Do not optimize code that runs once during startup unless it's blocking the user
- For memory leaks: check useEffect cleanup functions, subscription teardowns, and global cache growth
- For server-side: check for connection pool exhaustion, unclosed streams, and accumulating in-memory state
- Best with: Claude Code CLI (can run build analysis, check bundle size)
- Also works: Cursor, Windsurf
- Expects: A web application with a measurable performance issue
- Bottleneck analysis: ranked list of performance issues with estimated impact
- Fixes applied with before/after measurements
- Remaining optimization opportunities for future work