vercel-react-best-practices

Apply React/Next.js best practices for rendering, data fetching, and bundling.

1|Updated Oct 30, 2023
One-click install
npx skills add https://github.com/siluat/web-projects --skill vercel-react-best-practices-siluat
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vercel-react-best-practices
Source: https://github.com/siluat/web-projects/tree/main/.agents/skills/vercel-react-best-practices
Command: npx skills add https://github.com/siluat/web-projects --skill vercel-react-best-practices-siluat

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill provides a centralized, practical set of performance guidelines for React and Next.js projects, helping teams optimize rendering, data fetching, and bundle size.

Core Features & Use Cases

  • 8 priority-based rule categories covering critical to low impact optimizations.
  • Clear patterns for eliminating waterfalls, parallelizing fetches, and reducing bundle bloat.
  • Real-world examples and guardrails to support writing, reviewing, and refactoring code.

Quick Start

Review the guidelines and apply the recommended patterns to your React/Next.js project.

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 eliminate data fetching waterfalls in Next.js?▼

To eliminate data fetching waterfalls in Next.js, apply standardized patterns that parallelize fetches across components and pages. These guidelines provide priority-based rules for restructuring data flows to remove sequential blocking requests and enable efficient client/server data flows.

What is the best way to reduce bundle size in a React application?▼

The best way to reduce bundle size in a React application is to apply build-time optimizations and targeted bundling rules. These guidelines provide clear patterns for reducing bundle bloat by guiding component generation and refactoring tasks.

How do I secure server actions in Next.js?▼

Securing server actions in Next.js requires applying standardized best practices for client/server data flows. These guidelines include guardrails and real-world examples to support writing, reviewing, and refactoring secure server action implementations.

How does Suspense affect React rendering performance?▼

Suspense affects React rendering performance by enabling efficient client/server data flows and preventing waterfalls. These guidelines detail how to apply Suspense patterns across components and pages to optimize rendering and data fetching tasks.

When do I need to optimize rendering and data fetching in modern React?▼

You need to optimize rendering and data fetching in modern React when facing performance bottlenecks like sequential blocking requests or bundle bloat. These guidelines provide 8 priority-based rule categories to guide generation, review, and refactor tasks for these specific issues.

Can I use these Next.js performance guidelines for code reviews?▼

Yes, you can use these Next.js performance guidelines for code reviews. They provide real-world examples and guardrails that support writing, reviewing, and refactoring code across components, pages, and data fetching implementations.