skills.rest
potatsukki
potatsukkiCOMMUNITY
Explore all skills by this author →
GitHub

vercel-react-best-practices

Apply performance guidelines to React/Next.js projects for data fetching and bundling.

2|Updated Feb 16, 2026
Search Tags:#performance#refactoring#react#optimization#next.js#server-side#bundle
One-click install
npx skills add https://github.com/potatsukki/rmv-web --skill vercel-react-best-practices-potatsukki
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vercel-react-best-practices
Source: https://github.com/potatsukki/rmv-web/tree/main/.agents/skills/vercel-react-best-practices
Command: npx skills add https://github.com/potatsukki/rmv-web --skill vercel-react-best-practices-potatsukki

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

React/Next.js projects often suffer from waterfalls, bloated bundles, and hydration pitfalls that degrade performance. This skill provides a curated, scalable set of guidelines to diagnose and implement performance improvements, enabling faster renders and better UX.

Core Features & Use Cases

  • 57 rules across 8 priority-based categories to guide automated refactoring and code generation.
  • Used when writing new React components, reviewing code, or refactoring legacy code to optimize bundles and data-fetching strategies.
  • Employs structured best practices to reduce waterfalls, optimize bundle size, parallelize data fetches, and avoid hydration/mismatch pitfalls.

Quick Start

Analyze a React/Next.js project and apply the recommended performance patterns.

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 fix React performance bottlenecks caused by data fetching waterfalls?▼

React performance bottlenecks from data fetching waterfalls are fixed by applying curated guidelines that parallelize data fetches and optimize fetching strategies. This skill provides structured rules to diagnose and refactor legacy code for faster renders.

What is the best way to reduce bundle size in a Next.js application?▼

The best way to reduce bundle size in a Next.js application is to apply structured best practices for code generation and refactoring. This skill covers 57 rules across 8 priority categories to optimize bloated bundles and improve load times.

How do I avoid hydration mismatches during SSR refactoring in React?▼

To avoid hydration mismatches during SSR refactoring in React, use curated performance patterns that ensure safe server-side and client-side rendering alignment. This skill provides guidelines to prevent pitfalls and improve LCP and TTI.

Can I use these React optimization rules for both new components and legacy code?▼

Yes, you can use these React optimization rules for both new components and legacy code. The guidelines are designed to help write new code, review existing code, and safely refactor projects to optimize bundles and data-fetching strategies.

Why does my Next.js project suffer from slow TTI and how can I improve it?▼

Your Next.js project suffers from slow TTI due to waterfalls, bloated bundles, and hydration pitfalls. You can improve TTI by applying this skill's curated guidelines to optimize data fetching, bundling, and SSR/CSR patterns.

Related Skills

Explore More Software Engineering Skills→
aayushsharma141aayushsharma141

vercel-react-best-practices

Enforce 57 React and Next.js performance rules across 8 categories.

Community
Advanced
aresbitaresbit
46

vercel-react-best-practices

Apply performance optimization rules to React and Next.js code.

Community
Advanced
tmcfarlanetmcfarlane
105

vercel-react-best-practices

Review React and Next.js code for performance and scalability.

Community
Advanced
J03Fr0stJ03Fr0st

performance-optimization

Measure, identify, and fix performance bottlenecks in frontend and backend applications.

Community
Advanced