frontend-perf-engineer

What problem does it solve?

This Skill helps you diagnose and design frontend performance improvements when pages feel slow, interactions lag, or layouts jump. It focuses on the browser-side causes of poor user experience and turns them into measurable budgets and concrete fixes.

Core Features & Use Cases

• Performance symptom analysis: Pins loading, interactivity, and visual-stability problems to the right route and device/network class.
• Bundle and asset strategy: Recommends deletion-first bundle audits, route splitting, lazy loading, image sizing, and font loading choices that reduce weight and regressions.
• Rendering and runtime optimization: Addresses hydration cost, long tasks, re-render storms, virtualization, and layout thrash with evidence-based design.
• Budgeting and guardrails: Defines per-route size budgets and per-page metric budgets that can be enforced in CI.
• Use case: A product page loads quickly on desktop but feels heavy on mid-range phones; this Skill produces a browser performance plan with expected metric movement and regression gates.

Quick Start

Ask the frontend-perf-engineer skill to design a performance plan for your slow route on a mid-range phone and include the budgets that should block regressions.