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

Yes, it includes specific rules for bundle optimization, such as eliminating barrel imports, implementing dynamic imports, and deferring third-party scripts.

Does it support the latest React features like Server Components?

Absolutely. The skill includes dedicated categories for server-side performance, including React.cache() usage and minimizing data serialization between server and client.

How does this skill improve Next.js performance?

It applies 45 engineering rules specifically designed to optimize data fetching, server-side rendering, and bundle distribution according to Vercel's internal standards.

How does Claude use these rules during development?

Claude references the prioritized rule set when writing, reviewing, or refactoring code to ensure every change follows high-performance patterns like parallel fetching and memoization.

Vercel React Best Practices

Name: Vercel React Best Practices
Author: deadronos

bydeadronos

0•

개발자 도구

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

This skill integrates Vercel's comprehensive performance optimization framework directly into Claude's workflow, providing 45 prioritized rules across eight critical categories. It enables Claude to identify and fix performance bottlenecks in React and Next.js applications, ranging from critical data-fetching waterfalls and bundle size bloat to subtle re-render issues and server-side caching inefficiencies. By applying these verified engineering patterns, the skill ensures that code generation and refactoring tasks result in production-grade, high-performance web applications that align with modern web vitals.

주요 기능

01Server-side caching and serialization best practices for Next.js

02Advanced re-render and DOM rendering performance patterns

03Comprehensive bundle size optimization and dynamic import strategies

04Automated identification and elimination of data-fetching waterfalls

0545 prioritized performance rules across 8 impact categories

060 GitHub stars

사용 사례

01Architecting new data-fetching layers that leverage parallel execution and server-side caching

02Auditing existing Next.js projects to improve Core Web Vitals and load times

03Refactoring legacy React components to minimize unnecessary re-renders and JS execution

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add deadronos/deadronostask vercel-react-best-practices

For use in Claude.ai and ChatGPT

Download Skill