skills.rest
nguyenpv1980-wq
nguyenpv1980-wqCOMMUNITY
Explore all skills by this author →
GitHub

frontend-perf-engineer

Design browser-side performance improvements with weight audits and CI budgets.

2|Updated Jul 6, 2026
Search Tags:#web vitals#lazy loading#frontend performance#hydration#bundle optimization#ci budgets
One-click install
npx skills add https://github.com/nguyenpv1980-wq/Project-Aegis --skill frontend-perf-engineer
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-perf-engineer
Source: https://github.com/nguyenpv1980-wq/Project-Aegis/tree/main/.claude/skills/frontend-perf-engineer
Command: npx skills add https://github.com/nguyenpv1980-wq/Project-Aegis --skill frontend-perf-engineer

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

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.

Frequently Asked Questions about frontend-perf-engineer

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I fix slow page loads and laggy interactions on a mid-range phone?▼

To fix slow frontend performance on mid-range phones, analyze route-level loading, hydration cost, and bundle weight to design evidence-driven splitting strategies and rendering-path fixes that reduce interaction lag and stabilize layouts.

What causes poor Core Web Vitals and layout instability in a web app?▼

Poor Core Web Vitals and layout instability stem from heavy bundles, expensive hydration, long tasks, and unoptimized asset delivery, requiring route-level loading adjustments and rendering-path fixes to improve visual stability and interactivity metrics.

How do I set CI performance budgets to block bundle size regressions?▼

You can block bundle size regressions by defining per-route size budgets and per-page metric budgets for Core Web Vitals, enforcing these CI guardrails to maintain frontend performance control and prevent heavy asset delivery.

Does route splitting and lazy loading help reduce hydration cost and long tasks?▼

Yes, route splitting and lazy loading reduce hydration cost and long tasks by deferring JavaScript execution, minimizing initial bundle weight, and preventing re-render storms through evidence-based rendering-path optimization and asset policy design.

What's the best way to audit frontend bundle weight for slow routes?▼

The best way to audit frontend bundle weight is a deletion-first approach, analyzing asset delivery and route splitting strategies to identify unused code, optimize image sizing, and reduce overall loading weight on target devices.

Can I design a performance plan for specific device and network classes?▼

Yes, you can design a frontend performance plan for a stated device or network class by analyzing loading symptoms, defining metric budgets, and applying rendering-path fixes tailored to that specific hardware and connectivity context.

Related Skills

Explore More Software Engineering Skills→
Greenmamba29Greenmamba29

web-performance-audit

Audits web performance using Core Web Vitals and Lighthouse metrics.

Community
Advanced
DaFumDaFum
1

perf-budget-enforcer

Enforce performance budgets for bundle size, load time, and FPS in CI builds.

Community
Intermediate
resultakakresultakak

performance-budget

Enforce performance budgets across CI gates and PR checks.

Community
Advanced
robotijnrobotijn
3

bundle-analyzer

Analyze JavaScript and Blazor WebAssembly bundle sizes for bloat and budget violations.

Community
Advanced