skilld
All skills
vercel-labs avatar

/react-best-practices

@805687f official
by Vercel Labsvercel-labs/agent-skills32k stars
2,784

React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.

Ask your Agent

Use this Skill: https://skilld.dev/gh/vercel-labs/agent-skills/react-best-practices

This session only. Nothing lands on disk.

rules_sections.md

≈389 tokens on demand. Your agent reads this file only when SKILL.md points to it.

Sections

This file defines all sections, their ordering, impact levels, and descriptions. The section ID (in parentheses) is the filename prefix used to group rules.

1. Eliminating Waterfalls (async)

Impact: CRITICAL
Description: Waterfalls are the #1 performance killer. Each sequential await adds full network latency. Eliminating them yields the largest gains.

2. Bundle Size Optimization (bundle)

Impact: CRITICAL
Description: Reducing initial bundle size improves Time to Interactive and Largest Contentful Paint.

3. Server-Side Performance (server)

Impact: HIGH
Description: Optimizing server-side rendering and data fetching eliminates server-side waterfalls and reduces response times.

4. Client-Side Data Fetching (client)

Impact: MEDIUM-HIGH
Description: Automatic deduplication and efficient data fetching patterns reduce redundant network requests.

5. Re-render Optimization (rerender)

Impact: MEDIUM
Description: Reducing unnecessary re-renders minimizes wasted computation and improves UI responsiveness.

6. Rendering Performance (rendering)

Impact: MEDIUM
Description: Optimizing the rendering process reduces the work the browser needs to do.

7. JavaScript Performance (js)

Impact: LOW-MEDIUM
Description: Micro-optimizations for hot paths can add up to meaningful improvements.

8. Advanced Patterns (advanced)

Impact: LOW
Description: Advanced patterns for specific cases that require careful implementation.

Source: SKILL.md on GitHub

Third-party checks

No alerts16d4 checks · Risk SAFE
  • Gen Agent Trust Hub16d

    This skill provides a comprehensive set of performance optimization and best practice guidelines for React and Next.js applications. No security issues or risky patterns were detected.

  • Socket16d

    No alerts

  • Snyk16d

    Risk: LOW · No issues

  • Runlayer6mo

    1/63 files flagged

Provenance

Signed by skilld at 805687f. This ties the file your Agent reads to that commit on GitHub. It does not review the instructions.

Last checked against GitHub last month.

Steadyupdated 6 months ago

Capability

metadata
{
  "author": "vercel",
  "version": "1.0.0"
}

Topics

README badge

README badge for vercel-labs/agent-skills/react-best-practices

What it does

Provides 70 React and Next.js performance optimization rules organized by priority, from eliminating waterfalls and bundle size optimization to re-render and rendering performance. Use this skill when writing, reviewing, or refactoring React/Next.js code to apply Vercel's performance patterns for data fetching, component structure, and bundle optimization.

Generated from the current SKILL.md.

Frequently asked

Does this skill cover both React and Next.js?
Yes. The skill includes guidelines for React components, Next.js pages, server-side rendering, server actions, and data fetching patterns across both frameworks.
Are these rules ranked by importance?
Yes. Rules are organized into 8 categories ranked by impact, from eliminating waterfalls and bundle optimization (CRITICAL) down to advanced patterns (LOW).
Can this skill be used during code review and refactoring?
Yes. The skill is intended for writing new code, reviewing existing code for performance issues, and refactoring React/Next.js applications.
Does this skill include code examples?
Yes. Each of the 70 rules has a detailed file with incorrect and correct code examples, explanations, and additional context.

Generated from the current SKILL.md. These answers refresh after source changes.