frontend-performance-remediationlisted
Install: claude install-skill SylphxAI/skills
# Frontend Performance Remediation
Repair a measured frontend runtime failure at its owning lifecycle, rendering,
or data-flow boundary. Produce one **Frontend Runtime Performance Remediation
Record** with comparable before-and-after evidence.
Read
[references/frontend-runtime-performance-method.md](references/frontend-runtime-performance-method.md)
before choosing instrumentation or a fix.
## Method
1. Freeze the exact candidate, runtime, device and viewport class, route and
state, input sequence, data fixture, performance budget or user-visible
symptom, and non-goals.
2. Reproduce before editing. Record a repeatable baseline for the failing path
and enough control paths to distinguish local cost from application-wide or
environmental noise.
3. Inventory every plausible producer of work on the path: rendering and
layout, CSS animation, `requestAnimationFrame`, timers, listeners,
observers, async work, network and decoding, workers, canvas/WebGL, retained
objects, and third-party code.
4. Isolate the mechanism with source inspection plus runtime evidence. Test
competing hypotheses; a profiler hotspot without ownership or a code smell
without measured impact is not yet a diagnosis.
5. Correct the owning mechanism. Prefer eliminating unnecessary work, bounding
lifetime and frequency, moving computation out of the critical path, and
making visibility, cancellation, cleanup, and reduced-motion behavior
explicit over adding throttling patche