vercel-react-best-practices

Identify performance bottlenecks and apply Vercel React best practices to React/Next.js apps.

141|20|Updated Dec 19, 2025

Search Tags:#performance #react #codegen #nextjs #best-practices #bundling #server-components

Ready to run

npx skills add https://github.com/julianromli/opencode-template --skill vercel-react-best-practices-julianromli

💬 Prompt for ChatGPT / Claude Chat▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

React and Next.js projects often struggle with performance regressions, bloated bundles, and waterfalls during data fetching, leading to slow load times and poor UX.

Core Features & Use Cases

Priority-driven guidelines across 8 categories (async waterfalls, bundle size, server-side performance, client data fetching, re-render optimization, rendering performance, JavaScript performance, advanced patterns) to guide automated refactoring and reviews.
Concrete rules and examples to illustrate correct vs incorrect implementations, enabling safer, faster improvements at scale.
Automation-friendly templates for generating, auditing, and applying performance improvements in components, pages, and APIs.

Quick Start

Review and apply the prioritized performance improvements to an existing React/Next.js codebase.

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 and Next.js performance bottlenecks like bloated bundles and data fetching waterfalls?▼

Fix React and Next.js performance bottlenecks by applying priority-driven guidelines across 8 categories including bundle size, server-side performance, and re-render optimization to guide automated refactoring and code reviews.

What are Vercel React best practices for optimizing server and client component interactions?▼

Vercel React best practices for server and client interactions require immutable patterns, efficient data loading, safe server-actions practices, and robust caching and suspense strategies across components, pages, and APIs.

How do I reduce bundle size and optimize rendering in Next.js applications?▼

Reduce bundle size and optimize rendering in Next.js applications by applying concrete rules and automation-friendly templates that illustrate correct versus incorrect implementations for safer, faster improvements at scale.

Does this Next.js performance optimization approach work with existing React codebases?▼

This Next.js performance optimization approach works with existing React codebases by reviewing and applying prioritized performance improvements targeting rendering, data fetching, and bundle optimization across components, pages, and APIs.

When should I use suspense strategies and server-actions for client data fetching in React?▼

Use suspense strategies and safe server-actions for client data fetching when addressing common real-world application bottlenecks, requiring adherence to immutable patterns and efficient data loading to prevent performance regressions.