skills.rest
malston
malstonCOMMUNITY
Explore all skills by this author →
𝕏@marsguitarsGitHub

vercel-react-best-practices

Apply Vercel React/Next.js performance guidelines to codebases.

Updated Dec 18, 2025
Search Tags:#performance#react#next.js#vercel#best-practices#server-components#bundle-size
One-click install
npx skills add https://github.com/malston/diego-capacity-analyzer --skill vercel-react-best-practices-malston
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vercel-react-best-practices
Source: https://github.com/malston/diego-capacity-analyzer/tree/main/.devcontainer/claude-config/.library/skills/vercel-react-best-practices
Command: npx skills add https://github.com/malston/diego-capacity-analyzer --skill vercel-react-best-practices-malston

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides a structured, repeatable approach to applying Vercel's React and Next.js performance guidelines to codebases, helping teams reduce regressions and speed up apps.

Core Features & Use Cases

  • Performance patterns: guidance on eliminating waterfalls, optimizing bundles, and enabling parallel data fetching.
  • Review & refactor support: actionable recommendations during code reviews and refactors to improve runtime and bundle size.
  • Use Case: when optimizing a Next.js page with Server Components or client components to minimize waterfalls and improve TTI across routes.

Quick Start

Inspect a React/Next.js component or page and generate a prioritized refactor plan aligned with Vercel's guidelines.

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 Next.js Server Components to reduce data fetching waterfalls?▼

To optimize Next.js Server Components and reduce data fetching waterfalls, apply parallel data fetching patterns and enforce safe server/client boundaries to improve runtime performance and Time to Interactive across routes.

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

The best way to reduce React bundle size is by applying Vercel performance guidelines during code reviews and refactors to optimize server/client component boundaries and eliminate unnecessary client-side JavaScript.

How do I review and refactor React components for Vercel performance patterns?▼

Review and refactor React components by inspecting pages to generate a prioritized refactor plan aligned with Vercel guidelines, focusing on eliminating waterfalls, reducing bundle size, and enabling parallel data fetching.

When do I need to enforce safe SSR and CSR boundaries in Next.js?▼

You need to enforce safe SSR and CSR boundaries in Next.js when writing and reviewing data-fetching logic to prevent runtime performance regressions and ensure optimal server/client component separation.

Does this approach work for optimizing Next.js pages with mixed Server and Client Components?▼

Yes, this approach works for optimizing Next.js pages with mixed components by minimizing waterfalls and ensuring safe boundaries between Server Components and Client Components to improve overall route performance.

Related Skills

Explore More Software Engineering Skills→
SPeeDoA1SPeeDoA1
6

performance-audit

Audit web application performance with Lighthouse, WebPageTest, and Chrome DevTools.

Community
Intermediate
juanjaragavijuanjaragavi

vercel-react-best-practices

Applies Vercel performance optimization rules when writing or refactoring React and Next.js code.

Community
Intermediate
The-InterdependencyThe-Interdependency
1

vercel-react-best-practices

Refactor React/Next.js code for performance using Vercel best practices.

Official
Advanced
jhlee0409jhlee0409

code-review

Review TypeScript and React code for quality, accessibility, and performance.

Community
Intermediate