skills.rest
MGriot
MGriotCOMMUNITY
Explore all skills by this author →
GitHub

vercel-react-best-practices

Identify and apply React/Next.js performance optimizations to components, pages and data flows.

Updated Jan 31, 2026
Search Tags:#performance#react#optimization#next.js#code-review#bundle
One-click install
npx skills add https://github.com/MGriot/.gemini --skill vercel-react-best-practices-mgriot
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vercel-react-best-practices
Source: https://github.com/MGriot/.gemini/tree/main/skills/react-best-practices
Command: npx skills add https://github.com/MGriot/.gemini --skill vercel-react-best-practices-mgriot

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill codifies React and Next.js performance best practices from Vercel Engineering to help teams design, review, and refactor code for faster, more reliable apps.

Core Features & Use Cases

  • Guided refactoring recommendations: Provide actionable suggestions to reduce waterfalls, optimize bundle size, and improve data-fetching patterns.
  • Data fetching & rendering patterns: Guidance on Suspense boundaries, parallel data fetching, caching, and optimal component composition.
  • Automation-ready guidance: Clear, repeatable patterns that can be consumed by AI-assisted workflows or automated review tools.

Quick Start

Describe a React/Next.js component or page and request a prioritized performance improvement plan.

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 component rendering and reduce bottlenecks?▼

To optimize React component rendering, identify bottlenecks in your data flows and component composition. Applying targeted memoization strategies and optimizing data-fetching patterns reduces unnecessary re-renders and improves overall page performance.

What is the best way to prevent data fetching waterfalls in Next.js?▼

Preventing data fetching waterfalls involves restructuring your Next.js routes to use parallel data fetching. By fetching data concurrently and implementing proper Suspense boundaries, you minimize sequential loading delays and speed up page rendering times.

How do I reduce bundle size when refactoring React components?▼

You can reduce bundle size by applying bundle-splitting strategies during component refactoring. Optimizing component composition and separating heavy dependencies ensures that your application loads only the necessary JavaScript for the current page.

When should I use Suspense boundaries in Next.js pages?▼

Suspense boundaries should be used when parallel data fetching creates sequential loading delays. Wrapping optimized Next.js page components in Suspense boundaries allows the UI to render progressively, improving perceived load times while data streams in.

Can I use this approach to review existing React and Next.js code?▼

Yes, these performance best practices are designed for automated code review. Analyzing existing React components and Next.js routes against these patterns highlights data flow bottlenecks and recommends actionable refactoring steps for faster apps.

Related Skills

Explore More Software Engineering Skills→
AMontaguAMontagu

vercel-react-best-practices

Identify performance bottlenecks in React components and Next.js pages.

Community
Advanced
coco-researchcoco-research
264

vercel-react-best-practices

Optimize React and Next.js code for performance regressions.

Community
Advanced
jangtrinhjangtrinh

web-perf

Analyze web performance gaps and optimize Core Web Vitals with Lighthouse.

Community
Intermediate
marcusagmmarcusagm
4

lint-and-validate

Run linting, type checking, and security audits across Node.js/TypeScript and Python projects.

Community
Intermediate