Can this skill help reduce my application's bundle size?

Yes, it includes specific guidelines for eliminating barrel imports, using next/dynamic for heavy components, and deferring third-party scripts.

Does it support both client-side and server-side optimization?

Yes, the skill covers categories ranging from server-side caching and serialization to client-side SWR deduplication and event listener management.

Is this skill useful for refactoring older React code?

Absolutely. It identifies inefficient patterns like unnecessary re-renders and network waterfalls, providing modern, high-performance alternatives.

How does this skill improve Next.js performance?

It applies 45 prioritized rules from Vercel Engineering to optimize data fetching, minimize bundle sizes, and improve server-side rendering patterns.

Vercel React Performance Optimizer

Name: Vercel React Performance Optimizer
Author: claudiodearaujo

byclaudiodearaujo

•

API開発

Implements Vercel's high-performance engineering standards to optimize bundle sizes, rendering cycles, and data fetching in React and Next.js applications.

This skill integrates Vercel Engineering's comprehensive performance guidelines directly into your development workflow, offering 45 prioritized rules to streamline React and Next.js applications. It systematically addresses performance bottlenecks by eliminating network waterfalls, optimizing bundle sizes through dynamic imports, and improving server-side execution. Whether you are refactoring legacy code for better Core Web Vitals or architecting a new Next.js project, this skill provides the domain-specific guidance needed to ensure production-grade efficiency and speed.

主な機能

01Reduces bundle sizes by enforcing direct imports and strategic dynamic loading

021 GitHub stars

03Optimizes re-render cycles through memoization and stable dependency management

04Improves JavaScript execution speed using optimized data structures and loop patterns

05Eliminates network waterfalls using parallel fetching and Suspense streaming patterns

06Enhances server-side performance with per-request deduplication and non-blocking operations

ユースケース

01Architecting complex data-fetching layers that require parallel execution and efficient serialization

02Refactoring existing Next.js pages to improve page load speed and Lighthouse scores

03Automating code reviews to ensure compliance with Vercel's production performance standards

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add claudiodearaujo/sistema-de-narra-o-de-livro react-best-practices

For use in Claude.ai and ChatGPT

Download Skill