What is layout thrashing and can this skill fix it?

Layout thrashing occurs when the browser is forced to reflow multiple times due to interleaved DOM reads and writes; this skill provides patterns to batch these operations for better rendering efficiency.

Can this skill help with React-specific performance issues?

Yes, it includes patterns for React-specific optimizations such as memoization, useMemo, useCallback, list virtualization, and route-based code splitting.

How do I ensure my animations are GPU-accelerated?

The skill provides guidance on using transform and opacity properties instead of layout properties like top or left to ensure animations are handled by the GPU for 60fps smoothness.

Does it provide code examples for image optimization?

Yes, it provides implementation patterns for using modern formats like WebP, implementing responsive srcset attributes, and using lazy loading for below-the-fold content.

How does the Optimize skill measure performance?

It guides users through measuring the current state using Core Web Vitals (LCP, FID, CLS), bundle size analysis, and runtime metrics like CPU and memory usage before suggesting specific fixes.

Frontend Performance Optimizer

Name: Frontend Performance Optimizer
Author: Moliboy5000

byMoliboy5000

0•

デザインツール

Improves interface performance by optimizing load speeds, rendering efficiency, animations, and bundle sizes for a smoother user experience.

The Optimize skill is a specialized performance engineering tool for Claude Code designed to systematically diagnose and resolve web bottlenecks. It provides a comprehensive framework for measuring Core Web Vitals, implementing image and asset optimization strategies, reducing JavaScript bundle sizes, and eliminating rendering issues like layout thrashing. Whether you are aiming for 60fps animations or faster initial page loads, this skill guides you through the process of measuring, implementing, and verifying performance improvements across modern web frameworks to ensure a high-quality, responsive user interface.

主な機能

01Rendering performance tuning to prevent layout thrashing and utilize GPU acceleration

02Core Web Vitals assessment and optimization strategies (LCP, FID/INP, CLS)

03Bundle size reduction through code splitting, tree shaking, and dependency analysis

040 GitHub stars

05Framework-specific optimization patterns for React and other modern libraries

06Asset optimization including modern image formats, lazy loading, and font management

ユースケース

01Auditing and improving a slow landing page to boost SEO and Lighthouse scores

02Optimizing enterprise React applications to reduce initial bundle sizes and time-to-interactive

03Debugging janky UI animations to achieve a consistent 60fps experience on mobile

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add moliboy5000/.claude optimize

For use in Claude.ai and ChatGPT