vercel-react-best-practices

Optimize React and Next.js application performance with Vercel best practices.

2|1|Updated Feb 2, 2026
One-click install
npx skills add https://github.com/fadilsflow/kreasi --skill vercel-react-best-practices-fadilsflow
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vercel-react-best-practices
Source: https://github.com/fadilsflow/kreasi/tree/main/.agents/skills/vercel-react-best-practices
Command: npx skills add https://github.com/fadilsflow/kreasi --skill vercel-react-best-practices-fadilsflow

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) and scripts (resource) components.

What problem does it solve?

This Skill provides a comprehensive set of best practices and rules to optimize the performance of React and Next.js applications, addressing critical areas like waterfalls, bundle size, and rendering efficiency.

Core Features & Use Cases

  • Performance Optimization: Offers 40+ rules across 8 categories, prioritized by impact, to guide developers in writing performant React/Next.js code.
  • Code Refactoring: Provides specific guidance on how to refactor existing code for better performance.
  • AI-Assisted Development: Designed for agents and LLMs to ensure consistency and adherence to Vercel's performance standards.
  • Use Case: When developing a new Next.js page, consult this Skill to ensure data fetching is optimized, bundle size is minimized, and rendering is efficient, leading to faster load times and a better user experience.

Quick Start

Apply the vercel-react-best-practices skill to review the current code for performance bottlenecks.

Frequently Asked Questions about vercel-react-best-practices

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I optimize React and Next.js application performance?▼

To optimize React and Next.js performance, apply over 40 rules across 8 categories, prioritized by impact, covering waterfalls, bundle size, server-side data fetching, re-rendering, and JavaScript execution.

What are Vercel best practices for reducing bundle size in Next.js?▼

Vercel best practices for reducing bundle size involve specific code refactoring patterns and rules that minimize client-side JavaScript, ensuring efficient server-side and client-side data fetching.

How do I eliminate data fetching waterfalls in Next.js?▼

Eliminate Next.js data fetching waterfalls by applying targeted refactoring guidance that optimizes server-side and client-side fetches, preventing sequential loading delays and improving page speed.

Can I use this to refactor existing React code for better rendering performance?▼

Yes, you can refactor existing React code for rendering performance using specific guidance on re-render optimization and advanced patterns to enforce Vercel engineering standards.

Does this guide cover both server-side and client-side data fetching?▼

Yes, the guide covers both server-side and client-side data fetching, providing comprehensive rules to ensure data fetching is optimized and waterfalls are eliminated.

What is the best way to prevent unnecessary re-renders in React?▼

The best way to prevent unnecessary React re-renders is applying specific optimization rules and advanced patterns that enforce performance standards for automated code generation and refactoring.