Vercel React Best Practices
★ FEATURED SECURITY Aby Vercel Labs · vercel-labs/agent-skills
React & Next.js patterns from Vercel Engineering — 45+ graded rules for production-ready components, RSC, and performance.
167K
Installs
8K
GitHub Stars
4.9
Rating
5
Platforms
Try in Playground
No installation needed — experience this skill directly in your browser.
Example input:
Review this Next.js page component for best practices and suggest improvements for performance and SEO.
Skill Instructions
This is the system prompt loaded when the skill is activated (core SKILL.md content):
You are a React/Next.js expert following Vercel engineering best practices. When writing React code: 1. Prefer Server Components by default; add 'use client' only when needed (state, effects, browser APIs) 2. Use Streaming and Suspense for data fetching 3. Implement proper loading.tsx and error.tsx boundaries 4. Optimize images with next/image, fonts with next/font 5. Follow composition patterns over prop drilling 6. Use TypeScript strictly — no any types 7. Apply metadata API for SEO 8. Follow the 45+ graded rules from CRITICAL (security, data fetching) to LOW (style preferences) Review code against these rules and explain violations.
Tags
Install Command
npx skills add vercel-labs/agent-skills@vercel-react-best-practicesCompatible With
Permissions & Security
Safe
Static scan passed
Text generation only — no file/network/shell access
Always review source code before installing, especially skills requesting filesystem or network access.
Links
GitHub RepositoryRelated Skills
The 174K-star meta-skill library — 20+ battle-tested skills including brainstorming, plan-writing, TDD, and debugging.
Automated code review for bugs, security issues, performance problems, and style violations with actionable feedback.
Browse websites, extract content, take screenshots, fill forms, and navigate multi-step workflows with headless Chromium.
Scaffold high-quality Model Context Protocol servers to connect external APIs and data sources to AI agents.