skills.rest
ShutovKS
ShutovKSCOMMUNITY
Explore all skills by this author →
GitHub

vercel-react-best-practices

Enforce React and Next.js performance best practices across 69 rules.

3|2|Updated Apr 1, 2026
Search Tags:#performance#refactoring#react#nextjs#best-practices#code-review
One-click install
npx skills add https://github.com/ShutovKS/tts-server --skill vercel-react-best-practices-shutovks
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vercel-react-best-practices
Source: https://github.com/ShutovKS/tts-server/tree/main/.opencode/skills/vercel-react-best-practices
Command: npx skills add https://github.com/ShutovKS/tts-server --skill vercel-react-best-practices-shutovks

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

React and Next.js performance issues can degrade user experience; this skill provides a curated set of guidelines to optimize rendering, data flows, and bundle efficiency.

Core Features & Use Cases

  • 69 rules across 8 categories to guide automated refactoring and code generation.
  • Prioritized patterns for eliminating waterfalls, reducing bundle size, optimizing server-side rendering, and improving client rendering.
  • Use during writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns, with references to official docs.

Quick Start

Follow these guidelines during development, review, or refactoring to ensure performance-conscious React/Next.js code.

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 review?▼

React and Next.js performance best practices for code review involve applying 69 rules across 8 categories to optimize component design, data fetching, bundle size, and SSR. This skill prioritizes CRITICAL and HIGH impact patterns to improve UI responsiveness and load times.

What are the best practices to eliminate data fetching waterfalls in Next.js?▼

Eliminating data fetching waterfalls in Next.js requires applying prioritized refactoring patterns that optimize data flows. This skill provides concrete examples and references to official docs for restructuring fetches to improve UI responsiveness and reduce load times.

How do I reduce bundle size and improve server-side rendering in React?▼

Reducing bundle size and improving server-side rendering in React involves applying curated best practices across component design and runtime performance. This skill encodes 69 prioritized rules with concrete examples to guide automated refactoring and optimize load times.

Can I use these React performance guidelines for automated refactoring?▼

Yes, these React performance guidelines support automated refactoring tooling. The skill encodes 69 rules across 8 categories with concrete examples and references to official docs, designed to guide automated code generation and refactoring in React/Next.js projects.

Does this skill cover both client-side rendering and server-side rendering optimization?▼

Yes, this skill covers both client-side and server-side rendering optimization for React and Next.js. It provides prioritized patterns across 8 categories including SSR, client rendering, bundle optimization, and component design to ensure optimal runtime performance.

Related Skills

Explore More Software Engineering Skills→
FEMADOXFEMADOX
4

vercel-react-best-practices

Enforce 69 React/Next.js performance rules across 8 categories.

Community
Advanced
KaakatiKaakati
2

react-best-practices

Analyze React and Next.js code against 57 performance rules across 8 categories.

Community
Advanced
XueHua-sXueHua-s
5

vercel-react-best-practices

Identifies and applies React/Next.js performance best practices to codebases.

Community
Advanced
pckienuitpckienuit

react-best-practices

Analyze React and Next.js codebases for performance bottlenecks and prioritized fixes.

Community
Advanced