Vercel deployment environments - preview deploys as staging, production deploys, custom domains, and environment variable management. Use when deploying, setting up environments, or configuring domains.
How this skill is triggered — by the user, by Claude, or both
Slash command
/ncode-saas-toolkit-web:vercel-staging-productionThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Vercel has three built-in environments:
Vercel has three built-in environments:
| Environment | Trigger | URL | Purpose |
|---|---|---|---|
| Development | vercel dev | localhost:3000 | Local development |
| Preview | Push to any branch / PR | your-app-git-branch.vercel.app | Staging / testing |
| Production | Push to main branch | your-app.vercel.app + custom domain | Live site |
Every PR automatically gets a unique preview URL. This IS your staging environment:
# Push a feature branch
git push origin feature/add-pricing
# Vercel automatically deploys to:
# https://your-app-feature-add-pricing.vercel.app
Share this URL with testers. It uses preview environment variables.
Go to Project Settings -> Environment Variables. Each variable can be set for:
vercel devSUPABASE_URL
Production: https://prod-project.supabase.co
Preview: https://staging-project.supabase.co
Development: http://127.0.0.1:54321
POLAR_ACCESS_TOKEN
Production: polar_live_xxx
Preview: polar_sandbox_xxx
Development: polar_sandbox_xxx
RESEND_API_KEY
Production: re_live_xxx (sends real emails)
Preview: re_test_xxx (emails only to you)
Development: re_test_xxx
vercel env pull .env.local # Development vars
vercel env pull .env.preview --environment preview # Preview/staging vars
# Add a custom domain
vercel domains add yourdomain.com
# Or in the Vercel dashboard:
# Project Settings -> Domains -> Add
Vercel handles SSL certificates automatically.
# Deploy to preview (for testing)
vercel
# Deploy to production
vercel --prod
# View deployment status
vercel ls
Feature Branch (git push)
-> Vercel Preview Deploy (staging URL)
-> Test with staging Supabase + sandbox payments
-> Looks good? Merge PR to main
-> Vercel Production Deploy (live URL)
-> Real Supabase + real payments + real users
If a production deploy breaks:
# List recent deployments
vercel ls
# Promote a previous deployment to production
vercel promote [deployment-url]
Or in the Vercel dashboard: Deployments -> click the working one -> Promote to Production.
npx claudepluginhub dangogit/ncode-saas-toolkit-web --plugin ncode-saas-toolkit-webCreates, edits, and optimizes skills for Claude Code, including drafting, evaluating with test prompts, iterating on performance, and improving skill descriptions for better triggering accuracy.