skills.rest
eykissvrino
eykissvrinoCOMMUNITY
Explore all skills by this author →
GitHub

vercel-react-best-practices

Apply React and Next.js performance rules to components and pages.

1|Updated Mar 19, 2026
Search Tags:#performance#frontend#react#optimization#nextjs#web#bundle
One-click install
npx skills add https://github.com/eykissvrino/project --skill vercel-react-best-practices-eykissvrino
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vercel-react-best-practices
Source: https://github.com/eykissvrino/project/tree/main/_core/skills/vercel-react-best-practices
Command: npx skills add https://github.com/eykissvrino/project --skill vercel-react-best-practices-eykissvrino

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

React and Next.js projects often suffer from performance regressions, bloated bundles, and slow data-fetching patterns that degrade user experience.

Core Features & Use Cases

  • Structured performance guidelines covering 57 rules across 8 priority categories to guide automated refactoring and code generation.
  • Priority-driven patterns for eliminating waterfalls, bundle optimization, server-side performance, and client-side data fetching.
  • Real-world applicability across writing, reviewing, and refactoring React components and Next.js pages to consistently improve metrics like TTI and LCP.
  • Use case example: automatically apply best practices when optimizing a large Next.js app, ensuring patterns are followed in new components and during reviews.

Quick Start

Start by auditing a React/Next.js component or page and apply the relevant rules to progressively improve performance.

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 when refactoring components?▼

Reduce React bundle size by enforcing priority-driven patterns for bundle optimization and server-side performance, ensuring safe server/client boundaries are maintained across Next.js pages.

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

Prevent data fetching waterfalls in Next.js by applying structured priority-driven patterns that enable parallel data fetching and enforce safe server/client boundaries across your pages.

Can I use these performance guidelines for both writing new React components and reviewing existing ones?▼

Yes, these performance guidelines apply to writing new React components and reviewing existing ones, ensuring consistent adherence to patterns that improve metrics like TTI and LCP across real-world projects.

Does this approach support safe server and client component boundaries in Next.js?▼

Yes, this approach supports safe server/client boundaries in Next.js by enforcing specific patterns during data fetching and page refactoring to avoid boundary violations and improve performance.

Why does my React application suffer from performance regressions and bloated bundles?▼

React applications suffer from performance regressions and bloated bundles due to slow data-fetching patterns and unoptimized code, which can be fixed by applying structured best practices for bundle optimization.

Related Skills

Explore More Software Engineering Skills→
AMontaguAMontagu

vercel-react-best-practices

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

Community
Advanced
quanganh208quanganh208

ck:react-best-practices

Audit React and Next.js pages for waterfalls and bundle bloat.

Community
Advanced
alexdcdalexdcd
46

vercel-react-best-practices

Enforce React and Next.js performance best practices in code reviews and refactors.

Community
Advanced
brunocentanarobrunocentanaro

vercel-react-best-practices

Apply React and Next.js performance optimization rules across components, pages, and data fetching.

Community
Advanced