vercel-react-best-practices

846 stars 47 forks

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.

#devtools#performance#performance optimization#Next.js#React#ai#React components#Vercel React

Third-Party Agent Skill: Review the code before installing. Agent skills execute in your AI assistant's environment and can access your files. Learn more about security

Installation for Agentic Skill

View all platforms →

Claude Code (CLI) Fast

skilz install vercel-labs/dev3000/vercel-react-best-practices

OpenCode (CLI) Fast

skilz install vercel-labs/dev3000/vercel-react-best-practices --agent opencode

OpenAI Codex (CLI) Native

skilz install vercel-labs/dev3000/vercel-react-best-practices --agent codex

Gemini CLI (Project) Project

skilz install vercel-labs/dev3000/vercel-react-best-practices --agent gemini

First time? Install Skilz: pip install skilz

Works with 22+ AI coding assistants

Cursor, Aider, Copilot, Windsurf, Qwen, Kimi, and more...

View All Agents

For Claude Desktop Easy

Download Agent Skill ZIP

Extract and copy to ~/.claude/skills/ then restart Claude Desktop

Manual Installation

1. Clone the repository:

git clone https://github.com/vercel-labs/dev3000

2. Copy the agent skill directory:

cp -r dev3000/www/.agents/skills/vercel-react-best-practices ~/.claude/skills/

Agentic Skill Grades →

AI-Detected Topics

Extracted using NLP analysis

devtools performance performance optimization Next.js React ai React components Vercel React web Next.js code

Report Security Issue

Found a security vulnerability in this agent skill?