vercel-react-best-practices

Review React and Next.js code for performance bottlenecks using best practices.

Updated Sep 7, 2025

Search Tags:#performance #react #optimization #bundle size #next.js #server-side rendering

Ready to run

npx skills add https://github.com/BartekFo/my-dev-setup --skill vercel-react-best-practices-bartekfo

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: vercel-react-best-practices
Source: https://github.com/BartekFo/my-dev-setup/tree/main/.agents/skills/vercel-react-best-practices
Command: npx skills add https://github.com/BartekFo/my-dev-setup --skill vercel-react-best-practices-bartekfo

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill provides a comprehensive set of rules and guidelines to optimize the performance of React and Next.js applications, addressing critical areas like bundle size, server-side rendering, and re-render efficiency.

Core Features & Use Cases

Performance Optimization: Apply best practices for eliminating waterfalls, reducing bundle size, and improving server-side and client-side rendering.
Code Refactoring: Use the detailed rules to refactor existing code for better performance.
Use Case: Ensure your Next.js e-commerce site loads quickly by applying rules to optimize image loading, reduce JavaScript bundle size, and parallelize data fetching on the server.

Quick Start

Apply the vercel-react-best-practices skill to review the provided React component 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

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

Reducing JavaScript bundle size in Next.js involves applying targeted optimization rules to remove unused code and optimize imports. This process minimizes client-side payload, directly improving application loading times.

How do I fix React re-render efficiency issues and prevent unnecessary component updates?▼

Fixing React re-render efficiency requires reviewing component code against specific rules for preventing unnecessary updates. Refactoring components based on these guidelines minimizes redundant rendering cycles and improves client-side responsiveness.

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

Yes, you can use the detailed optimization rules to refactor existing React components for better performance. The guide provides over 50 actionable rules to identify and resolve performance bottlenecks in current codebases.

Why does my Next.js e-commerce site have slow image loading and how can I speed it up?▼

Slow Next.js image loading is resolved by applying rules to optimize image loading and parallelize server-side data fetching. Implementing these practices ensures quick asset delivery and faster page rendering.