skills.rest
martinsione
martinsioneCOMMUNITY
Explore all skills by this author →
Website𝕏@sionemartGitHub

vercel-react-best-practices

Apply React/Next.js performance rules to reduce bundle size and fetch waterfalls.

1|Updated Jan 30, 2026
Search Tags:#performance#react#next.js#best-practices#bundling#server-components
One-click install
npx skills add https://github.com/martinsione/ralphbox.dev --skill vercel-react-best-practices-martinsione
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vercel-react-best-practices
Source: https://github.com/martinsione/ralphbox.dev/tree/main/.agents/skills/vercel-react-best-practices
Command: npx skills add https://github.com/martinsione/ralphbox.dev --skill vercel-react-best-practices-martinsione

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill consolidates React/Next.js performance guidelines from Vercel into a practical playbook to speed up UI, reduce waterfalls, and optimize bundles.

Core Features & Use Cases

  • Structured rules across 8 categories for performant React apps and Next.js pages.
  • Automation-friendly guidance for writing, reviewing, and refactoring components with measurable impact.
  • Use Case: when optimizing a Next.js app, apply rules to reduce bundle size and server/client fetch waterfalls.

Quick Start

Use the vercel-react-best-practices skill to audit a React page for waterfalls and overly large bundles, then implement the recommended patterns.

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 optimize React and Next.js performance for rendering and data fetching?▼

Apply structured best practices to component rendering patterns, server actions, and client-side data fetching to reduce waterfalls and improve UI speed across React and Next.js projects.

What are the best practices for reducing bundle size in a Next.js app?▼

Reduce Next.js bundle size by auditing pages for overly large bundles and applying recommended patterns for bundle optimization. This enforces rules across eight categories to minimize bundle inefficiency.

How do server components affect data fetch waterfalls in Next.js?▼

Server components affect Next.js data fetch waterfalls by shifting data fetching to the server, reducing client-side waterfalls. Best practices enforce specific rules for server actions and component rendering patterns to minimize delays.

Can I use this to audit an existing React page for performance issues?▼

Yes, you can audit an existing React page for performance issues like waterfalls and large bundles. The skill provides automation-friendly guidance for writing, reviewing, and refactoring components with measurable impact.

What are the limitations of applying Vercel React best practices to a project?▼

The scope is limited to component rendering patterns, server actions, client-side data fetching, and bundle optimization across React and Next.js projects. It relies on optional scripts and references to augment guidance within these eight categories.

Related Skills

Explore More Software Engineering Skills→
OmarMiraOmarMira

nextjs-react-expert

Optimize React and Next.js performance using 57 Vercel Engineering rules.

Community
Advanced
rahlplxrahlplx

astro-performance-expert

Apply engineering rules to improve Astro site performance and Core Web Vitals.

Community
Advanced
vudovnvudovn
8.1k

react-best-practices

Diagnose React and Next.js performance bottlenecks and propose optimizations.

Community
Advanced
JochenYangJochenYang
21

performance-optimizer

Identify performance bottlenecks and optimize application speed across backend, database, and frontend workflows.

Community
Intermediate