vercel-react-best-practices

Name: vercel-react-best-practices
Availability: InStock
Author: samuelross99

Audit React/Next.js components and data-fetching patterns for performance issues.

1|Updated Jan 21, 2026

Search Tags:#performance #refactoring #react #optimization #Next.js #best-practices

Ready to run

npx skills add https://github.com/samuelross99/designforge --skill vercel-react-best-practices-samuelross99

💬 Prompt for ChatGPT / Claude Chat▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

React/Next.js apps often suffer performance regressions due to inefficient data fetching, large bundles, and suboptimal rendering patterns. This skill standardizes best practices to detect and fix these issues.

Core Features & Use Cases

Comprehensive guidance on eliminating waterfalls, reducing bundle sizes, and optimizing server/client boundaries.
Actionable patterns for Suspense, parallel data fetching, and dynamic imports across real-world projects.
Use Case: When reviewing a Next.js page, identify bottlenecks, apply recommended patterns, and verify improvements in TTI/LCP metrics.

Quick Start

Apply the React Best Practices to a React/Next.js project by auditing components, pages, and data-fetching logic. Implement the top-priority patterns first (suspense boundaries, defer non-critical work, and bundle optimizations) and iterate with automated checks to maintain performance standards.

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 regressions caused by inefficient data fetching?▼

To fix React and Next.js performance regressions, standardize best practices to detect and resolve data fetching waterfalls by applying parallel data fetching patterns and Suspense boundaries. This reduces rendering bottlenecks and improves loading metrics.

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 bundle optimization patterns across client and server boundaries, utilizing dynamic imports to defer non-critical work and minimize the initial JavaScript payload.

How do I optimize server and client boundaries when refactoring Next.js components?▼

Optimize server and client boundaries during Next.js component refactoring by applying actionable patterns that correctly segregate server actions and client-side logic, ensuring data fetching remains efficient and bundle sizes stay minimal.

When should I use Suspense boundaries in React and Next.js projects?▼

Use Suspense boundaries in React and Next.js projects when you need to defer non-critical work and eliminate data fetching waterfalls. Implementing them as a top-priority pattern helps systematically resolve performance inefficiencies.

How do I audit a Next.js page for performance bottlenecks?▼

Audit a Next.js page for performance bottlenecks by reviewing components, pages, and data-fetching logic to identify inefficiencies. Apply recommended patterns like Suspense boundaries and bundle optimizations, then verify TTI and LCP metric improvements.