69 rules for React and Next.js performance optimisation across 8 priority categories.
What it does
Without this skill, Claude frequently mixes App Router and Pages Router conventions in the same codebase, reaches for deprecated APIs (like `getServerSideProps` in App Router projects), and picks rendering strategies that don't match the use case. This skill loads 69 explicit rules from Vercel's own engineering team — the people who built and maintain Next.js — covering RSC boundaries, data fetching patterns, image optimisation, font loading, and Suspense usage. It's not a style guide; it's the actual production checklist.
Use case
Any React or Next.js project where you want Claude to follow Vercel's production standards. Essential if you're deploying to Vercel — many of the rules exist specifically because violating them causes real production performance regressions. Made by Vercel Labs from their internal engineering guidance.
"Refactor this page to use the correct App Router data fetching pattern." "Is there anything in this component that would cause a performance regression on Vercel?" "Build a server component that fetches user data and passes it to a client component." "Add proper Suspense boundaries and a loading skeleton to this route." "Review this file — is our use of 'use client' correct here?"
Install into your Next.js project root. Claude applies the 69 rules automatically to any React or Next.js code it generates.
For code review: ask Claude to audit a file against Vercel's guidelines. It returns a prioritised list of issues with specific fixes.
Use it alongside next-best-practices for full coverage — this skill focuses on React patterns, the other covers Next.js routing and server patterns.
Input
React or Next.js code, component descriptions, or architectural questions about your application.
Output
React code that follows Vercel's production standards: correct server/client boundaries, no deprecated APIs, proper Suspense usage, optimised rendering strategies, and correct image/font handling.
npx skillsadd vercel-labs/agent-skills/react-best-practices
npx skillsadd vercel-labs/skills/vercel-react-best-practices
Requires skills.sh CLI
Create new skills, modify and improve existing skills, and measure skill performance. Use when users want to create a skill from scratch, edit, or optimize an existing skill, run evals to test a skill, benchmark skill performance with variance analysis, or optimize a skill's description for better triggering accuracy.
Build Obsidian.md plugins following official API patterns, TypeScript best practices, and plugin review guidelines.
Techniques for context engineering with AI agents — managing context windows, prompt structure, and knowledge organisation.