Vibeleaderboard
Index / tool
Visit github.com
Category
AI Agents
Rank
No. 1986Tools index

Previous survey · No. 1996 ·

Type
TOOL
Use case
Deployment & Operations
Interfaces
Agent Skill / Plugin
Builder
@rauchg
Date

About

Vercel's official collection of skills for AI coding agents, packaged as instructions and scripts in the Agent Skills format. It includes vercel-optimize, which collects Vercel metrics for a deployed project and then investigates only the routes and files those metrics implicate to produce a ranked cost and performance report, and react-best-practices, a set of 40+ React and Next.js performance rules across eight categories from Vercel Engineering.

What it does

A set of drop-in playbooks that teach a coding assistant how one platform company wants web apps built, audited and shipped. Each playbook is a short markdown brief the assistant reads only when a task matches its trigger phrases, sometimes backed by helper programs. The flagship audits a live Vercel deployment against its own production data before touching any code. Others cover component design, page transitions, mobile apps, interface accessibility, and one-step deploys that hand back a link you can later claim into your own account.

Why it's ranked here

The optimizer is the reason to look. It refuses to read source until production data exists, picks what to investigate with fixed JavaScript thresholds rather than model judgement, caps a run at six code candidates by default, and strips any citation outside a curated, version-checked docs list. That is a rare amount of engineering discipline for an agent playbook. The rest of the set is solid, MIT licensed reference material from the vendor itself, with a CI job that validates the React guide on every change.

What's good

The optimizer treats the model as untrusted: candidate selection, reconciliation of disproven leads and output collection are all deterministic scripts, and the collector fails on missing or duplicate results. It also refuses to recommend turning on a setting that is already on. The deploy playbook defaults to preview deployments, asks before any git push, and warns that some Vercel commands silently link a directory as a side effect. The React guide checks every rule has an incorrect and a correct code example before it builds.

Tradeoffs

Most of the value is tied to Vercel. The optimizer needs the Vercel CLI at version 53 or later, Node 20, a linked project, and the paid Observability Plus tier for route-level ranking; Hono and Remix projects stop at the door. The interface review playbook fetches its rules from a remote URL on every run, so its behaviour can change without a version bump. The top-level docs have drifted: they promise 40+ React rules across seven categories while the guide itself lists 70 across eight, and some playbook names differ from the installer's grouping.

How to use it well

Install only what you need with the per-skill flag rather than the whole set. Teams already paying for Vercel and running Next.js or SvelteKit get the most: run the optimizer from the linked project directory and expect it to ask before falling back to a scan-only audit. The React and composition guides suit any React codebase as review checklists. It does not cover other hosts, and the optimizer lists AI Gateway, Sandbox and storage billing as planned rather than supported.

Technical notes+

The optimizer pipeline in skills/vercel-optimize/SKILL.md runs collect-signals, scan-codebase and merge-signals into a signals file, then gate-investigations, deep-dive, reconcile-candidates, per-candidate briefs and collect-sub-agent-outputs, with fan-out to one sub-agent per brief at three or more. skills/vercel-optimize/lib/gates/index.mjs registers fifteen gates, sets DEFAULT_MAX_CODE_CANDIDATES = 6 (overridable via --max-candidates or VERCEL_OPTIMIZE_MAX_CANDIDATES) and stamps GATE_VERSION so reports can detect threshold drift; oversized_memory and deploy_regression are deliberately unregistered. packages/react-best-practices-build/src/validate.ts rejects rule files lacking a title, explanation, labelled code example or valid impact level, and .github/workflows/react-best-practices-ci.yml runs it plus the build on Node 20. The root package.json is private with a single yaml dependency. skills/web-design-guidelines/SKILL.md pulls its rules from a raw GitHub URL at review time.

Observed

License
MIT (README.md)
Install surface
npx skills add, whole set or per skill via --skill (README.md, AGENTS.md)
Format
Markdown skill files with optional Bash and Node helper scripts (AGENTS.md)
Optimizer requirements
Vercel CLI v53+, Node.js 20+, linked project, Observability Plus for route metrics (skills/vercel-optimize/README.md)
Optimizer framework support
Next.js, SvelteKit, Nuxt supported; Astro limited; Hono, Remix blocked by default (skills/vercel-optimize/SKILL.md)
Candidate selection
Deterministic gates, default six code candidates (skills/vercel-optimize/lib/gates/index.mjs)
CI
Validate and build job for the React guide on push and pull request (.github/workflows/react-best-practices-ci.yml)
Docs drift
Root README says 40+ React rules; the skill file says 70 across 8 categories (skills/react-best-practices/SKILL.md)

Read from README.md, package.json, AGENTS.md, skills.sh.json, skills/react-best-practices/SKILL.md, skills/react-best-practices/README.md, skills/vercel-optimize/SKILL.md, skills/vercel-optimize/README.md, skills/composition-patterns/SKILL.md, skills/deploy-to-vercel/SKILL.md, skills/web-design-guidelines/SKILL.md, packages/react-best-practices-build/src/validate.ts, skills/vercel-optimize/lib/gates/index.mjs, .github/workflows/react-best-practices-ci.yml.

Tags

vercelagent-skillnextjsreactperformanceoptimization

Tech Stack

Node.js

Comments (0)

No comments yet

Editorially curated, with community endorsements as a secondary signal. Corrections welcome.