skills.rest
thejordanleopold
thejordanleopoldCOMMUNITY
Explore all skills by this author →
Website𝕏@jordansleopoldGitHub

frontend-performance

Diagnose and fix frontend performance bottlenecks across Core Web Vitals and bundle size.

4|Updated Apr 9, 2026
Search Tags:#performance#frontend#react#profiling#bundle-size#core-web-vitals#lighthouse-ci
One-click install
npx skills add https://github.com/thejordanleopold/claude-code-skills-distilled --skill frontend-performance-thejordanleopold
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-performance
Source: https://github.com/thejordanleopold/claude-code-skills-distilled/tree/main/frontend-performance
Command: npx skills add https://github.com/thejordanleopold/claude-code-skills-distilled --skill frontend-performance-thejordanleopold

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Diagnoses and fixes frontend performance problems to deliver faster, more reliable user experiences by measuring and optimizing metrics such as Core Web Vitals, bundle size, and rendering efficiency.

Core Features & Use Cases

  • Measure Core Web Vitals (LCP, INP, CLS), identify bottlenecks, and set performance budgets.
  • Profile rendering issues, optimize JavaScript bundles, and implement caching and preloading strategies to reduce load times.
  • Use Case: You have a React dashboard that feels slow; this skill guides you to diagnose, implement fixes, and verify improvements with automated tooling.

Quick Start

Run a structured performance audit on your app to identify LCP/INP/CLS bottlenecks and verify improvements with Lighthouse CI.

Frequently Asked Questions about frontend-performance

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

FAQPage Schema
How do I identify and fix slow Core Web Vitals in a React app?▼

To fix slow Core Web Vitals in a React app, you must instrument profiling to measure LCP, INP, and CLS bottlenecks, implement rendering and bundle optimizations, and validate the improvements using Lighthouse CI.

What is the best way to reduce JavaScript bundle size for modern web apps?▼

The best way to reduce JavaScript bundle size is by profiling rendering issues, optimizing bundles, and implementing caching and preloading strategies, then enforcing performance budgets via CI to prevent regressions.

Does this frontend performance tuning approach work for staging and production environments?▼

Yes, this approach works across development, staging, and production contexts by requiring instrumentation and profiling to ensure measurable outcomes and validate improvements in any modern web app environment.

How do I set performance budgets and enforce them in CI?▼

You set performance budgets for Core Web Vitals and bundle size, then enforce them in CI using Lighthouse CI to validate that optimizations deliver measurable gains and prevent performance regressions.

Why does my React dashboard feel slow during runtime rendering?▼

A React dashboard feels slow during runtime rendering due to unoptimized JavaScript bundles and rendering bottlenecks, which require structured performance profiling and caching strategies to diagnose and fix.

Related Skills

Explore More Software Engineering Skills→
Itinerant18Itinerant18

web-performance-optimization

Analyze Core Web Vitals and optimize frontend loading performance.

Community
Advanced
hopeoverturehopeoverture
6

performance-budget-enforcer

Enforce performance budgets on bundle sizes, Lighthouse scores, and Web Vitals in CI/CD pipelines.

Community
Advanced
ZawHlaingPhyoTsukiZawHlaingPhyoTsuki

vercel-react-best-practices

Enforce React/Next.js performance guidelines for writing, reviewing, and refactoring code.

Community
Advanced
skeletorfletskeletorflet
7

performance-profiling

Automate Lighthouse performance audits and output JSON reports with category scores.

Community
Advanced