skills.rest
sandriaas
sandriaasCOMMUNITY
Explore all skills by this author →
𝕏@sandriaasvGitHub

vercel-react-best-practices

Optimize React and Next.js performance with 40 rules across 8 categories.

Updated Feb 2, 2026
Search Tags:#code quality#performance#web development#react#optimization#next.js
One-click install
npx skills add https://github.com/sandriaas/_dotfiles --skill vercel-react-best-practices-sandriaas
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vercel-react-best-practices
Source: https://github.com/sandriaas/_dotfiles/tree/main/local/.claude/skills/react-best-practices
Command: npx skills add https://github.com/sandriaas/_dotfiles --skill vercel-react-best-practices-sandriaas

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) and scripts (resource) components.

What problem does it solve?

This Skill provides comprehensive guidelines to optimize React and Next.js applications, ensuring peak performance, faster load times, and a smoother user experience.

Core Features & Use Cases

  • Performance Optimization: Apply over 40 rules across 8 categories, from critical waterfall elimination to advanced patterns.
  • Code Refactoring: Improve existing React/Next.js code for better efficiency and maintainability.
  • AI-Assisted Development: Use these guidelines to inform AI agents and LLMs for consistent, high-performance code generation and review.
  • Use Case: When developing a new feature in a Next.js app, consult this Skill to ensure data fetching is parallelized, bundle sizes are minimized, and server-side rendering is efficient.

Quick Start

Review the rules for optimizing React and Next.js 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 and eliminate data fetching waterfalls?▼

To optimize React and Next.js performance, apply over 40 rules across 8 categories focusing on eliminating waterfalls, minimizing bundle size, and enhancing server-side rendering for faster load times.

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

The best way to reduce bundle size in Next.js involves applying specific optimization rules that target code splitting and efficient data fetching, complete with incorrect vs. correct code examples.

Can I use these React performance rules to guide AI agents for code refactoring?▼

Yes, you can use these React performance rules to inform AI agents and LLMs for automated refactoring, ensuring consistent and high-performance code generation and review.

Does this guide cover both server-side and client-side data fetching optimization for React?▼

Yes, this guide covers both server-side and client-side data fetching optimization for React, detailing specific rules to parallelize data fetching and refine rendering performance.

Why does my Next.js app have slow load times despite using server-side rendering?▼

Slow load times in Next.js server-side rendering often occur due to unoptimized bundle sizes or data fetching waterfalls, which you can resolve by applying targeted rendering and fetching rules.

Related Skills

Explore More Software Engineering Skills→
JaylaelikeJaylaelike

react-best-practices

Identify performance bottlenecks in React/Next.js projects and apply optimization rules.

Community
Advanced
Bharathadi01Bharathadi01

vercel-react-best-practices

Apply Vercel best-practices rules to refactor React and Next.js performance issues.

Community
Advanced
viktorbezdekviktorbezdek
10

moai-workflow-testing

Automate end-to-end development workflows integrating testing, debugging, profiling, and code review.

Community
Advanced
4lerman4lerman

performance-profiler

Profile Node.js, Python, and Go applications for CPU, memory, and I/O bottlenecks.

Community
Advanced