How does it handle bundle size optimization?

It provides guidance on analyzing bundle composition and provides strategies for code splitting and dependency management to keep assets lean.

What metrics does this skill focus on?

It focuses on the three Core Web Vitals: Largest Contentful Paint (LCP) for loading, First Input Delay (FID) for interactivity, and Cumulative Layout Shift (CLS) for visual stability.

What is the recommended workflow for optimization?

The skill follows a four-step cycle: Measure using Lighthouse/DevTools, Identify the bottleneck, implement One change at a time, and then Re-measure.

Can it help with React-specific performance issues?

Yes, it includes specialized reference material and patterns specifically for identifying and resolving performance bottlenecks within React applications.

Frontend Performance Optimizer

Name: Frontend Performance Optimizer
Author: thkt

bythkt

•

Analytics & Monitoring

Optimizes web application performance and Core Web Vitals through systematic measurement and bundle analysis.

The Frontend Performance Optimizer skill enables Claude to act as a dedicated performance reviewer for web projects. It provides a structured framework for measuring and improving Core Web Vitals, including Largest Contentful Paint (LCP), First Input Delay (FID), and Cumulative Layout Shift (CLS). By following a data-driven workflow of measurement, identification, and incremental refinement, this skill helps developers tackle performance bottlenecks, optimize React components, and significantly reduce JavaScript bundle sizes for faster, smoother user experiences.

Key Features

01Integrates with MDN documentation for web performance best practices

029 GitHub stars

03Provides specialized strategies for React-specific performance tuning

04Monitors and targets Core Web Vitals (LCP, FID, CLS) benchmarks

05Implements a systematic measure-identify-refine-remeasure workflow

06Analyzes and reduces application bundle sizes for faster delivery

Use Cases

01Identifying and fixing layout stability issues to improve user experience

02Reducing initial load times for complex React-based single-page applications

03Improving Google Search ranking by optimizing Core Web Vitals scores

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add thkt/dotclaude optimizing-performance

For use in Claude.ai and ChatGPT

Key Features

01Integrates with MDN documentation for web performance best practices

029 GitHub stars

03Provides specialized strategies for React-specific performance tuning

04Monitors and targets Core Web Vitals (LCP, FID, CLS) benchmarks

05Implements a systematic measure-identify-refine-remeasure workflow

06Analyzes and reduces application bundle sizes for faster delivery

Use Cases

01Identifying and fixing layout stability issues to improve user experience

02Reducing initial load times for complex React-based single-page applications

03Improving Google Search ranking by optimizing Core Web Vitals scores

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add thkt/dotclaude optimizing-performance

For use in Claude.ai and ChatGPT