Skill: Vercel React Best Practices
by Vercel
Vercel Engineering's React and Next.js performance playbook as an agent skill — 70 rules across 8 categories, ordered by impact, for writing and refactoring fast components.
Vercel's official optimization skill: collects real production metrics first, then returns ranked, citation-checked cost and performance fixes.
Add this skill to your favorite AI agent in a few steps.
Learn how to use this skill with different AI agents.
From a linked Vercel project directory: "optimize this Vercel project" — the agent collects signals, checks blockers (framework support, Observability Plus, project scope), gates roughly six metric-backed candidates, investigates only the files those candidates name, verifies every claim and citation, then prints a ranked report — for example a low cache-hit route on /docs/[...slug] with a named cache policy and line-level file references.
vercel-optimize is the flagship skill in vercel-labs/agent-skills, Vercel's official collection of agent skills. It audits a deployed Vercel project and returns ranked, evidence-backed recommendations for cutting spend and improving Core Web Vitals.
Its governing rule is what makes it unusual: the agent may not open a source file until signals have been collected and a deterministic gate points at a specific route, file, or project setting. No repo-wide grepping, no inferring problems from vercel.json.
Function invocations, duration, TTFB and cold starts; CPU, memory and GB-hours; request volume, cache hit rate and status distribution; Fast Data Transfer and bot traffic; ISR reads, writes and over-revalidation; routing middleware; external API latency; Core Web Vitals from Speed Insights; Image Optimization; Build Minutes; usage spikes by billing service; Bot Protection; Fluid compute; and region pinning.
Route-to-file mapping is strongest for Next.js (App and Pages Router) and SvelteKit, supported for Nuxt, limited for Astro, and paused up front for Hono, Remix, and unknown frameworks rather than guessing.
Citations come only from a curated allow-list and are stripped when they do not match the detected framework version. A config-contradiction guard rejects advice like "enable Fluid compute" when the signals show it is already on. Cost impact is stated as a magnitude — the skill never invents a dollar figure. Auth-sensitive, error, fallback, and geo-varying responses stay dynamic unless there is evidence caching them is safe.
Node.js 20+, Vercel CLI v53 or newer, an authenticated session (vercel login), a linked project directory (vercel link), and Observability Plus for route-level metric-backed recommendations. Without route metrics the skill stops and offers an explicit code-only path instead of silently degrading.
by Vercel
Vercel Engineering's React and Next.js performance playbook as an agent skill — 70 rules across 8 categories, ordered by impact, for writing and refactoring fast components.
by Cloudflare
Audit Core Web Vitals with real measurements via Chrome DevTools — then fix what the numbers actually point to.
by Vercel
Vercel's official guide to React's <ViewTransition> API — shared elements, list identity, Suspense reveals and directional route animations without an animation library.
by Datadog
Search Datadog logs from an agent and keep the bill under control — query syntax, exclusion filters, log-based metrics, archives and PII scrubbing.