vercel-react-best-practices — Skills

What it does

Writing new React components or Next.js pages

Implementing data fetching (client or server-side)

Reviewing code for performance issues

Refactoring existing React/Next.js code

Optimizing bundle size or load times

async-cheap-condition-before-await - Check cheap sync conditions before awaiting flags or remote values

async-defer-await - Move await into branches where actually used

React and Next.js performance optimization across 70 rules prioritized by impact.

Source

Repository: https://github.com/vercel-labs/agent-skills

vercel-react-best-practices FAQ

What does the vercel-react-best-practices skill do?

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. Writing new React components or Next.js pages Implementing data fetching (client or server-side)

How do I install vercel-react-best-practices?

Run: npx -y skills add https://github.com/vercel-labs/agent-skills --skill vercel-react-best-practices --agent claude-code — the source lives at github.com/vercel-labs/agent-skills.

Maintain vercel-react-best-practices?

Let people know it's listed here — add the badge (live metrics, light/dark aware) or a plain link to your README or docs.

[![vercel-react-best-practices on getagentictools](https://getagentictools.com/badge/skills/vercel-labs-agent-skills-vercel-react-best-practices.svg)](https://getagentictools.com/skills/vercel-labs-agent-skills-vercel-react-best-practices?ref=badge)

npx agentictools info skills/vercel-labs-agent-skills-vercel-react-best-practices

The second line is the CLI lookup for this page — handy in READMEs and docs.