How does it handle large datasets?

It implements virtualization techniques using tools like TanStack Virtual, allowing applications to render thousands of items while only keeping visible elements in the DOM.

How does this skill help with Core Web Vitals?

It provides specific implementation patterns for preloading LCP images, preventing layout shifts (CLS) with explicit dimensions, and minimizing main-thread work to improve Interaction to Next Paint (INP).

Can I use this for Vite and React projects?

Yes, the skill includes specialized configurations for Vite's manual chunks and React's Suspense-based dynamic imports for route-level code splitting.

What image optimization techniques are included?

The skill covers modern formats like WebP/AVIF, responsive sizes attributes, native lazy loading, and the use of 'fetchpriority' for critical assets.

Performance Optimization

Name: Performance Optimization
Author: rohitg00

byrohitg00

•

604

•

分析与监控

Optimizes web application speed and efficiency through bundle analysis, code splitting, and Core Web Vitals management.

This skill equips Claude with specialized knowledge to audit and enhance web application performance across the entire frontend stack. It provides implementation patterns for advanced code splitting, dynamic imports, and bundle visualization to reduce initial load times. Additionally, it covers crucial UX-centric optimizations including responsive image handling, virtualized rendering for large datasets, and strategic caching header configurations. By following the integrated checklists for Core Web Vitals like LCP, INP, and CLS, developers can significantly improve lighthouse scores and user retention through smoother, faster digital experiences.

主要功能

01604 GitHub stars

02Route-level code splitting and manual chunk optimization

03DOM virtualization for high-performance rendering of large data lists

04Comprehensive Core Web Vitals monitoring and anti-pattern detection

05Modern image optimization using WebP/AVIF and fetchpriority

06Advanced caching strategies with immutable and stale-while-revalidate headers

使用场景

01Reducing JavaScript bundle sizes in Vite or Webpack projects to improve load times

02Fixing layout shifts and improving LCP for better search engine rankings

03Scaling data-heavy dashboards using virtual lists to maintain 60fps interactions

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add rohitg00/awesome-claude-code-toolkit performance-optimization

For use in Claude.ai and ChatGPT

Download Skill