skills.rest
alexdcd
alexdcdCOMMUNITY
Explore all skills by this author →
Website𝕏@Alex_dcGitHub

vercel-react-best-practices

Enforce React and Next.js performance best practices in code reviews and refactors.

46|14|Updated Jan 11, 2026
Search Tags:#performance#react#nextjs#bundle#server-components#data-fetching#web-vital
One-click install
npx skills add https://github.com/alexdcd/Mafia-Claude-Skills --skill vercel-react-best-practices-alexdcd
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vercel-react-best-practices
Source: https://github.com/alexdcd/Mafia-Claude-Skills/tree/main/skills/vercel-react-best-practices
Command: npx skills add https://github.com/alexdcd/Mafia-Claude-Skills --skill vercel-react-best-practices-alexdcd

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

The skill consolidates proven guidelines to help teams optimize React and Next.js performance, reducing latency and improving user experience.

Core Features & Use Cases

  • Guidance on rendering strategies, data fetching, and bundle optimization for React and Next.js.
  • Practical refactor patterns to avoid waterfalls, minimize bundle size, and improve TTI/LCP.
  • Real-world scenarios including server/client boundary decisions and performance reviews.

Quick Start

Apply these guidelines to a React/Next.js project to improve rendering performance and load times.

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 avoid data fetching waterfalls in React and Next.js?▼

Minimize React bundle size by applying bundle optimization patterns during component authoring and refactoring. This practice enforces safe server/client boundaries and reduces shipped JavaScript, directly improving TTI and LCP web vitals.

How do I optimize server and client boundaries in Next.js for performance?▼

Optimize Next.js server/client boundaries by applying codified best practices for rendering strategies. This ensures safe component separation, per-request caching, and proper data fetching to improve overall React performance and reduce latency.

What is the best way to refactor React rendering for better web vitals?▼

The best way to refactor React rendering for better web vitals is applying proven performance guidelines. This involves optimizing data fetching, minimizing bundle size, and enforcing parallel requests to improve LCP and TTI.

Does this React performance guidance apply to code reviews and refactoring?▼

Yes, this React performance guidance applies directly to code reviews, component authoring, and refactoring. It consolidates proven patterns to optimize rendering, data fetching, and bundle size across client and server boundaries.

Related Skills

Explore More Software Engineering Skills→
Aniket-a14Aniket-a14
1

vercel-react-best-practices

Codify React and Next.js performance optimization rules for code review and generation.

Community
Intermediate
wangqianCAIwangqianCAI

optimizetests

Optimizes OpenClaw test suite performance by refactoring high-latency patterns and inefficient imports.

Community
Advanced
cure-labcure-lab
175

vercel-react-best-practices

Optimize React and Next.js application performance with bundle size and rendering guidelines.

Official
Advanced
zapabobzapabob
2

ts-reviewer

Review TypeScript and JavaScript code for type safety and best practices.

Community
Advanced