skills.rest
marinvch
marinvchCOMMUNITY
Explore all skills by this author →
GitHub

vercel-react-best-practices

Apply Vercel performance patterns to React and Next.js code.

Updated Mar 13, 2026
Search Tags:#performance#react#optimization#vercel#nextjs#guidelines#best-practices
One-click install
npx skills add https://github.com/marinvch/ai-os --skill vercel-react-best-practices-marinvch
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vercel-react-best-practices
Source: https://github.com/marinvch/ai-os/tree/main/.agents/skills/vercel-react-best-practices
Command: npx skills add https://github.com/marinvch/ai-os --skill vercel-react-best-practices-marinvch

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Efficient and scalable React/Next.js development by applying established performance patterns from Vercel Engineering, reducing common anti-patterns and guiding consistent refactoring.

Core Features & Use Cases

  • Curated rules and guidance covering server actions, data fetching, bundling, Suspense, caching, rendering, and client/server patterns for React/Next.js apps.
  • Use cases include improving Time to Interactive, reducing waterfall fetches, and optimizing bundle size across large monorepos or multi-framework stacks.
  • Example: identify a slow server action and convert to parallel fetches with proper suspense boundaries to speed up initial render.

Quick Start

Use the guidelines to audit and refactor your React/Next.js codebase for performance improvements.

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 faster initial render?▼

Optimize React and Next.js performance by applying established Vercel patterns like parallel data fetching, Suspense boundaries, and server actions to reduce waterfall requests and improve Time to Interactive.

What is the best way to refactor slow Next.js server actions and waterfall fetches?▼

Refactor slow Next.js server actions by converting sequential fetches to parallel requests and wrapping them with proper Suspense boundaries, enforcing deterministic refactoring to speed up initial render safely.

Does this refactoring approach work for large monorepos or multi-framework stacks?▼

Yes, these performance patterns apply across large monorepos and multi-framework stacks, auditing bundling, caching, and rendering logic to reduce common anti-patterns and optimize bundle size.

When should I use Suspense boundaries and explicit decision boundaries in React components?▼

Use Suspense boundaries and explicit decision boundaries when refactoring client/server patterns to separate data-fetching logic, ensuring safe and deterministic optimizations without breaking component correctness.

What are common React and Next.js anti-patterns that hurt Time to Interactive?▼

Common anti-patterns hurting Time to Interactive include waterfall data fetches, improper server action usage, and bloated bundle sizes, which are addressed by applying consistent Vercel engineering guidelines.

Related Skills

Explore More Software Engineering Skills→
sao-codingsao-coding

vercel-react-best-practices

Apply performance optimization patterns to React and Next.js code.

Community
Advanced
SylphxAISylphxAI
4

performance

Analyze Next.js frontend performance for Core Web Vitals and bundle size.

Official
Intermediate
p-potvinp-potvin
1

vercel-react-best-practices

Review React and Next.js code for performance bottlenecks and bundle size.

Community
Intermediate
yangsi7yangsi7
1

analyze-code

Analyze code for bugs, architecture, performance, and security issues.

Community
Intermediate