skill

vercel-deployment · davila7 — Claude Code skill: ship Next.js to Vercel

Q: How do I install vercel-deployment in Claude?

Use the templates CLI: `npx claude-code-templates@latest --skill development/vercel-deployment`. Or the skills CLI: `npx skills add davila7/claude-code-templates --skill vercel-deployment -a claude-code`. The file lands at `~/.claude/skills/vercel-deployment/SKILL.md`.

Q: What does the skill require?

A project built on `nextjs-app-router`. On other routers or frameworks, some of the runtime and env-var advice will not fit.

A Claude skill that tells your agent how to deploy Next.js to Vercel: env vars per environment, edge vs serverless, build cache.

Install into Claude Code · claude-code-templates All methods and platforms ↓

npx claude-code-templates@latest --skill development/vercel-deployment

Open on GitHub

What vercel-deployment does

The skill loads Vercel platform knowledge into your agent for Next.js work. It covers environment variables across dev, preview and production, picking between edge and serverless runtimes, trimming build size, and setting up monitoring. Your agent leans on that when you ask it to sort out a deployment.

There is a section on anti-patterns: secrets sitting in NEXT_PUBLIC_ variables, one database shared by preview and production, no build cache. A sharp-edges table rates each issue by severity, from leaking secrets to the browser down to stale pages after a deploy.

The skill assumes a nextjs-app-router project. On Pages Router or another framework, the runtime and env-var advice needs checking before you apply it. Pairs with supabase-backend.

What it helps with

split environment variables across dev, preview and production
decide between edge and serverless for a given API route
shrink a serverless function and cut cold starts
test a preview deployment before pushing to production
trace a secret leaking into the client bundle

Example prompts for the agent

Check my next.config.js and tell me which env vars should differ per environment
This API route is slow on cold start — move it to edge or keep it serverless?
Why is the page showing stale data after deploy? Point me at the caching fix

How to install vercel-deployment

1claude-code-templates

npx claude-code-templates@latest --skill development/vercel-deployment

2Skills CLI (Vercel)

npx skills add davila7/claude-code-templates --skill vercel-deployment -a claude-code

3Manually: put the files in place

~/.claude/skills/vercel-deployment/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/vercel-deployment/

Manually: put the files in place

.agents/skills/vercel-deployment/SKILL.md

For all projects use ~/.agents/skills/

Manually: put the files in place

.cursor/skills/vercel-deployment/SKILL.md

Cursor also reads .agents/skills/ and .claude/skills/

1GitHub CLI

gh skill install davila7/claude-code-templates vercel-deployment

2Manually: put the files in place

.github/skills/vercel-deployment/SKILL.md

Platform CLI

gemini skills install https://github.com/davila7/claude-code-templates --path cli-tool/components/skills/development/vercel-deployment

Manually: put the files in place

.devin/skills/vercel-deployment/SKILL.md

The legacy .windsurf/skills/ path still works

Step by step, with commands for each platform: How to install skills in Claude Code: five ways

Questions about vercel-deployment

How do I install vercel-deployment in Claude?

Use the templates CLI: npx claude-code-templates@latest --skill development/vercel-deployment. Or the skills CLI: npx skills add davila7/claude-code-templates --skill vercel-deployment -a claude-code. The file lands at ~/.claude/skills/vercel-deployment/SKILL.md.

What does vercel-deployment do?

It gives your agent Vercel deployment knowledge for Next.js: per-environment env vars, runtime choice, build optimization, preview deploys and monitoring. It also lists anti-patterns and sharp edges with fixes.

What does the skill require?

A project built on nextjs-app-router. On other routers or frameworks, some of the runtime and env-var advice will not fit.

vercel-deployment by other authors comes first.

vercel-deployment sickn33 A skill that prepares and runs a Next.js project deployment to Vercel. Use it to set up a preview environment, validate environment variables, and ensure the build will succeed. CX Codex +1 1,800installs vercel-deployments devops-skills A skill for deploying frontend and full-stack apps on Vercel: previews, edge functions, environment variables and production guardrails. CX Codex +1 316installs vercel sanjeed5 A Cursor rule with opinionated guidance for building and deploying on Vercel. Useful when your agent writes Next.js code and you want it to follow the platform's conventions. ★ 3,579repo stars vercel-development Mindrally A rule set that steers your coding agent toward Next.js App Router, React Server Components and the Vercel AI SDK. Useful when the agent keeps reaching for client components by reflex. CX Codex +1 712installs nextjs-deployment giuseppe-trisciuoglio Provides production deployment patterns for Next.js. Sets up multi-stage Dockerfiles, GitHub Actions workflows, health checks, and OpenTelemetry instrumentation. CX Codex +1 3,700installs vercel-optimize vercel-labs A skill that audits Vercel spend and speed: it gathers usage and route metrics first, then recommends code and config changes. CX Codex +1 111,200installs netlify-development Mindrally A skill that gives your agent Netlify build and deploy rules: serverless and edge functions, Blobs, Image CDN, build config. Useful when it writes functions or edits netlify.toml. CX Codex +1 665installs

From the same set224

The whole set →

svelte-debug Reads a Svelte or SvelteKit error and stack trace, finds whether the cause is compilation, runtime or config, and hands you a fix. 134installs paper-2-web Turns an academic paper in LaTeX or PDF into an interactive homepage, a conference poster and a presentation video. Handy before a talk or when promoting a preprint. 133installs react-useeffect A skill that walks through React's useEffect rules from the official docs and points out what to use instead when an Effect is unnecessary. 127installs svelte-scaffold Builds out a new SvelteKit project, feature module or component library with a ready folder layout and config files. Handy when you want a starting point without wiring it by hand. 127installs github-workflow-automation A skill with ready-made patterns for AI-driven PR reviews, issue triage and CI/CD on GitHub. Useful when you are wiring automation into a repository. 121installs sync-health-monitor A slash command that checks GitHub-Linear sync health: API limits, webhooks, latency, error patterns. Useful when issues stop reaching the other side. 121installs svelte-storybook-mock Sets up SvelteKit module mocks in Storybook stories so a component renders in isolation, without the app running. 121installs ai-wrapper-product Guides you through building a product around an AI API: prompts, token accounting, usage limits and output validation. 120installs