skills.rest
mr-phariyawit
mr-phariyawitCOMMUNITY
Explore all skills by this author →
GitHub

vercel-react-best-practices

Apply performance best-practice rules to React and Next.js code.

Updated Jan 9, 2026
Search Tags:#performance#refactoring#react#optimization#next.js#guidelines#best-practices
One-click install
npx skills add https://github.com/mr-phariyawit/startup --skill vercel-react-best-practices-mr-phariyawit
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vercel-react-best-practices
Source: https://github.com/mr-phariyawit/startup/tree/main/.agent/skills/vercel-react-best-practices
Command: npx skills add https://github.com/mr-phariyawit/startup --skill vercel-react-best-practices-mr-phariyawit

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

The Vercel React Best Practices skill standardizes performance-focused rules to help teams identify and fix bottlenecks in React and Next.js applications, delivering faster user experiences and more reliable code.

Core Features & Use Cases

  • Comprehensive rules spanning 8 priority categories to address waterfalls, bundle size, server-side and client-side patterns, re-render optimization, rendering performance, JavaScript efficiency, and advanced patterns.
  • Clear guidance for writing, reviewing, or refactoring React/Next.js code to improve load times, hydration reliability, and maintainability.
  • Real-world use cases include code reviews, performance refactors, and proactive optimization during development and deployment.

Quick Start

Review the rules in this skill and start applying the documented performance patterns to your React/Next.js projects immediately.

Frequently Asked Questions about vercel-react-best-practices

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
What are the best practices for React and Next.js performance optimization?▼

To refactor React/Next.js for performance, apply proven rules across eight categories including server/client rendering, bundling, data fetching, and re-render patterns to identify and fix bottlenecks safely.

How do I fix data fetching waterfalls in Next.js applications?▼

Fix data fetching waterfalls by applying targeted best-practice rules for data fetching and server-side patterns, ensuring optimal load times and reliable hydration during your Next.js performance refactor.

Can I use these React performance rules for production-grade code refactoring?▼

Yes, these React performance rules enforce guardrails and validation specifically designed for safe production-grade refactoring, ensuring reliable code improvements during component design and page routing optimizations.

What's the best way to reduce bundle size in React and Next.js?▼

The best way to reduce bundle size is to apply the skill's bundling and JavaScript efficiency rules, which provide clear guidance for writing and refactoring React/Next.js code to improve load times.

Why does my Next.js application have poor hydration reliability and rendering performance?▼

Poor hydration reliability and rendering performance often stem from unoptimized client-side patterns and re-renders, which you can resolve by applying targeted performance patterns during code reviews.

Related Skills

Explore More Software Engineering Skills→
AMontaguAMontagu

vercel-react-best-practices

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

Community
Advanced
motormetricsmotormetrics
21

performance

Identify and optimize frontend, backend, and database performance bottlenecks.

Official
Advanced
aayushsharma141aayushsharma141

vercel-react-best-practices

Enforce 57 React and Next.js performance rules across 8 categories.

Community
Advanced
sadie100sadie100

measure-rerender

Measure React component re-rendering performance using Chrome DevTools.

Community
Advanced