Skills Coding

Vercel React Best Practices

Apply ranked React and Next.js performance rules instead of vague optimize-this advice.

Cursor Claude Codex Grok ReactNext.jsperformance

What it is

This skill encodes a long, ranked list of React and Next.js rules (waterfalls, bundle cost, server/client boundaries). The agent can audit a file against the list and change the highest-impact items first.

When to use

Use when reviewing or writing React, Next.js, or App Router code that must stay fast.

How to install

Add the skill folder to the project so every React session loads the same rule list.

# Claude Code
.claude/skills/vercel-react-best-practices/SKILL.md

# Grok Build
.grok/skills/vercel-react-best-practices/SKILL.md

# Codex
.agents/skills/vercel-react-best-practices/SKILL.md

Example prompt

Audit src/app/dashboard/page.tsx against Vercel React Best Practices. Fix the top three issues.

Source: Vercel

Read the full install guide →

Related skills