skills.rest
sgpropertyanalytics
sgpropertyanalyticsOFFICIAL
Explore all skills by this author →
GitHub

vercel-react-best-practices

Apply prioritized React/Next.js optimization rules for bundle size and runtime performance.

2|1|Updated Dec 15, 2025
Search Tags:#performance#react#next.js#best-practices#web-performance#frontend-optimization
One-click install
npx skills add https://github.com/sgpropertyanalytics/sg-property-analytics --skill vercel-react-best-practices-sgpropertyanalytics
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vercel-react-best-practices
Source: https://github.com/sgpropertyanalytics/sg-property-analytics/tree/main/.claude/skills/vercel-react-best-practices
Command: npx skills add https://github.com/sgpropertyanalytics/sg-property-analytics --skill vercel-react-best-practices-sgpropertyanalytics

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Comprehensive performance optimization guidelines for React and Next.js applications, designed to reduce bundle size, improve load times, and enhance runtime efficiency across modern front-end stacks.

Core Features & Use Cases

  • 45 rules across 8 categories, prioritized by impact to guide automated refactoring, code reviews, and performance reviews.
  • Clear guidance on critical areas such as eliminating waterfalls, bundle size optimization, server-side efficiency, and client-side data handling.
  • Use Case: Apply guidelines when building or reviewing a React/Next.js page to optimize data fetching, rendering performance, and overall user experience.

Quick Start

Review and apply the guidelines to your React/Next.js project to improve bundle size, load times, and runtime performance.

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 for bundle size and load times?▼

To optimize React and Next.js performance, apply a priority-driven set of 45 rules across 8 categories focusing on reducing bundle size, eliminating data fetching waterfalls, and improving hydration and runtime efficiency.

What are the best practices for preventing data fetching waterfalls in Next.js?▼

Best practices for preventing data fetching waterfalls involve applying structured optimization guidelines that prioritize server-side efficiency and proper client-side data handling to ensure faster UI rendering and scalable architectures.

How do I improve React hydration and runtime performance?▼

Improve React hydration and runtime performance by following actionable component design patterns and server/client optimizations that target critical rendering paths and enhance overall user experience.

Can these React performance guidelines be used for automated code reviews?▼

Yes, these React performance guidelines can be used for automated refactoring and code reviews, providing clear, prioritized rules to evaluate component design, data fetching, and server-side efficiency.

What is the best way to structure React components for frontend optimization?▼

The best way to structure React components for frontend optimization is to apply actionable patterns for component design and server/client optimizations, reducing bundle size and improving runtime efficiency.

Related Skills

Explore More Software Engineering Skills→
KhaledaunKhaledaun

vercel-react-best-practices

Optimize React and Next.js application performance with rules for bundle size and re-renders.

Community
Intermediate
timequitytimequity
6

performance-profiling

Identify performance bottlenecks in web applications, backend services, and databases.

Official
Intermediate
rafaelminatto1rafaelminatto1

nextjs-react-expert

Optimize React and Next.js apps by eliminating waterfalls and reducing bundle size.

Community
Advanced
aidanadenaidanaden

vercel-react-best-practices

Audit React code and apply performance best practices to reduce re-renders and bundle size.

Community
Advanced