skills.rest
eKoh951
eKoh951COMMUNITY
Explore all skills by this author →
GitHub

vercel-react-best-practices

Apply 57 performance rules across 8 categories to React/Next.js apps.

Updated Feb 3, 2026
Search Tags:#performance#refactoring#react#nextjs#best-practices#bundling
One-click install
npx skills add https://github.com/eKoh951/hytale-gg --skill vercel-react-best-practices-ekoh951
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vercel-react-best-practices
Source: https://github.com/eKoh951/hytale-gg/tree/main/.windsurf/skills/vercel-react-best-practices
Command: npx skills add https://github.com/eKoh951/hytale-gg --skill vercel-react-best-practices-ekoh951

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

React and Next.js projects often suffer from performance regressions, large bundle sizes, and slow initial paints; this guide consolidates proven patterns to prevent and fix those issues.

Core Features & Use Cases

  • Comprehensive rules across 8 priority categories to guide automated refactoring and code generation.
  • Practical scenarios for client, server, and bundling optimizations in real-world projects.
  • Quick-start templates to initiate performance improvements in existing codebases.

Quick Start

Run a quick audit on your React/Next.js project to identify bottlenecks and apply prioritized 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 fix React performance issues like slow initial paint and large bundle sizes?▼

Resolve React performance issues by applying 57 prioritized rules across 8 categories covering components, data fetching, routing, and bundling to guide automated refactoring and reduce large bundle sizes.

What is the best way to optimize Next.js bundle size during code reviews?▼

The best way to optimize Next.js bundle size during code reviews is applying priority-prefixed rules that guide automated refactoring suggestions. This encodes performance patterns across server and client optimizations to prevent regressions in real-world projects.

Can I use these React best practices to refactor an existing codebase?▼

Yes, you can refactor existing React codebases using quick-start templates that audit projects to identify bottlenecks and apply prioritized performance improvements across components and data fetching.

Does this guide cover both client-side and server-side optimizations for Next.js?▼

Yes, this guide covers both client-side and server-side optimizations for Next.js. Practical scenarios address bundling, data fetching, and routing optimizations to drive performance improvements across the full application stack.

When should I not use automated refactoring rules for React performance?▼

You should not use automated refactoring rules for React performance when your project lacks established components or data fetching patterns to evaluate. The rules require an existing codebase to identify bottlenecks and apply prioritized improvements effectively.

Related Skills

Explore More Software Engineering Skills→
PedrFelipPedrFelip

vercel-react-best-practices

Optimize React and Next.js performance patterns in codebases.

Community
Advanced
jcdiv47jcdiv47

optimize

Diagnose and fix frontend performance bottlenecks using Core Web Vitals and bundle analysis.

Community
Intermediate
AmbitionsXXXVAmbitionsXXXV
2

vercel-react-best-practices

Identify and implement React/Next.js performance optimizations across eight priority areas.

Community
Advanced
loagmaloagma

vercel-react-best-practices

Apply rule-based React/Next.js performance patterns to codebases.

Community
Advanced