What frameworks does this skill support?

This skill is specifically optimized for React and Next.js applications, including support for both the Pages Router and the modern App Router.

How does this skill help with Core Web Vitals?

It targets specific performance metrics by reducing bundle sizes, eliminating render-blocking waterfalls, and optimizing JavaScript execution, directly improving LCP, FID, and CLS.

Can I use this for automated refactoring?

Yes, the skill is designed to provide specific, actionable code changes based on 57 prioritized rules for high-performance React development.

Does it cover Server Components and Server Actions?

Yes, it includes high-priority categories for Server-Side Performance, including rules for React Server Components (RSC) and secure Server Action implementation.

Is this skill suitable for beginners?

While it deals with advanced performance topics, the skill provides clear 'Correct' vs 'Incorrect' examples that serve as an excellent learning tool for developers at all levels.

Vercel React Best Practices

Name: Vercel React Best Practices
Author: CodeStorm-Hub

byCodeStorm-Hub

•

개발자 도구

Optimizes React and Next.js applications using Vercel Engineering's performance-focused coding standards and architectural patterns.

This skill provides a comprehensive suite of 57 performance optimization rules curated by Vercel Engineering to enhance React and Next.js applications. It helps developers implement critical patterns such as eliminating data waterfalls, optimizing bundle sizes, and improving server-side rendering performance. By integrating these guidelines directly into the development workflow, the skill ensures that React components, Next.js pages, and data-fetching logic follow the most efficient implementation patterns to achieve superior Core Web Vitals and user experiences.

주요 기능

01Elimination of data waterfalls using parallel fetching and Suspense boundaries

02Server-side performance tuning with React cache and request deduplication

031 GitHub stars

04Standardized JavaScript performance patterns for efficient loops and memory usage

05Fine-grained re-render optimization for React components and state management

06Advanced bundle size optimization through dynamic imports and barrel file removal

사용 사례

01Refactoring existing Next.js applications to resolve performance bottlenecks and slow load times

02Auditing React codebases during PR reviews to ensure compliance with Vercel's engineering standards

03Optimizing data fetching strategies when migrating to the Next.js App Router

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add codestorm-hub/stormcomui vercel-react-best-practices

For use in Claude.ai and ChatGPT

Download Skill