vercel-deployments
vercel-deployments is an engineering AI skill with a core value of Deploy frontend and full-stack apps on Vercel with previews, edge functions, environment promotion, and production guardrails. It
helps developers solve real-world problems in the engineering domain, boosting
efficiency, automating repetitive tasks, and optimizing workflows.
Deploy frontend and full-stack apps on Vercel with previews, edge functions, environment promotion, and production guardrails.
Quick Facts
mkdir -p ./skills/vercel-deployments && curl -sfL https://raw.githubusercontent.com/sickn33/antigravity-awesome-skills/main/skills/vercel-deployments/SKILL.md -o ./skills/vercel-deployments/SKILL.mdRun in terminal / PowerShell. Requires curl (Unix) or PowerShell 5+ (Windows).
Skill Content
# Vercel Deployments
Ship web apps quickly with preview environments and managed edge infrastructure.
When to Use This Skill
Use this skill when:
- Deploying Next.js, SvelteKit, Nuxt, or static sites
- Setting up preview environments for every PR
- Configuring edge functions and serverless APIs
- Managing environment variables across preview/production
- Setting up custom domains and redirects
Prerequisites
- Node.js 18+
- Vercel account (free tier works for personal projects)
- Git repository (GitHub, GitLab, or Bitbucket)
Quick Start
# Install CLI
npm i -g vercel
# Login and link project
vercel login
vercel link
# Deploy to preview
vercel
# Deploy to production
vercel --prod
# Pull environment variables locally
vercel env pull .env.localProject Configuration
// vercel.json
{
"framework": "nextjs",
"buildCommand": "npm run build",
"outputDirectory": ".next",
"installCommand": "npm ci",
"regions": ["iad1", "sfo1", "cdg1"],
"headers": [
{
"source": "/api/(.*)",
"headers": [
{ "key": "Cache-Control", "value": "no-store" },
{ "key": "X-Content-Type-Options", "value": "nosniff" }
]
},
{
"source": "/(.*)",
"headers": [
{ "key": "X-Frame-Options", "value": "DENY" },
{ "key": "Strict-Transport-Security", "value": "max-age=63072000; includeSubDomains" }
]
}
],
"redirects": [
{ "source": "/blog/:slug", "destination": "/posts/:slug", "permanent": true }
],
"rewrites": [
{ "source": "/api/v1/:path*", "destination": "https://api.example.com/:path*" }
]
}Environment Variables
# Add environment variables
vercel env add DATABASE_URL production
vercel env add DATABASE_URL preview
vercel env add NEXT_PUBLIC_API_URL production
# List all env vars
vercel env ls
# Pull to local .env.local
vercel env pull .env.local
# Remove an env var
vercel env rm SECRET_KEY productionEnvironment Separation Pattern
# Production — real credentials
vercel env add DATABASE_URL production <<< "postgresql://prod-host:5432/app"
vercel env add STRIPE_SECRET_KEY production
# Preview — staging/test credentials
vercel env add DATABASE_URL preview <<< "postgresql://staging-host:5432/app"
vercel env add STRIPE_SECRET_KEY preview # Use test mode key
# Development — local values
vercel env add DATABASE_URL development <<< "postgresql://localhost:5432/app"Edge Functions
// app/api/geo/route.ts — Edge API route (Next.js App Router)
import { NextRequest } from 'next/server';
export const runtime = 'edge';
export function GET(request: NextRequest) {
const country = request.geo?.country || 'US';
const city = request.geo?.city || 'Unknown';
return Response.json({
country,
city,
region: request.geo?.region,
timestamp: new Date().toISOString(),
});
}// middleware.ts — Edge middleware for auth/redirects
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';
export function middleware(request: NextRequest) {
// Block non-US traffic from admin
if (request.nextUrl.pathname.startsWith('/admin')) {
if (request.geo?.country !== 'US') {
return NextResponse.redirect(new URL('/blocked', request.url));
}
}
// Add security headers
const response = NextResponse.next();
response.headers.set('X-Request-Id', crypto.randomUUID());
return response;
}
export const config = {
matcher: ['/admin/:path*', '/api/:path*'],
};GitHub Actions Integration
# .github/workflows/preview.yml
name: Vercel Preview
on: pull_request
jobs:
deploy:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- uses: actions/setup-node@v4
with:
node-version: '20'
cache: 'npm'
- run: npm ci
- run: npm run lint
- run: npm run test
- name: Deploy to Vercel Preview
id: deploy
run: |
🎯 Best For
- Engineering teams doing code reviews
- Open source maintainers
- Claude users
- AI users
💡 Use Cases
- Reviewing pull requests for security vulnerabilities
- Checking code style consistency
- Using vercel-deployments in daily workflow
- Automating repetitive engineering tasks
📖 How to Use This Skill
- 1
Install the Skill
Copy the install command from the Terminal tab and run it. The SKILL.md file downloads to your local skills directory.
- 2
Load into Your AI Assistant
Open Claude and reference the skill. Paste the SKILL.md content or use the system prompt tab.
- 3
Apply vercel-deployments to Your Work
Provide context for your task — paste source material, describe your audience, or share existing work to guide the AI.
- 4
Review and Refine
Edit the AI output for accuracy, tone, and completeness. Add human insight where the AI lacks context.
❓ Frequently Asked Questions
Does this skill check for OWASP Top 10?
Security-focused review skills often include OWASP checks. Check the skill content for specific vulnerability categories covered.
How do I install vercel-deployments?
Copy the install command from the Terminal tab and run it. The skill downloads to ./skills/vercel-deployments/SKILL.md, ready to use.
Can I customize this skill for my team?
Absolutely. Edit the SKILL.md file to add team-specific instructions, examples, or workflows.
⚠️ Common Mistakes to Avoid
Blindly accepting AI suggestions
Always verify AI-generated review comments. Some suggestions may not apply to your specific codebase conventions.
Not reading the full skill
Skills contain important context and edge cases beyond the quick start.