💻 Developer Tools

vercel-react-best-practices

Name: vercel-react-best-practices
Author: vercel-labs

by vercel-labs14 days ago29.3k

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.

Install

npx skills add https://github.com/vercel-labs/agent-skills --skill vercel-react-best-practices

Show step-by-step

1
Open your terminal
- Mac: Press ⌘ Space, type "Terminal", press Enter
- Windows: Press Win R, type "cmd", press Enter
2
Paste the command above and press Enter
Use the Copy command button, then paste in your terminal (Mac: ⌘V, Windows: Ctrl V).
3
Restart Claude Code
Close and reopen Claude Code, or start a new session, so it picks up the new skill.

Where it lives

~/.claude/skills/vercel-labs--agent-skills--skills--react-best-practices/
├── SKILL.md
└── ... (skill resource files)

View on GitHub

Comments

X@mattpocockuk

"@dayson @brandonbryant02 I imagine it's because you've used one and not the other"

X@mattpocockuk

"Top 5 all-time on nice Someday its sequel, /wayfinder, will eclipse it"

Related skills

✍️ Writing

writing-plans

Use when you have a spec or requirements for a multi-step task, before touching code

by obra · 13 days ago258.6k

📦 Product

brainstorming

You MUST use this before any creative work - creating features, building components, adding functionality, or modifying behavior. Explores user intent, requirements and design before implementation.

by obra · 13 days ago258.6k

🎨 Design

p5js

p5.js sketches: gen art, shaders, interactive, 3D.

by NousResearch · 2 months ago218.2k

💻 Developer Tools

grill-me

A relentless interview to sharpen a plan or design.

by mattpocock · 3 months ago179.9k