skills.rest
gridelectric
gridelectricCOMMUNITY
Explore all skills by this author →
GitHub

vercel-react-best-practices

Apply optimization guidelines to React and Next.js codebases for loading, rendering, and bundle efficiency.

Updated Feb 12, 2026
Search Tags:#performance#react#next.js#best-practices#bundle#server-actions
One-click install
npx skills add https://github.com/gridelectric/Grid2 --skill vercel-react-best-practices-gridelectric
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vercel-react-best-practices
Source: https://github.com/gridelectric/Grid2/tree/main/.agents/skills/vercel-react-best-practices
Command: npx skills add https://github.com/gridelectric/Grid2 --skill vercel-react-best-practices-gridelectric

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This guide helps teams consistently apply proven performance patterns to React and Next.js projects, reducing waterfalls, bundle size, and server/client fetch inefficiencies.

Core Features & Use Cases

  • 57 rules across 8 categories prioritized by impact to guide automated refactoring and code generation.
  • Comprehensive, practical guidance with detailed explanations and real-world examples to drive automated improvements.
  • Used during writing, reviewing, or refactoring React components, Next.js pages, and data-fetching patterns to optimize load times and UX.

Quick Start

Review the AGENTS.md and SKILL.md to apply the patterns to your codebase.

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 during code refactoring?▼

Optimize React and Next.js performance during refactoring by applying 57 prioritized rules that eliminate data waterfalls, reduce bundle size, and improve server-side rendering and client data fetching efficiency.

What's the best way to eliminate data fetching waterfalls in Next.js applications?▼

Eliminate Next.js data fetching waterfalls by applying targeted server-side performance and advanced data-fetching patterns that parallelize requests and improve loading efficiency for components and pages.

How can I reduce the bundle size of my React applications?▼

Reduce React application bundle size by following efficient bundling guidelines and best practices that streamline imports and optimize loading strategies to improve overall rendering performance.

Does this React performance guidance cover server actions and re-render optimization?▼

Yes, this React performance guidance covers server actions and re-render optimization, providing patterns to improve client data fetching and advanced rendering efficiency within Next.js codebases.

When should I apply server-side performance patterns to my React components?▼

Apply server-side performance patterns to React components when writing or reviewing Next.js pages to optimize data fetching, reduce client-side bottlenecks, and improve overall application loading times.

Related Skills

Explore More Software Engineering Skills→
cdub615cdub615

vercel-react-best-practices

Apply Vercel best practices to optimize React and Next.js performance.

Community
Advanced
tja688tja688

unity-performance

Profile Unity rendering, CPU/GPU workloads, and memory usage to identify bottlenecks.

Community
Intermediate
zapabobzapabob
2

ts-reviewer

Review TypeScript and JavaScript code for type safety and best practices.

Community
Advanced
Ms1blackMs1black

react-best-practices

Optimize React and Next.js applications with code splitting and deferred loading.

Community
Intermediate