vercel

Generated source view for the actual executable engineering/vercel skill. The durable routing article is Cloud, Data, and Service Skills. Source: skills/engineering/vercel/SKILL.md

Runtime Source

Bundled Resources

These files are part of the executable skill folder and must be preserved with the skill source.

Description

Use for Vercel platform work: CLI, deployments, env vars, functions, routing middleware, firewall, observability, storage, queues, cron jobs, AI SDK, AI Gateway, v0, sandbox, Marketplace, Turborepo, Turbopack, Satori, Geist, and workflow verification.

Skill Source

---
name: vercel
description: >-
  Use for Vercel platform work: CLI, deployments, env vars, functions, routing middleware,
  firewall, observability, storage, queues, cron jobs, AI SDK, AI Gateway, v0, sandbox,
  Marketplace, Turborepo, Turbopack, Satori, Geist, and workflow verification.
origin: personal
source_slug: vercel
merged_skill_router: true
---

# Vercel

Use this as the single executable router for Vercel work.

## Routing

- Platform operations route to CLI, API, deployments, env vars, functions, routing, firewall, storage, queues, cron, and observability references.
- AI and agent work routes to AI SDK, AI Gateway, chat SDK, sandbox, agent, browser verification, and persistence references.
- Frontend workflow routes to React best practices, shadcn, Satori, v0, Turborepo, and Turbopack references.
- Vercel Labs `agent-skills` imports route through existing owners: `web-design-guidelines`, `vercel-react-best-practices`, `react-view-transitions`, `component-composition-style`, and the folded `vercel-cli-with-tokens` reference. Do not add a duplicate executable just because an upstream Vercel skill exists.

## Agent-Skill Working Agreement

- Use `VERCEL_TOKEN` from the environment; do not pass tokens with `--token`.
- Default deployments to preview. Use production only when the user explicitly asks.
- Read `.vercel/project.json` or `.vercel/repo.json` for state, but do not edit `.vercel/` files directly.
- Prefer `--format json` for deploy lists and project/deployment inspection when the next step needs structured data.
- For optimize/performance audits, require metric-backed evidence from the project; do not silently turn a Vercel optimize run into generic code review.

## Reference Loading

Load one folded reference at a time. Prefer the most specific reference that matches the user's named service, framework, command, or error. If no folded reference matches, use the router guidance here and verify with primary docs or local project state.

<!-- folded-skills:auto:start -->
## Folded Skill References

These former standalone skills are bundled here as references to keep the runtime list compact. Load only the reference that matches the user's exact product, framework, or failure mode.

| Former skill | Reference | Description |
| --- | --- | --- |
| `claude-vercel-react-best-practices` | [`references/skills/claude-vercel-react-best-practices/SKILL.md`](references/skills/claude-vercel-react-best-practices/SKILL.md) | 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. |
| `vercel-agent` | [`references/skills/vercel-agent/SKILL.md`](references/skills/vercel-agent/SKILL.md) | Vercel Agent guidance — AI-powered code review, incident investigation, and SDK installation. Automates PR analysis and anomaly debugging. Use when configuring or understanding Vercel's AI development tools. |
| `vercel-agent-browser` | [`references/skills/vercel-agent-browser/SKILL.md`](references/skills/vercel-agent-browser/SKILL.md) | Browser automation CLI for AI agents. Use when the user needs to interact with websites, verify dev server output, test web apps, navigate pages, fill forms, click buttons, take screenshots, extract data, or automate any browser task. Also triggers when a dev server starts so you can verify it visually. |
| `vercel-agent-browser-verify` | [`references/skills/vercel-agent-browser-verify/SKILL.md`](references/skills/vercel-agent-browser-verify/SKILL.md) | Automated browser verification for dev servers. Triggers when a dev server starts to run a visual gut-check with agent-browser — verifies the page loads, checks for console errors, validates key UI elements, and reports pass/fail before continuing. |
| `vercel-ai-elements` | [`references/skills/vercel-ai-elements/SKILL.md`](references/skills/vercel-ai-elements/SKILL.md) | AI Elements component library guidance — pre-built React components for AI interfaces built on shadcn/ui. Use when building chat UIs, message displays, tool call rendering, streaming responses, reasoning panels, or any AI-native interface with the AI SDK. |
| `vercel-ai-gateway` | [`references/skills/vercel-ai-gateway/SKILL.md`](references/skills/vercel-ai-gateway/SKILL.md) | Vercel AI Gateway expert guidance. Use when configuring model routing, provider failover, cost tracking, or managing multiple AI providers through a unified API. |
| `vercel-ai-generation-persistence` | [`references/skills/vercel-ai-generation-persistence/SKILL.md`](references/skills/vercel-ai-generation-persistence/SKILL.md) | AI generation persistence patterns — unique IDs, addressable URLs, database storage, and cost tracking for every LLM generation |
| `vercel-ai-sdk` | [`references/skills/vercel-ai-sdk/SKILL.md`](references/skills/vercel-ai-sdk/SKILL.md) | Vercel AI SDK expert guidance. Use when building AI-powered features — chat interfaces, text generation, structured output, tool calling, agents, MCP integration, streaming, embeddings, reranking, image generation, or working with any LLM provider. |
| `vercel-api` | [`references/skills/vercel-api/SKILL.md`](references/skills/vercel-api/SKILL.md) | Vercel app and REST API expert guidance. Use when the agent needs live access to Vercel projects, deployments, environment variables, domains, logs, or documentation through the connected Vercel app or REST API. |
| `vercel-auth` | [`references/skills/vercel-auth/SKILL.md`](references/skills/vercel-auth/SKILL.md) | Authentication integration guidance — Clerk (native Vercel Marketplace), Descope, and Auth0 setup for Next.js applications. Covers middleware auth patterns, sign-in/sign-up flows, and Marketplace provisioning. Use when implementing user authentication. |
| `vercel-bootstrap` | [`references/skills/vercel-bootstrap/SKILL.md`](references/skills/vercel-bootstrap/SKILL.md) | Project bootstrapping orchestrator for repos that depend on Vercel-linked resources (databases, auth, and managed integrations). Use when setting up or repairing a repository so linking, environment provisioning, env pulls, and first-run db/dev commands happen in the correct safe order. |
| `vercel-chat-sdk` | [`references/skills/vercel-chat-sdk/SKILL.md`](references/skills/vercel-chat-sdk/SKILL.md) | Vercel Chat SDK expert guidance. Use when building multi-platform chat bots — Slack, Telegram, Microsoft Teams, Discord, Google Chat, GitHub, Linear — with a single codebase. Covers the Chat class, adapters, threads, messages, cards, modals, streaming, state management, and webhook setup. |
| `vercel-cli` | [`references/skills/vercel-cli/SKILL.md`](references/skills/vercel-cli/SKILL.md) | Vercel CLI expert guidance. Use when deploying, managing environment variables, linking projects, viewing logs, managing domains, or interacting with the Vercel platform from the command line. |
| `vercel-cli-with-tokens` | [`references/skills/vercel-cli-with-tokens/SKILL.md`](references/skills/vercel-cli-with-tokens/SKILL.md) | Deploy and manage projects on Vercel using token-based authentication. Use when working with Vercel CLI using access tokens rather than interactive login — e.g. "deploy to vercel", "set up vercel", "add environment variables to vercel". |
| `vercel-cms` | [`references/skills/vercel-cms/SKILL.md`](references/skills/vercel-cms/SKILL.md) | Headless CMS integration guidance — Sanity (native Vercel Marketplace), Contentful, DatoCMS, Storyblok, and Builder.io. Covers studio setup, content modeling, preview mode, revalidation webhooks, and Visual Editing. Use when building content-driven sites with a headless CMS on Vercel. |
| `vercel-cron-jobs` | [`references/skills/vercel-cron-jobs/SKILL.md`](references/skills/vercel-cron-jobs/SKILL.md) | Vercel Cron Jobs configuration and best practices. Use when adding, editing, or debugging scheduled tasks in vercel.json. |
| `vercel-deployments-cicd` | [`references/skills/vercel-deployments-cicd/SKILL.md`](references/skills/vercel-deployments-cicd/SKILL.md) | Vercel deployment and CI/CD expert guidance. Use when deploying, promoting, rolling back, inspecting deployments, building with --prebuilt, or configuring CI workflow files for Vercel. |
| `vercel-email` | [`references/skills/vercel-email/SKILL.md`](references/skills/vercel-email/SKILL.md) | Email sending integration guidance — Resend (native Vercel Marketplace) with React Email templates. Covers API setup, transactional emails, domain verification, and template patterns. Use when sending emails from a Vercel-deployed application. |
| `vercel-env-vars` | [`references/skills/vercel-env-vars/SKILL.md`](references/skills/vercel-env-vars/SKILL.md) | Vercel environment variable expert guidance. Use when working with .env files, vercel env commands, OIDC tokens, or managing environment-specific configuration. |
| `vercel-firewall` | [`references/skills/vercel-firewall/SKILL.md`](references/skills/vercel-firewall/SKILL.md) | Vercel Firewall and security expert guidance. Use when configuring DDoS protection, WAF rules, rate limiting, bot filtering, IP allow/block lists, OWASP rulesets, Attack Challenge Mode, or any security configuration on the Vercel platform. |
| `vercel-flags` | [`references/skills/vercel-flags/SKILL.md`](references/skills/vercel-flags/SKILL.md) | Vercel Flags guidance — feature flags platform with unified dashboard, Flags Explorer, gradual rollouts, A/B testing, and provider adapters. Use when implementing feature flags, experimentation, or staged rollouts. |
| `vercel-functions` | [`references/skills/vercel-functions/SKILL.md`](references/skills/vercel-functions/SKILL.md) | Vercel Functions expert guidance — Serverless Functions, Edge Functions, Fluid Compute, streaming, Cron Jobs, and runtime configuration. Use when configuring, debugging, or optimizing server-side code running on Vercel. |
| `vercel-geist` | [`references/skills/vercel-geist/SKILL.md`](references/skills/vercel-geist/SKILL.md) | Expert guidance for Geist, Vercel's default typography system and font family for precise Next.js interfaces. Use when configuring Geist Sans, Geist Mono, or Geist Pixel, setting up font imports, or applying Vercel typography and aesthetic guidance. |
| `vercel-geistdocs` | [`references/skills/vercel-geistdocs/SKILL.md`](references/skills/vercel-geistdocs/SKILL.md) | Expert guidance for Geistdocs, Vercel's documentation template built with Next.js and Fumadocs — MDX authoring, configuration, AI chat, i18n, feedback, deployment. Use when creating documentation sites, configuring geistdocs, writing MDX content, or setting up docs infrastructure. |
| `vercel-investigation-mode` | [`references/skills/vercel-investigation-mode/SKILL.md`](references/skills/vercel-investigation-mode/SKILL.md) | Orchestrated debugging coordinator. Triggers on frustration signals (stuck, hung, broken, waiting) and systematically triages: runtime logs → workflow status → browser verify → deploy/env. Reports findings at every step. |
| `vercel-json-render` | [`references/skills/vercel-json-render/SKILL.md`](references/skills/vercel-json-render/SKILL.md) | AI chat response rendering guidance — handling UIMessage parts, tool call displays, streaming states, and structured data presentation. Use when building custom chat UIs, rendering tool results, or troubleshooting AI response display issues. |
| `vercel-marketplace` | [`references/skills/vercel-marketplace/SKILL.md`](references/skills/vercel-marketplace/SKILL.md) | Vercel Marketplace expert guidance — discovering, installing, and building integrations, auto-provisioned environment variables, unified billing, and the vercel integration CLI. Use when consuming third-party services, building custom integrations, or managing marketplace resources on Vercel. |
| `vercel-micro` | [`references/skills/vercel-micro/SKILL.md`](references/skills/vercel-micro/SKILL.md) | Expert guidance for micro — asynchronous HTTP microservices framework by Vercel. Use when building lightweight HTTP servers, API endpoints, or microservices using the micro library. |
| `vercel-ncc` | [`references/skills/vercel-ncc/SKILL.md`](references/skills/vercel-ncc/SKILL.md) | Expert guidance for @vercel/ncc — a simple CLI for compiling Node.js modules into a single file with all dependencies included. Use when bundling serverless functions, CLI tools, or any Node.js project into a self-contained file. |
| `vercel-observability` | [`references/skills/vercel-observability/SKILL.md`](references/skills/vercel-observability/SKILL.md) | Vercel Observability expert guidance — Drains (logs, traces, speed insights, web analytics), Web Analytics, Speed Insights, runtime logs, custom events, OpenTelemetry integration, and monitoring dashboards. Use when instrumenting, debugging, or optimizing application performance and user experience on Vercel. |
| `vercel-payments` | [`references/skills/vercel-payments/SKILL.md`](references/skills/vercel-payments/SKILL.md) | Stripe payments integration guidance — native Vercel Marketplace setup, checkout sessions, webhook handling, subscription billing, and the Stripe SDK. Use when implementing payments, subscriptions, or processing transactions. |
| `vercel-queues` | [`references/skills/vercel-queues/SKILL.md`](references/skills/vercel-queues/SKILL.md) | Vercel Queues guidance (public beta) — durable event streaming with topics, consumer groups, retries, and delayed delivery. $0.60/1M ops. Powers Workflow DevKit. Use when building async processing, fan-out patterns, or event-driven architectures. |
| `vercel-react-best-practices` | [`references/skills/vercel-react-best-practices/SKILL.md`](references/skills/vercel-react-best-practices/SKILL.md) | React and Next.js performance optimization with 69 prioritized rules across 8 categories. Use when writing React components, implementing data fetching, reviewing code for performance, refactoring React/Next.js code, optimizing bundle size, or when the user says "React performance", "optimize React", "Next.js best practices", "bundle size", or "waterfall." Based on vercel-labs/agent-skills (291K weekly installs). |
| `vercel-routing-middleware` | [`references/skills/vercel-routing-middleware/SKILL.md`](references/skills/vercel-routing-middleware/SKILL.md) | Vercel Routing Middleware guidance — request interception before cache, rewrites, redirects, personalization. Works with any framework. Supports Edge, Node.js, and Bun runtimes. Use when intercepting requests at the platform level. |
| `vercel-runtime-cache` | [`references/skills/vercel-runtime-cache/SKILL.md`](references/skills/vercel-runtime-cache/SKILL.md) | Vercel Runtime Cache API guidance — ephemeral per-region key-value cache with tag-based invalidation. Shared across Functions, Routing Middleware, and Builds. Use when implementing caching strategies beyond framework-level caching. |
| `vercel-sandbox` | [`references/skills/vercel-sandbox/SKILL.md`](references/skills/vercel-sandbox/SKILL.md) | Run agent-browser + Chrome inside Vercel Sandbox microVMs for browser automation from any Vercel-deployed app. Use when the user needs browser automation in a Vercel app (Next.js, SvelteKit, Nuxt, Remix, Astro, etc.), wants to run headless Chrome without binary size limits, needs persistent browser sessions across commands, or wants ephemeral isolated browser environments. Triggers include "Vercel Sandbox browser", "microVM Chrome", "agent-browser in sandbox", "browser automation on Vercel", or any task requiring Chrome in a Vercel Sandbox. |
| `vercel-satori` | [`references/skills/vercel-satori/SKILL.md`](references/skills/vercel-satori/SKILL.md) | Expert guidance for Satori — Vercel's library that converts HTML and CSS to SVG, commonly used to generate dynamic OG images for Next.js and other frameworks. |
| `vercel-services` | [`references/skills/vercel-services/SKILL.md`](references/skills/vercel-services/SKILL.md) | Vercel Services — deploy multiple services within a single Vercel project. Use for monorepo layouts or when combining a backend (Python, Go) with a frontend (Next.js, Vite) in one deployment. |
| `vercel-shadcn` | [`references/skills/vercel-shadcn/SKILL.md`](references/skills/vercel-shadcn/SKILL.md) | shadcn/ui expert guidance — CLI, component installation, composition patterns, custom registries, theming, Tailwind CSS integration, and high-quality interface design. Use when initializing shadcn, adding components, composing product UI, building custom registries, configuring themes, or troubleshooting component issues. |
| `vercel-sign-in-with-vercel` | [`references/skills/vercel-sign-in-with-vercel/SKILL.md`](references/skills/vercel-sign-in-with-vercel/SKILL.md) | Sign in with Vercel guidance — OAuth 2.0/OIDC identity provider for user authentication via Vercel accounts. Use when implementing user login with Vercel as the identity provider. |
| `vercel-storage` | [`references/skills/vercel-storage/SKILL.md`](references/skills/vercel-storage/SKILL.md) | Vercel storage expert guidance — Blob, Edge Config, and Marketplace storage (Neon Postgres, Upstash Redis). Use when choosing, configuring, or using data storage with Vercel applications. |
| `vercel-swr` | [`references/skills/vercel-swr/SKILL.md`](references/skills/vercel-swr/SKILL.md) | SWR data-fetching expert guidance. Use when building React apps with client-side data fetching, caching, revalidation, mutations, optimistic UI, pagination, or infinite loading using the SWR library. |
| `vercel-turbopack` | [`references/skills/vercel-turbopack/SKILL.md`](references/skills/vercel-turbopack/SKILL.md) | Turbopack expert guidance. Use when configuring the Next.js bundler, optimizing HMR, debugging build issues, or understanding the Turbopack vs Webpack differences. |
| `vercel-turborepo` | [`references/skills/vercel-turborepo/SKILL.md`](references/skills/vercel-turborepo/SKILL.md) | Turborepo expert guidance. Use when setting up or optimizing monorepo builds, configuring task caching, remote caching, parallel execution, or the --affected flag for incremental CI. |
| `vercel-v0-dev` | [`references/skills/vercel-v0-dev/SKILL.md`](references/skills/vercel-v0-dev/SKILL.md) | v0 by Vercel expert guidance. Use when discussing AI code generation, generating UI components from prompts, v0 CLI usage, v0 SDK/API integration, or integrating v0 into development workflows with GitHub and Vercel deployment. |
| `vercel-verification` | [`references/skills/vercel-verification/SKILL.md`](references/skills/vercel-verification/SKILL.md) | Full-story verification — infers what the user is building, then verifies the complete flow end-to-end: browser → API → data → response. Triggers on dev server start and 'why isn't this working' signals. |
| `vercel-workflow` | [`references/skills/vercel-workflow/SKILL.md`](references/skills/vercel-workflow/SKILL.md) | Vercel Workflow DevKit (WDK) expert guidance. Use when building durable workflows, long-running tasks, API routes or agents that need pause/resume, retries, step-based execution, or crash-safe orchestration with Vercel Workflow. |
<!-- folded-skills:auto:end -->
## Related Skills

- `find-skills` for upstream skill discovery before adding new children
- `skill-creator` for pruning or extending this router

---

Timeline

• 2026-07-15 | Generated a browseable source page from the actual executable skill file. Source: skills/engineering/vercel/SKILL.md