skills.rest
bohdanbirdie
bohdanbirdieCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

vercel-react-best-practices

Review React and Next.js code against 57 prioritized performance rules.

29|1|Updated Jan 18, 2026
Search Tags:#performance#react#refactor#nextjs#best-practices#code-review#bundle-size
One-click install
npx skills add https://github.com/bohdanbirdie/cloudstash --skill vercel-react-best-practices-bohdanbirdie
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vercel-react-best-practices
Source: https://github.com/bohdanbirdie/cloudstash/tree/main/.agents/skills/vercel-react-best-practices
Command: npx skills add https://github.com/bohdanbirdie/cloudstash --skill vercel-react-best-practices-bohdanbirdie

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

React and Next.js projects often suffer from inefficient rendering, bloated bundles, and inconsistent performance patterns. This Skill provides a structured, prioritized guide to optimize UI and server performance, helping teams ship faster, more reliable applications.

Core Features & Use Cases

  • A catalog of 57 rules across 8 categories, prioritized to guide refactoring and automated code generation.
  • Useful during code reviews, architecture discussions, and performance-focused migrations to ensure best practices are followed.
  • Applies to tasks involving React components, Next.js pages, data fetching strategies, and bundle optimization to reduce waterfalls and improve load times.

Quick Start

Review your React/Next.js code against the included best-practices rules and implement the recommended changes.

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

Reduce React render waterfalls by following structured best-practices rules that prioritize data fetching strategies and component refactoring to eliminate sequential UI blocking and improve load times.

What is the best way to reduce bundle size in a Next.js application?▼

Reduce Next.js bundle size by applying prioritized performance guidelines that target server/client boundary inefficiencies and component architecture, ensuring faster and more reliable application loads.

How do I refactor React components to prevent server and client inefficiencies?▼

Apply a performance-optimized refactoring guide of 57 rules across 8 categories to systematically resolve data fetching and server/client boundary inefficiencies in your React components.

Can I use these best practices for both building new Next.js pages and refactoring existing ones?▼

Yes, the 57 prioritized rules apply to building, reviewing, and refactoring React components and Next.js pages, covering data fetching and performance optimizations across both UI and server boundaries.

Why does my Next.js application suffer from inconsistent performance patterns?▼

Inconsistent Next.js performance often stems from unoptimized rendering, bloated bundles, and inefficient data fetching, which can be resolved by implementing structured, prioritized performance guidelines.

Related Skills

Explore More Software Engineering Skills→
kimjuyoung1127kimjuyoung1127

react-best-practices

Audit React/Next.js projects and prioritize performance optimization rules.

Community
Advanced
EdwinFerminEdwinFermin

vercel-react-best-practices

Apply 57 prioritized rules to optimize React and Next.js performance.

Community
Advanced
Omar-CcOmar-Cc

vercel-react-best-practices

Apply Vercel optimization patterns to React and Next.js code.

Community
Advanced
johnnystefanjohnnystefan

react-performance

Review React and Next.js code for performance bottlenecks using Vercel's priority rules.

Community
Intermediate