# React and Next.js performance (/vercel-react-best-practices)

/vercel-react-best-practices is a Claude Code skill in the Web & Design section. It is maintained by Hainrixz and published under the MIT license. Applies 62 Vercel Engineering performance rules when writing, reviewing or refactoring React and Next.js: data waterfalls, bundle size and re-renders.

- Web version: https://skills.sgomez.dev/en/s/vercel-react-best-practices
- Section: [Web & Design](https://skills.sgomez.dev/en/web.md)
- Author: Hainrixz
- License: MIT
- Source: https://github.com/Hainrixz/claude-webkit/tree/1bd88c31e1ce8d1a5f5e4d9b0ae264176bf2507e/.claude/skills/vercel-react-best-practices
- Updated 21 Aug 2026

## How to ask for it

- `Review this React component for performance best practices`
- `Is this Next.js data fetching pattern optimal?`
- `Refactor this Next.js page following Vercel's performance guidelines`

## Install

macOS · Linux:

```
curl -fsSL https://raw.githubusercontent.com/sgomez-dev/claude-skills/main/install.sh | bash
```

Windows:

```
irm https://raw.githubusercontent.com/sgomez-dev/claude-skills/main/install.ps1 | iex
```


## Author's description

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.

- [How we review this](https://skills.sgomez.dev/en/methodology.md)