How does this skill improve Core Web Vitals?

It implements a systematic workflow to measure performance using Lighthouse or DevTools, identifies specific bottlenecks in LCP, FID, or CLS, and suggests code-level fixes.

Can I use this for React performance tuning?

Yes, the skill includes specialized references for React optimization, helping to reduce unnecessary re-renders and manage component-level performance.

Does it help with SEO?

Directly. By optimizing page speed and Core Web Vitals, it helps your site meet Google's performance requirements for better search engine rankings.

What tools does the skill use?

The skill utilizes browser-based agents for testing, grep/glob for codebase analysis, and MDN documentation to ensure best practices are followed.

Frontend Performance Optimizer

Name: Frontend Performance Optimizer
Author: thkt

bythkt

•

Analytics & Monitoring

Optimizes frontend application performance using a data-driven approach to improve Core Web Vitals and page load times.

This skill empowers Claude to systematically analyze and enhance web performance by focusing on critical metrics like Largest Contentful Paint (LCP), First Input Delay (FID), and Cumulative Layout Shift (CLS). By following a rigorous workflow of measurement, bottleneck identification, and iterative testing, it provides developers with actionable strategies for bundle size reduction and React-specific optimizations. It is an essential tool for engineering teams aiming to improve user experience and search engine rankings through superior technical performance.

Key Features

01Data-driven bottleneck identification

02Automated performance measurement workflows

03React-specific performance optimization guidance

048 GitHub stars

05Bundle size analysis and reduction strategies

06Core Web Vitals auditing (LCP, FID, CLS)

Use Cases

01Resolving complex layout shift (CLS) issues in responsive designs

02Improving Lighthouse scores and Core Web Vitals for production sites

03Optimizing JavaScript delivery and bundle sizes for faster TTI

Key Features

01Data-driven bottleneck identification

02Automated performance measurement workflows

03React-specific performance optimization guidance

048 GitHub stars

05Bundle size analysis and reduction strategies

06Core Web Vitals auditing (LCP, FID, CLS)

Use Cases

01Resolving complex layout shift (CLS) issues in responsive designs

02Improving Lighthouse scores and Core Web Vitals for production sites

03Optimizing JavaScript delivery and bundle sizes for faster TTI