How does it help with Core Web Vitals?

The skill provides strategies to improve LCP, FID, and CLS by optimizing images, suggesting code splitting, and identifying layout shifts in your components.

Can this skill help reduce my JavaScript bundle size?

Yes, it analyzes your imports and dependencies to identify large packages and suggests tree-shaking improvements or lightweight alternatives like replacing Moment.js with date-fns.

Is this a replacement for Lighthouse?

It complements Lighthouse by providing static code analysis and specific implementation patterns to fix the issues that Lighthouse identifies during runtime testing.

Does it provide specific code suggestions for React?

Absolutely. It detects patterns that cause unnecessary re-renders and suggests specific implementations of useMemo, useCallback, and React.memo.

Performance Analyzer

Name: Performance Analyzer
Author: physics91

byphysics91

0•

分析と監視

Analyzes frontend applications to identify performance bottlenecks and provides actionable optimizations for bundle size, rendering, and Core Web Vitals.

The Performance Analyzer skill is a specialized tool for developers seeking to optimize their frontend applications for speed and efficiency. It conducts a deep audit of your codebase to detect large dependencies, tree-shaking failures, and unnecessary React re-renders. Beyond just identification, it offers specific code-level suggestions for memoization, dynamic imports, and image optimization to improve critical metrics like Largest Contentful Paint (LCP) and Cumulative Layout Shift (CLS). This skill is essential for ensuring high-performance user experiences and maintaining lean, production-ready bundles.

主な機能

01Core Web Vitals assessment including LCP, FID, and CLS improvement strategies

02Identification of code-splitting opportunities using dynamic imports

03React rendering optimization identifying unnecessary re-renders and memoization needs

040 GitHub stars

05Comprehensive bundle size and dependency analysis with lightweight alternatives

06Automated image and asset optimization recommendations

ユースケース

01Conducting pre-production performance audits to meet Core Web Vitals standards

02Fixing UI performance issues and 'jank' in complex React components

03Reducing initial bundle size and improving page load times for web applications

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add physics91/claude-vibe perf-analyzer

For use in Claude.ai and ChatGPT

主な機能

01Core Web Vitals assessment including LCP, FID, and CLS improvement strategies

02Identification of code-splitting opportunities using dynamic imports

03React rendering optimization identifying unnecessary re-renders and memoization needs

040 GitHub stars

05Comprehensive bundle size and dependency analysis with lightweight alternatives

06Automated image and asset optimization recommendations

ユースケース

01Conducting pre-production performance audits to meet Core Web Vitals standards

02Fixing UI performance issues and 'jank' in complex React components

03Reducing initial bundle size and improving page load times for web applications