菜单
Zero-auth Vercel deployment workflow with automatic framework detection for 20+ frameworks. Use when deploying web applications to Vercel, creating preview deployments, or setting up deployment pipelines. Supports Next.js, Vite, Remix, SvelteKit, Astro, Nuxt, and more.
默认使用会先检查来源的 Prompt；你也可以切换为直接命令，或下载本地副本。
决定是否安装前，请先阅读 SKILL.md，以及 SkillsMP 当前展示的配套文件。
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt；运行前请先检查来源。
npx skills add https://github.com/oimiragieo/agent-studio --skill vercel-deploy命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地？可下载 SkillsMP 当前能够提供的文件。
Agent frontmatter enhancements — disallowedTools, mcpServers scoping, fork_eligible field
Context management — pre-compact persistence, threshold alignment, microcompact/circuit breaker detection
Hook enhancements — updatedInput for bash safety prefixes, suppressOutput for verbose blocks, denial-based routing feedback
正在显示 SKILL.md
基于 SOC 职业分类
| name | vercel-deploy |
| description | Zero-auth Vercel deployment workflow with automatic framework detection for 20+ frameworks. Use when deploying web applications to Vercel, creating preview deployments, or setting up deployment pipelines. Supports Next.js, Vite, Remix, SvelteKit, Astro, Nuxt, and more. |
| license | MIT |
| metadata | {"author":"vercel-labs","version":"1.0.0","source":"vercel-labs/agent-skills"} |
| verified | true |
| lastVerifiedAt | "2026-02-22T00:00:00.000Z" |
| version | 1.1.0 |
| tools | ["Read","Write","Edit","Bash","Glob","Grep"] |
| source | builtin |
| trust_score | 100 |
| provenance_sha | b04cb087ba665489 |
Zero-auth deployment to Vercel with automatic framework detection. Deploy any web application with a single command and receive preview URLs, claim URLs, and deployment metadata.
Use this skill when:
Vercel auto-detects and configures builds for these frameworks:
| Framework | Detection | Build Command |
|---|---|---|
| Next.js | next.config.* | next build |
| Vite | vite.config.* | vite build |
| Remix | remix.config.* | remix build |
| SvelteKit | svelte.config.* | vite build |
| Astro | astro.config.* | astro build |
| Nuxt | nuxt.config.* | nuxt build |
| Gatsby | gatsby-config.* | gatsby build |
| Angular | angular.json | ng build |
| Vue CLI | vue.config.* | vue-cli-service build |
| Create React App | react-scripts in deps | react-scripts build |
| Ember | ember-cli-build.js | ember build |
| Hugo | config.toml / hugo.toml | hugo |
| Jekyll |
_config.yml |
jekyll build |
| Eleventy | .eleventy.js | eleventy |
| Docusaurus | docusaurus.config.* | docusaurus build |
| Static HTML | index.html at root | None |
Ensure the Vercel CLI is installed:
# Install globally
npm install -g vercel
# Or use npx (no install needed)
npx vercel
For new projects not yet linked to Vercel:
# Interactive setup -- creates .vercel/project.json
vercel link
# Or create a new project
vercel --yes
# Deploy to preview environment
vercel
# Output:
# Vercel CLI 34.x.x
# Linked to username/project-name
# Inspect: https://vercel.com/username/project-name/abcdef
# Preview: https://project-name-abc123.vercel.app
# Deploy to production
vercel --prod
# Output includes production URL:
# Production: https://project-name.vercel.app
For automated deployments without authentication prompts:
# Using VERCEL_TOKEN environment variable
VERCEL_TOKEN=your-token vercel --yes --token=$VERCEL_TOKEN
# Or with npx for zero-install
VERCEL_TOKEN=your-token npx vercel --yes --token=$VERCEL_TOKEN
Successful deployments return JSON-compatible metadata:
{
"url": "https://project-name-abc123.vercel.app",
"inspectUrl": "https://vercel.com/team/project/deployment-id",
"projectId": "prj_abc123",
"deploymentId": "dpl_abc123",
"readyState": "READY"
}
Use --json flag for machine-readable output:
vercel --json
# Check deployment status
vercel inspect <deployment-url>
# View deployment logs
vercel logs <deployment-url>
# List recent deployments
vercel list
# Set environment variables for deployment
vercel env add VARIABLE_NAME production
vercel env add VARIABLE_NAME preview
vercel env add VARIABLE_NAME development
# Or pass inline
vercel -e KEY=value -e KEY2=value2
Override auto-detected settings in vercel.json:
{
"buildCommand": "npm run build",
"outputDirectory": "dist",
"installCommand": "npm install",
"framework": "vite",
"rewrites": [{ "source": "/(.*)", "destination": "/index.html" }]
}
# Add a custom domain
vercel domains add example.com
# Assign domain to project
vercel alias <deployment-url> example.com
{
"framework": "nextjs",
"buildCommand": "next build",
"outputDirectory": ".next"
}
Next.js deployments automatically enable:
next/image{
"framework": "vite",
"buildCommand": "vite build",
"outputDirectory": "dist",
"rewrites": [{ "source": "/(.*)", "destination": "/index.html" }]
}
{
"framework": "sveltekit",
"buildCommand": "vite build",
"outputDirectory": ".svelte-kit/output"
}
SvelteKit uses the @sveltejs/adapter-vercel adapter for optimal deployment.
Configure GitHub integration for automatic preview deployments:
# Deploy to staging first
vercel --env ENVIRONMENT=staging
# Promote to production after validation
vercel promote <deployment-url>
# List recent deployments
vercel list
# Rollback to a previous deployment
vercel rollback <deployment-url>
vercel logs <url>buildCommand matches local buildengines in package.json)Add rewrites for SPA frameworks:
{
"rewrites": [{ "source": "/(.*)", "destination": "/index.html" }]
}
vercel inspect --logs{
"functions": {
"api/heavy-route.ts": {
"maxDuration": 60
}
}
}
VERCEL_TOKEN to version controlvercel env pull to sync environment variables locally| Anti-Pattern | Why It Fails | Correct Approach |
|---|---|---|
| Deploying without local build test | Build fails in Vercel, wasted deployment attempt | Run build locally before vercel deploy |
| Skipping preview before production | Regressions reach users before detection | Always validate preview URL first |
| Hardcoded env vars in deploy command | Secrets exposed in shell history and logs | Configure env vars in Vercel project settings |
| Ignoring post-deploy build logs | Silent failures go undetected | Always check logs after deployment |
| No framework detection verification | Wrong settings cause build failures | Verify auto-detected framework in project config |
Vercel CLI auto-detects frameworks by checking project files in this priority order:
| Framework | Detection File | Build Command | Output Dir |
|---|---|---|---|
| Next.js | next.config.* | next build | .next |
| Remix | remix.config.* | remix build | build |
| SvelteKit | svelte.config.* | vite build | build |
| Astro | astro.config.* | astro build | dist |
| Nuxt | nuxt.config.* | nuxt build | .output |
| Vite | vite.config.* | vite build | dist |
| Gatsby | gatsby-config.* | gatsby build | public |
| Angular | angular.json | ng build | dist |
| Vue CLI | vue.config.* | vue-cli-service build | dist |
| Create React App | react-scripts in pkg | react-scripts build | build |
| Docusaurus | docusaurus.config.* | docusaurus build | build |
| Eleventy | .eleventy.js | eleventy | _site |
| Hugo | config.toml (Hugo) | hugo | public |
| Jekyll | _config.yml (Jekyll) | jekyll build | _site |
| Static HTML | index.html only | none | . |
When auto-detection fails, specify framework explicitly:
vercel --build-env FRAMEWORK_PRESET=nextjs
# Add env var (prompts for value)
vercel env add MY_VAR production
# Add from .env file
vercel env pull .env.local
# List all env vars
vercel env ls
# Remove env var
vercel env rm MY_VAR production
| Scope | When Applied | Use For |
|---|---|---|
production | Production deploys only | API keys, secrets |
preview | Preview deploys (PRs) | Staging configs |
development | vercel dev only | Local development |
For pnpm/npm/yarn workspaces:
{
"buildCommand": "cd ../.. && pnpm build --filter=my-app",
"installCommand": "pnpm install --filter=my-app...",
"rootDirectory": "packages/my-app"
}
Set root directory in Vercel dashboard or vercel.json:
{
"framework": "nextjs",
"buildCommand": "pnpm turbo build --filter=web",
"outputDirectory": "apps/web/.next"
}
vercel dev — runs your project locally with Vercel's edge network simulation
vercel dev --listen 3001 for custom portvercel dev # Start local dev server on port 3000
vercel dev --listen 3001 # Custom port
{
"rewrites": [{ "source": "/api/(.*)", "destination": "/api/index" }],
"redirects": [{ "source": "/old", "destination": "/new", "permanent": true }],
"headers": [{ "source": "/(.*)", "headers": [{ "key": "X-Frame-Options", "value": "DENY" }] }],
"functions": { "api/heavy.js": { "memory": 3009, "maxDuration": 60 } },
"crons": [{ "path": "/api/cron", "schedule": "0 * * * *" }]
}
vercel teams ls # List teams
vercel switch <team-slug> # Switch active team
vercel link # Link local dir to Vercel project
vercel project ls # List projects in current team
Before starting:
Read .claude/context/memory/learnings.md
After completing:
.claude/context/memory/learnings.md.claude/context/memory/issues.md.claude/context/memory/decisions.md