skills.rest
marduk191
marduk191COMMUNITY
Explore all skills by this author →
WebsiteGitHub

vercel-react-best-practices

Apply React and Next.js performance best practices during implementation and code reviews.

9|4|Updated Feb 7, 2026
Search Tags:#performance#react#optimization#nextjs#best-practices#server-client#bundle-size
One-click install
npx skills add https://github.com/marduk191/qwen3_mcp --skill vercel-react-best-practices-marduk191
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vercel-react-best-practices
Source: https://github.com/marduk191/qwen3_mcp/tree/main/skills/react-best-practices
Command: npx skills add https://github.com/marduk191/qwen3_mcp --skill vercel-react-best-practices-marduk191

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Vercel React Best Practices address common performance pitfalls in React and Next.js, providing a structured, scalable approach to optimize render, data fetch, and bundle strategies.

Core Features & Use Cases

  • 57 rules across 8 categories with prioritized guidance for eliminating waterfalls, bundle size, server-side performance, client data fetching, re-render optimization, rendering, JavaScript, and advanced patterns.
  • Practical code examples, real-world scenarios, and guardrails to ensure safe automated refactoring and consistent implementation across teams.
  • Intended for use during development, code reviews, and when refactoring large or critical components/pages to meet performance targets.

Quick Start

Apply these guidelines to your React/Next.js projects to begin improving performance today.

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 faster rendering and smaller bundle sizes?▼

Optimize React and Next.js performance by applying 57 structured rules across 8 categories, targeting bundle size, server-side execution, and re-render optimization to achieve measurable speed and maintainability improvements.

What are the best practices for data fetching in Next.js to avoid request waterfalls?▼

Best practices for Next.js data fetching involve applying specific patterns to eliminate waterfalls and improve client data fetching. These guardrails ensure safe, testable refactoring while maximizing server-side performance and reliability.

How do I reduce JavaScript bundle size when refactoring large React components?▼

Reduce JavaScript bundle size during React component refactoring by applying targeted bundle optimization rules. These patterns provide clear guardrails for safe automated refactoring, ensuring measurable performance impact without breaking existing functionality.

Does this React optimization approach work for both development and code review workflows?▼

This React optimization approach works for development, code reviews, and refactoring large critical components. It enforces comprehensive rules and patterns across rendering and data fetching, ensuring consistent implementation and measurable performance impact across teams.

When should I apply server-client patterns to improve Next.js page performance?▼

Apply server-client patterns to improve Next.js page performance when addressing server-side execution and client data fetching bottlenecks. These patterns guide safe, testable refactoring with clear guardrails for measurable speed and reliability improvements.

Related Skills

Explore More Software Engineering Skills→
dtsongdtsong
1

vercel-react-best-practices

Fetch and apply Vercel's React and Next.js performance optimization guidelines.

Community
Basic
Itinerant18Itinerant18

web-performance-optimization

Analyze Core Web Vitals and optimize frontend loading performance.

Community
Advanced
ZawHlaingPhyoTsukiZawHlaingPhyoTsuki

vercel-react-best-practices

Enforce React/Next.js performance guidelines for writing, reviewing, and refactoring code.

Community
Advanced
georgekhananaevgeorgekhananaev
27

react-best-practices

Identify React/Next.js performance bottlenecks and generate targeted optimizations.

Community
Advanced