Applied when writing, reviewing or refactoring React and Next.js code, so the performance decisions are made while the code is written rather than profiled afterwards.
In the author’s words
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.
The description field from SKILL.md, quoted as written.
Read it before you install it
SKILL.md · 140 lines
Install on its own
Or add it to your stack above and install everything at once.
npx skills add https://github.com/vercel-labs/agent-skills --skill vercel-react-best-practicesTrust audit
View the source ↗- Checked automatically and confirmed.
- Resolved (HTTP 200), passed
- Checked automatically and confirmed.
- Resolves · 31,240 stars, passed
- Checked automatically and confirmed.
- Transcribed from the author's own page, passed
- Checked automatically and confirmed.
- Last updated 5 months ago, passed
- Checked automatically and confirmed.
- Credited to Vercel, passed
Goes well with
prototype
Builds several genuinely different UI variants behind a live picker.
Flip through real implementations instead of arguing about descriptions, then promote the one that wins.
npx skills add https://github.com/emilkowalski/skills --skill prototype
pick-ui-library
Picks the library from the set Emil actually uses and trusts.
Stops your agent hand-rolling a toast or installing whatever is trending. Covers components, motion, charts, interaction, state and styling.
npx skills add https://github.com/emilkowalski/skills --skill pick-ui-library
break
Renders a component in every state on a temp page and stress-tests it.
Finds the design-system failures you don't know about: long names, empty data, overflow, every interactive state at once.
npx skills add https://github.com/jakubkrehel/skills --skill break