Vercel Agent Skills
Code qualityVercel's prioritized rubrics for React, Next.js, web design, and deployment optimization.
Install
$ npx skills add vercel-labs/agent-skills
Update
$ npx skills add vercel-labs/agent-skills
Re-running fetches the latest version.
When to use it
- Writing or reviewing React/Next.js code against impact-ranked best-practice rules
- Killing request waterfalls and shipping statically-analyzable, bundle-friendly imports
- Auditing a deployed Vercel project for cost, caching (ISR), and middleware usage
- Enforcing consistent web-design and writing guidelines pulled from a live source
Commands & flags
- react-best-practices
- 64 impact-ranked React/Next.js rules (Critical/High/Low) the agent enforces.
- web-design-guidelines
- Web-design rules pulled from a live source.
- writing-guidelines
- Consistent writing/copy guidelines.
- vercel-optimize
- Audit a deployed Vercel project for cost, caching (ISR), and middleware.
- Promise.all()
- React skill's fix for parallelizing fetches to kill request waterfalls.
- React.cache()
- React skill's fix for deduplicating data fetches.
How to use it
Install with the open skills CLI; the agent invokes the relevant rubric when it detects a matching task.
npx skills add vercel-labs/agent-skills
Ships react-best-practices (64 rules tiered Critical/High/Low), web-design-guidelines, writing-guidelines, and vercel-optimize. The React skill constrains the agent to fixes like Promise.all() for parallel fetches and React.cache() for dedup.
Why it earns its place
Maintained by Vercel, this encodes the framework authors' own optimization priorities as enforceable rules rather than vague advice. Because rules are ranked by architectural impact, the agent fixes high-leverage problems (waterfalls, bundle size) first instead of micro-optimizations that don't matter.
Try it
> Audit this Next.js page with vercel react-best-practices and fix the critical issues