skills.rest
am-will
am-willCOMMUNITY
Explore all skills by this author →
GitHub

vercel-react-best-practices

Apply React and Next.js performance best practices to components, pages, and data fetching.

1.0k|56|Updated Jan 16, 2026
Search Tags:#performance#suspense#refactoring#react#Next.js#bundling#server-components
One-click install
npx skills add https://github.com/am-will/codex-skills --skill vercel-react-best-practices-am-will
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vercel-react-best-practices
Source: https://github.com/am-will/codex-skills/tree/main/skills/vercel-react-best-practices
Command: npx skills add https://github.com/am-will/codex-skills --skill vercel-react-best-practices-am-will

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill captures and disseminates React and Next.js performance best practices to reduce waterfalls, optimize bundles, and improve server/client rendering efficiency across teams.

Core Features & Use Cases

  • A curated set of 8 categories of guidelines (Eliminating Waterfalls, Bundle Size Optimization, Server-Side Performance, Client-Side Data Fetching, Re-render Optimization, Rendering Performance, JavaScript Performance, Advanced Patterns).
  • Practical examples and reference links to guide automated refactoring, code generation, and review processes in real-world projects.

Quick Start

  • Integrate the guidelines into your development workflow and use them during component design, page routing, and data-fetching implementations.
  • Leverage agent prompts to identify bottlenecks and apply recommended patterns in code edits or generation tasks.
  • Consult the included references to deepen understanding and stay aligned with official React and Next.js guidance.

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

To eliminate data fetching waterfalls, you apply structured best practices that prioritize parallel data fetching and leverage server components. This provides guidelines for refactoring components and pages to reduce cascading requests and improve server/client rendering efficiency.

What is the best way to optimize bundle size in Next.js?▼

The best way to optimize bundle size involves applying targeted bundle optimization patterns. This enforces rules for JavaScript performance and bundling strategies to minimize payload and improve load times.

How do I fix unnecessary re-renders in React components?▼

Fixing unnecessary re-renders requires applying re-render optimization patterns. This guides automated refactoring by enforcing prioritized rules for component design and rendering performance to prevent wasted cycles.

Can I use this to refactor existing React codebases or is it only for new projects?▼

You can use this to refactor existing React codebases. The guidelines include practical examples and agent prompts specifically designed to identify bottlenecks and apply recommended patterns during code edits or generation tasks.

Does server-side rendering performance in Next.js require Suspense?▼

Server-side rendering performance benefits from Suspense. The guidelines cover advanced patterns including Suspense to optimize server-side performance and client-side data fetching efficiency across typical projects and deployments.

Related Skills

Explore More Software Engineering Skills→
noartemnoartem

vercel-react-best-practices

Identify and optimize performance bottlenecks in React/Next.js projects.

Community
Advanced
dirnbauerdirnbauer
33

vercel-react-best-practices

Apply 57 performance rules across 8 categories to React and Next.js code.

Community
Basic
VoDaiLoczVoDaiLocz
24

lint-and-validate

Automate linting and static analysis of code in CI pipelines.

Community
Intermediate
DIO0550DIO0550

typescript-performance-review-skill

Review TypeScript and React code for performance bottlenecks using measurement-first optimization.

Community
Intermediate