Why is measurement prioritized over optimization?

The skill follows the philosophy that premature optimization is the root of all evil, guiding users to use Chrome DevTools and Lighthouse to find real bottlenecks first.

Does this skill work with non-React projects?

While it has deep React-specific optimizations, its core sections on Web Vitals, image optimization, and bundle size reduction are applicable to any frontend project.

Does it support bundle analysis for modern build tools?

The skill includes guidance for using Webpack Bundle Analyzer and Vite's rollup-plugin-visualizer to identify and remove library bloat.

How does this skill help with React re-renders?

It provides specific patterns and code examples for using React.memo, useMemo, and useCallback to prevent unnecessary updates and improve component efficiency.

Can it help improve Core Web Vitals scores?

Yes, it offers actionable strategies for improving LCP (Largest Contentful Paint), FID (First Input Delay), and CLS (Cumulative Layout Shift) through better asset loading and layout management.

Frontend Performance Optimizer (Japanese)

Name: Frontend Performance Optimizer (Japanese)
Author: thkt

bythkt

•

분석 및 모니터링

Optimizes web application performance using data-driven techniques, React best practices, and Core Web Vitals measurement.

This skill provides specialized expertise in identifying and resolving frontend performance bottlenecks with a focus on Japanese-language development environments. It emphasizes a 'measure first' philosophy, utilizing Core Web Vitals (LCP, FID, CLS) and profiling tools like Chrome DevTools to pinpoint issues. It offers practical implementation patterns for React optimization (memoization, virtualization), bundle size reduction (code splitting, tree shaking), image optimization, and layout shift prevention to ensure fast, responsive, and stable user experiences.

주요 기능

01Core Web Vitals analysis and improvement (LCP, FID, CLS)

02React rendering optimization via memoization and state management

033 GitHub stars

04Detailed performance profiling using Chrome and React DevTools

05Image and asset optimization strategies for faster loading

06Bundle size reduction through code splitting and tree shaking

사용 사례

01Diagnosing and fixing slow page load times in React applications

02Reducing cumulative layout shift (CLS) to improve visual stability

03Analyzing and shrinking large JavaScript bundle sizes for mobile users

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add thkt/claude-config optimizing-performance

For use in Claude.ai and ChatGPT

주요 기능

01Core Web Vitals analysis and improvement (LCP, FID, CLS)

02React rendering optimization via memoization and state management

033 GitHub stars

04Detailed performance profiling using Chrome and React DevTools

05Image and asset optimization strategies for faster loading

06Bundle size reduction through code splitting and tree shaking

사용 사례

01Diagnosing and fixing slow page load times in React applications

02Reducing cumulative layout shift (CLS) to improve visual stability

03Analyzing and shrinking large JavaScript bundle sizes for mobile users

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add thkt/claude-config optimizing-performance

For use in Claude.ai and ChatGPT