skills.rest
Gaku52
Gaku52COMMUNITY
Explore all skills by this author →
WebsiteGitHub

frontend-performance

Optimize React/Next.js frontend performance by reducing Core Web Vitals and bundle sizes.

6|2|Updated Dec 24, 2025
Search Tags:#performance#frontend#Next.js#code splitting#Lighthouse#Core Web Vitals#Web Vitals
One-click install
npx skills add https://github.com/Gaku52/claude-code-skills --skill frontend-performance
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-performance
Source: https://github.com/Gaku52/claude-code-skills/tree/main/frontend/frontend-performance
Command: npx skills add https://github.com/Gaku52/claude-code-skills --skill frontend-performance

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps developers rapidly improve frontend performance by addressing Core Web Vitals, bundle size, and render efficiency across modern web apps.

Core Features & Use Cases

  • Core Web Vitals optimization: LCP, INP/FID, and CLS improvements.
  • Bundle size reduction: Code splitting, tree shaking, asset optimization.
  • Rendering optimization: SSR/CSR strategies, virtualization, skeleton UIs, caching.
  • Image optimization and caching: Next/Image, CDN, responsive images.
  • Measurement and budgets: Lighthouse, Web Vitals, performance budgets, CI/CD checks.

Quick Start

  • Run a performance audit on your Next.js/React app.
  • Implement initial optimizations: enable image optimization, adopt code-splitting, apply skeleton UI, and establish a Lighthouse/Web Vitals monitoring routine.

Frequently Asked Questions about frontend-performance

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

FAQPage Schema
How do I optimize Core Web Vitals in a Next.js app?▼

Optimizing Core Web Vitals involves reducing LCP, INP/FID, and CLS scores by implementing image optimization, code splitting, and render path improvements. This Skill targets modern React/Next.js apps to systematically address these metrics for production deployments and feature optimizations.

What's the best way to reduce bundle size in React applications?▼

Reducing bundle size requires implementing code splitting, tree shaking, and asset optimization. This Skill provides best practices for cutting bundle sizes in modern web apps, helping speed up rendering paths and overall frontend performance.

How do I set up performance budgets and Lighthouse monitoring in CI/CD?▼

Setting up performance budgets and Lighthouse monitoring involves integrating Web Vitals measurement and CI/CD checks into your deployment pipeline. This Skill guides establishing a routine to verify improvements and catch performance regressions in modern React/Next.js applications.

Does this approach work for both SSR and CSR rendering strategies?▼

Yes, it supports both SSR and CSR rendering strategies. This Skill covers rendering optimization by applying server-side and client-side strategies, virtualization, skeleton UIs, and caching to speed up frontend apps across various deployment scenarios.

Why does my LCP score drop after adding new features to my web app?▼

LCP score drops occur when new features increase bundle sizes or block the main thread, delaying largest contentful paint. This Skill addresses performance regressions by applying code splitting, image optimization, and render path improvements to restore speeds.

Related Skills

Explore More Software Engineering Skills→
MisonLMisonL
8

performance-profiling

Collect Core Web Vitals and Lighthouse scores to measure web performance.

Community
Intermediate
hopeoverturehopeoverture
6

performance-budget-enforcer

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

Community
Advanced
OrcaQubitsOrcaQubits
35

bc-performance

Optimize BigCommerce storefront performance by tuning Stencil themes and API caching.

Official
Intermediate
Colten-CovingtonColten-Covington

performance-profiling

Profiles React component rendering and bundle sizes to resolve web performance bottlenecks.

Community
Advanced