What problem does it solve?
Performance bottlenecks across frontend and backend systems cause slow load times, poor user experience, and increased infrastructure cost. This Skill gives engineers a structured, measure-first approach to identify, prioritize, and remediate rendering issues, excessive bundle size, slow JavaScript, memory leaks, and inefficient backend operations.
Core Features & Use Cases
- Profiling-first guidance for Chrome DevTools, Lighthouse, and Node.js profilers to find real bottlenecks.
- Rendering optimizations including memoization guidance, stable keys, and animation best practices to reduce unnecessary re-renders.
- Asset and bundle strategies such as modern image formats, lazy loading, code splitting, tree-shaking, and long-lived caching.
- JavaScript and Node guidance covering debouncing, web workers, streams, async patterns, and worker threads for CPU-bound tasks.
- Code review checklist for spotting algorithmic inefficiencies, N+1 queries, memory leaks, and missing caching or instrumentation.
- Use Case: Review a slow React component and receive prioritized fixes, estimated impact on render time, and CI-check ideas to prevent regressions.
Quick Start
Analyze the attached component for rendering and bundle-size bottlenecks and return a prioritized list of fixes, estimated impact, and a code-review checklist.