Vercel -- Deployment Integration Expert

---

name: vercel description: > Configure Vercel deployments, Edge Functions, ISR caching, and environment management. USE WHEN: User needs Vercel deployment configuration, function architecture, environment management, caching strategy, or performance tuning. DON'T USE WHEN: User needs general CI/CD pipeline design. Use GitHub Actions skill or Forge for broader CI/CD. OUTPUTS: Deployment configs, function implementations, caching strategies, environment setups, performance budgets, vercel.json configurations. version: 1.1.0 author: SpookyJuice tags: [vercel, deployment, edge-functions, nextjs, caching] price: 14 author_url: "https://www.shopclawmart.com" support: "brian@gorzelic.net" license: proprietary osps_version: "0.1" content_hash: "sha256:7966f6599db8312a97f78c3f6445233b2ccff86853316607af039b0da50c562a"

#‍​‌‌​‌‌‌‌​‌‌‌​​‌‌​‌‌‌​​​​​‌‌‌​​‌‌​​‌‌‌​‌​​​‌‌​​​‌​​‌‌‌​‌​​‌‌‌​​‌‌​‌‌​‌​‌​​​‌​‌‌​‌​​‌‌‌​​​​​‌‌​​​​​​‌‌​‌‌‌​‌‌​​‌‌​​​‌‌‌​​​​‌‌​​​‌‌​​‌‌​​‌‌​‌‌​​​‌‌‍ Vercel

Version: 1.1.0 Price: $14 Type: Skill

Description

Production Vercel deployment patterns for teams that need more than vercel deploy. The defaults get you live in seconds, but production demands — cache invalidation across ISR pages, function cold starts at scale, environment variable sprawl across preview branches — require configuration depth the quickstart doesn't cover. This skill gives you the deployment architecture that handles real traffic.

Prerequisites

• Vercel account with project linked
• Vercel CLI: npm i -g vercel
• VERCEL_TOKEN for CI/CD automation
• Git repository connected to Vercel project

Setup

1. Copy SKILL.md into your OpenClaw skills directory
2. Set environment variables:

   export VERCEL_TOKEN="your-token"
   export VERCEL_ORG_ID="your-org-id"
   export VERCEL_PROJECT_ID="your-project-id"
   

3. Reload OpenClaw

Commands

• "Configure deployment for [project type]"
• "Set up Edge vs. Serverless functions for [routes]"
• "Manage environment variables across [environments]"
• "Implement ISR with on-demand revalidation"
• "Optimize build performance for [project]"
• "Set up custom domains and redirects"
• "Debug this deployment issue: [error]"

Workflow

Deployment Architecture

1. Project structure — configure vercel.json: framework detection, build command, output directory, and function configuration. For monorepos, set rootDirectory and configure build filters.
2. Environment strategy — map environments: Production (main branch), Preview (all other branches), and Development (local). Define which env vars exist at each level and which are shared.
3. Branch deploy rules — configure which branches trigger deployments. Use ignoreCommand to skip builds when only docs or tests changed. This saves build minutes and deploy slots.
4. Deployment protection — enable Vercel Authentication for preview deployments so staging URLs aren't publicly accessible. Configure bypass for CI/CD health checks.
5. Skew Protection — enable in project settings. This ensures that client-side JavaScript always matches the server deployment, preventing issues during rolling deployments.
6. Rollback plan — document the rollback process: Vercel dashboard → Deployments → click "Promote to Production" on the previous stable deployment. Practice this before you need it.

Function Architecture

1. Runtime selection — Edge Runtime (runs on Cloudflare Workers, fast cold starts, limited APIs) vs. Node.js Serverless (full Node.js APIs, slower cold starts, more memory). Choose Edge for: middleware, redirects, A/B tests, geolocation. Choose Serverless for: database queries, heavy computation, Node.js-specific APIs.
2. Route configuration — in Next.js: export const runtime = 'edge' per route or in route.ts for API routes. In vercel.json: configure function regions, memory, and duration limits per route pattern.
3. Cold start optimization — minimize function bundle size: use dynamic imports, tree-shake dependencies, avoid importing large libraries at the top level. For critical paths, use Edge functions which have near-zero cold starts.
4. Streaming responses — use ReadableStream for long-running responses (AI chat, large data sets). This keeps the connection alive and shows progress instead of waiting for the full response.
5. Region selection — deploy functions close to your database. If your database is in us-east-1, configure functions for iad1. Multi-region for global latency, single-region for consistency.
6. Timeout management — Serverless functions have a default 10s timeout (up to 300s on Pro). Long operations should be queued to a background worker, not run in the function.

Caching and ISR

1. Static vs. ISR vs. SSR — decide per page: fully static (rebuilt at build time), ISR (static with background revalidation), or SSR (generated per request). Most pages should be ISR.
2. ISR configuration — export const revalidate = 60 for time-based revalidation. This serves stale content for 60 seconds then regenerates in the background.
3. On-demand revalidation — implement revalidatePath() or revalidateTag() in API routes triggered by webhooks (CMS publish, database change). This gives you instant updates without waiting for the time-based window.
4. Cache tags — tag cached resources with next.tags so you can invalidate specific groups: all blog posts, all product pages, or a specific product. More precise than path-based invalidation.
5. Cache headers — for API routes: set Cache-Control: s-maxage=60, stale-while-revalidate=300 for Vercel's edge cache. CDN caching dramatically reduces function invocations.
6. Cache debugging — check the X-Vercel-Cache response header: HIT (served from cache), MISS (generated fresh), STALE (served stale, revalidating), BYPASS (cache skipped). Use this to verify your caching strategy works.

Output Format

▲ VERCEL — [CONFIGURATION TYPE]
Project: [Name]
Framework: [Next.js/SvelteKit/Remix/etc.]
Date: [YYYY-MM-DD]

═══ DEPLOYMENT CONFIG ═══
[vercel.json or next.config.js content]

═══ ENVIRONMENT VARIABLES ═══
| Variable | Production | Preview | Development | Sensitive |
|----------|-----------|---------|-------------|-----------|
| [var] | [value/set] | [value/set] | [value/set] | [yes/no] |

═══ FUNCTION ARCHITECTURE ═══
| Route | Runtime | Region | Timeout | Memory |
|-------|---------|--------|---------|--------|
| [route] | Edge/Node | [region] | [seconds] | [MB] |

═══ CACHING STRATEGY ═══
| Page/Route | Strategy | Revalidate | Tags |
|-----------|----------|-----------|------|
| [route] | ISR/Static/SSR | [seconds] | [tags] |

═══ PERFORMANCE ═══
| Metric | Current | Budget | Status |
|--------|---------|--------|--------|
| LCP | [ms] | <2500ms | 🟢/🟡/🔴 |
| FID | [ms] | <100ms | 🟢/🟡/🔴 |

Common Pitfalls

• Environment variable scoping — variables set for "Production" only don't exist in preview deployments. This causes preview builds to fail with mysterious missing config errors.
• Edge Runtime limitations — Edge functions can't use Node.js-specific APIs (fs, child_process, native modules). Check compatibility before choosing Edge runtime.
• ISR revalidation during deploys — ISR pages revalidated during a deployment may cache the old version. Use Skew Protection and consider on-demand revalidation after deployments.
• Preview deployment URLs leaking — preview deployments are publicly accessible by default. Enable Vercel Authentication to prevent staging content from being indexed or accessed.
• Build minute waste — every push to every branch triggers a build by default. Use ignoreCommand or Git integration settings to filter builds for non-code changes.

Guardrails

• Never exposes secrets in client bundles. Environment variables prefixed with NEXT_PUBLIC_ are embedded in client JavaScript. Sensitive values (API keys, database URLs) never get this prefix.
• Rollback is always ready. Every production deployment can be rolled back in the Vercel dashboard. The team knows how to do this before they need to.
• Preview deployments are protected. Enable Vercel Authentication on previews so staging content isn't publicly indexed.
• Performance budgets in CI. Lighthouse/CWV checks run in CI and block deployment if metrics regress beyond thresholds.
• Region awareness. Functions are deployed to the region closest to the data source, not the default. Latency between function and database adds up fast.
• Cost monitoring. Tracks function invocations, bandwidth, and build minutes against plan limits. Flags approaching overages before they hit.
• Preview reviewed before production promotion. Every production deployment is validated in a preview environment first. No promoting directly to production without verifying functionality, performance, and environment variable correctness on a preview URL.

Support

Questions or issues with this skill? Contact brian@gorzelic.net Published by SpookyJuice — https://www.shopclawmart.com