vercel-react-best-practices

Review React and Next.js code for performance and data-fetching issues.

Updated Jun 15, 2026

Search Tags:#performance #refactoring #react #optimization #nextjs #data-fetching #bundle-size

Ready to run

npx skills add https://github.com/giovi1998/SitoPreventivo --skill vercel-react-best-practices-giovi1998

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: vercel-react-best-practices
Source: https://github.com/giovi1998/SitoPreventivo/tree/main/.agents/skills/vercel-react-best-practices
Command: npx skills add https://github.com/giovi1998/SitoPreventivo --skill vercel-react-best-practices-giovi1998

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps you identify and fix performance, rendering, and data-fetching issues in React and Next.js projects before they become slow builds, janky UIs, or unnecessary waterfalls.

Core Features & Use Cases

Performance Refactoring: Apply proven patterns to reduce re-renders, avoid waterfalls, and keep interactions responsive.
Bundle Optimization: Improve load times by using better import patterns, dynamic loading, and statically analyzable paths.
Server and Client Guidance: Handle server-side fetching, caching, serialization, and client-side state patterns more safely.
Use Case: Review a page that feels sluggish, then suggest targeted changes for data fetching, component structure, and rendering behavior.
Use Case: Refactor a Next.js route or action to improve concurrency, security, and response time without changing business logic.

Quick Start

Use the vercel-react-best-practices skill to review my React or Next.js code and recommend the highest-impact performance improvements.

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 identify and fix React performance issues like unnecessary re-renders?▼

To fix React performance issues, review component design and rendering behavior to apply proven refactoring patterns that reduce re-renders and keep interactions responsive. This process targets component structure to eliminate janky UI behavior.

What's the best way to optimize bundle size and load times in a Next.js application?▼

Optimizing bundle size in a Next.js application involves improving load times through better import patterns, dynamic loading, and statically analyzable paths. This refactoring approach reduces initial bundle weight for faster page loads.

How do I avoid data fetching waterfalls in React and Next.js server actions?▼

Avoiding data fetching waterfalls requires applying rules for caching, serialization, and immutability to guide safe changes. Refactoring Next.js routes and actions improves concurrency and response time without altering business logic.

Can I use this approach to refactor server-side fetching and client-side state patterns safely?▼

Yes, you can safely handle server-side fetching, caching, and serialization alongside client-side state patterns. This guidance ensures secure, high-impact changes to server and client workflows in production web applications.

What are the limitations when refactoring React code for performance and concurrency?▼

Refactoring React code for performance requires careful adherence to rules for serialization and immutability to prevent unsafe changes. Limitations arise when altering rendering behavior or server action workflows without maintaining business logic integrity.

When do I need to review my React or Next.js code for performance optimizations?▼

You need to review React or Next.js code for performance optimizations when a page feels sluggish or before slow builds and janky UIs occur. Targeted changes improve data fetching, component structure, and rendering behavior.