browser-profiling
Installation
SKILL.md
Browser / React Performance Profiling
End-to-end workflow: triage the complaint → capture numeric baseline → isolate the layer (browser vs React vs network) → deep-dive the bottleneck → fix → verify the fix matches the baseline.
Triage Table — Classify Before You Profile
| Symptom | Likely Layer | Primary Tool |
|---|---|---|
| Slow initial page load | Network / bundle | Lighthouse, bundle analyzer, coverage API |
| Slow after clicking / typing | JS / React renders | Performance panel, React <Profiler> |
| Scrolling jank / dropped frames | Layout thrashing / paint | FPS meter, Performance panel during scroll |
| Memory grows and never recovers | Memory leak | Memory panel Heap Snapshot + Allocation Timeline |
| App slow only on low-end devices | Long tasks / large bundles | Performance panel with 6× CPU throttle |
Step 1 — Capture a Numeric Baseline
Never skip this. "It feels slow" is not a measurement. Run this Playwright script before touching code; compare after fixes.