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

Yes, it includes specific guidelines for server-side execution, data serialization, and client-side re-render management to ensure end-to-end efficiency.

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

Absolutely. It provides automated guidance for avoiding barrel files, implementing next/dynamic, and deferring third-party scripts until after hydration.

When should I trigger the vercel-react-best-practices skill?

Reference this skill during new component creation, code reviews, or dedicated refactoring sessions focused on improving load speeds and interactivity.

How does this skill improve Next.js performance?

It applies Vercel-specific rules like eliminating waterfalls via Suspense, optimizing data fetching patterns, and managing bundle sizes through targeted dynamic imports.

Vercel React Best Practices

Name: Vercel React Best Practices
Author: CloudAI-X

byCloudAI-X

•

1,190

•

클라우드 인프라

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

This skill integrates Vercel’s authoritative performance guidelines directly into your Claude Code workflow, offering 45 specific rules to eliminate network waterfalls, minimize bundle sizes, and optimize server-side execution. It acts as an automated performance architect, helping developers refactor existing code or generate new components that adhere to professional-grade efficiency standards. By applying these patterns during development and code review, users can ensure faster load times, improved Core Web Vitals, and smoother user experiences in modern web applications.

주요 기능

01Eliminates network waterfalls with advanced async/await and streaming patterns

02Refines re-render logic using memoization, transitions, and derived state management

03Enhances rendering speed with JSX hoisting and content-visibility optimizations

04Reduces bundle sizes through smart dynamic imports and barrel file elimination

05Optimizes server-side performance with request deduplication and serialization strategies

061,190 GitHub stars

사용 사례

01Reviewing Next.js pull requests for performance bottlenecks and waterfall issues

02Refactoring legacy React codebases to improve Core Web Vitals and performance scores

03Generating high-performance data fetching logic for complex enterprise dashboards

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add cloudai-x/claude-workflow-v2 vercel-react-best-practices

For use in Claude.ai and ChatGPT

Download Skill