skills.rest
devyan18
devyan18COMMUNITY
Explore all skills by this author →
GitHub

vercel-react-best-practices

Apply React and Next.js performance best practices to components and data flows.

Updated Feb 11, 2026
Search Tags:#performance#react#optimization#vercel#nextjs#guidelines#best-practices
One-click install
npx skills add https://github.com/devyan18/BroFinanceFront --skill vercel-react-best-practices-devyan18
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vercel-react-best-practices
Source: https://github.com/devyan18/BroFinanceFront/tree/main/.cursor/skills/vercel-react-best-practices
Command: npx skills add https://github.com/devyan18/BroFinanceFront --skill vercel-react-best-practices-devyan18

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides a centralized set of performance guidelines for React and Next.js projects, helping teams reduce bundle sizes, speed up data fetching, and improve UX. It helps engineers write efficient components, review code for performance issues, and apply proven patterns consistently across projects.

Core Features & Use Cases

  • Comprehensive, categorized performance guidelines across 8 priority categories to guide refactoring and code generation.
  • Concrete, real-world rules with explicit examples that demonstrate incorrect vs. correct patterns and measurable impact.
  • Practical guidance for both development and reviews to maintain performance discipline across React components, Next.js pages, and server/client data flows.

Quick Start

Analyze a React/Next.js component or page and apply the most relevant performance best practice from the guide.

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 components to reduce unnecessary re-renders?▼

Optimizing React components involves applying proven performance patterns to minimize bundle size and ensure safe SSR/CSR handoffs. This Skill provides categorized guidelines with concrete examples for refactoring components to improve rendering efficiency and reduce waterfalls.

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

Reducing data fetching waterfalls in Next.js requires enforcing patterns that optimize server and client data flows. This Skill guides feature implementations and refactors to safely speed up server/client data fetching across modern web apps.

How do I review Next.js code for performance issues during feature implementation?▼

Reviewing Next.js code for performance involves checking components and pages against established performance best practices. This Skill enforces patterns during code reviews to maintain performance discipline and ensure safe SSR/CSR data handoffs.

Can I apply these React performance guidelines to existing project refactors?▼

Yes, you can apply these React performance guidelines to existing project refactors. The Skill is explicitly designed for use during feature implementations, code reviews, and refactoring of React components and Next.js pages.

How do Next.js server and client data flows impact bundle size and UX?▼

Next.js server and client data flows impact bundle size by requiring safe SSR/CSR handoffs to prevent bloat. This Skill enforces performance patterns that minimize bundle size, reduce waterfalls, and improve overall UX.

Related Skills

Explore More Software Engineering Skills→
kindfi-orgkindfi-org
19

vercel-react-best-practices

Identify and fix React/Next.js performance bottlenecks across data fetching, rendering, and bundle size.

Official
Advanced
tulioftuliof

vercel-react-best-practices

Apply performance optimization guidelines to React and Next.js applications.

Community
Advanced
djankiesdjankies

reviewing-performance-patterns

Analyze React 19 performance patterns for re-renders, memoization, and bundle size.

Community
Basic
gaebalaigaebalai
2

fe-performance-review

Analyze frontend codebases for Core Web Vitals improvement opportunities.

Community
Advanced