Can this skill help reduce JavaScript bundle sizes?

Yes, it includes specific rules for eliminating barrel imports, implementing conditional loading, and deferring third-party scripts to keep client-side bundles lean.

When should I use this skill?

Use it during code reviews, when refactoring legacy React codebases, or when initializing new Next.js projects to ensure high performance from the first line of code.

What does the Vercel React Best Practices skill do?

It applies 45 prioritized rules to optimize the performance of React and Next.js code, focusing on areas like bundle size, rendering efficiency, and data fetching architecture.

How does this skill help with Next.js performance?

It specifically targets Next.js features like Server Components, streaming with Suspense, and dynamic imports to reduce time-to-interactive and bundle weight.

Does it support server-side data fetching optimization?

Yes, it provides patterns for React.cache deduplication, parallel fetching, and minimizing data serialization between server and client components.

Vercel React Best Practices

Name: Vercel React Best Practices
Author: julianromli

byjulianromli

•

101

•

Developer Tools

Optimizes React and Next.js applications using 45 performance-focused rules and industry-leading patterns from Vercel Engineering.

This skill provides a comprehensive framework for applying Vercel's internal engineering standards to React and Next.js projects. It automates the identification and resolution of performance bottlenecks across eight critical categories, including request waterfalls, bundle size optimization, and server-side rendering efficiency. By integrating these best practices directly into the development workflow, the skill helps developers build faster, more scalable applications that excel in Core Web Vitals and user experience.

Key Features

01Optimized JavaScript execution patterns for high-frequency DOM and data tasks

02Bundle size reduction via dynamic imports and barrel file management

03Advanced re-render optimization for complex React component trees

04Server-side performance tuning using React.cache and non-blocking operations

05Critical waterfall elimination using parallel fetching and streaming patterns

06101 GitHub stars

Use Cases

01Refactoring Next.js applications to improve performance and Core Web Vitals

02Automating code reviews for React performance and bundle size regressions

03Implementing Vercel-standard data fetching and caching patterns in new projects

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add julianromli/opencode-template vercel-react-best-practices

For use in Claude.ai and ChatGPT

Download Skill