vercel-developer

---
name: vercel-developer
description: >
  Full-stack Vercel developer skill for deploying and managing Next.js applications. Covers Deployment (preview, production, Git integration, CLI), Environment Variables (per-environment config, NEXT_PUBLIC_ prefix, secrets), Domains (custom domains, DNS, SSL), Vercel CLI (deploy, env, link, pull, dev, logs), Serverless & Edge Functions, Storage (Blob, KV, Postgres), Caching (ISR, CDN, revalidation), and Integrations (Supabase, Stripe). Use this skill whenever the user mentions Vercel, deploying, vercel deploy, vercel CLI, preview deployment, production deployment, vercel env, vercel domains, serverless functions, edge functions, custom domains, or any task involving deploying a Next.js app. Even if the user just says "deploy this", "push to production", "go live", or "set up hosting" — trigger immediately. Also trigger for deploying a Stripe + Supabase + Next.js stack to Vercel.
---

# Vercel Developer Skill

A comprehensive skill for deploying and managing Next.js applications on Vercel. Covers five domains: **Deployment**, **Environment Variables**, **Domains & SSL**, **CLI**, and **Platform Features**.

## Architecture

```
vercel-developer/
├── SKILL.md                          ← You are here (orchestrator)
├── references/
│   ├── deployment.md                 ← Deploy flows (Git, CLI, preview, production)
│   ├── environment-variables.md      ← Env var management, secrets, per-environment config
│   ├── domains-ssl.md                ← Custom domains, DNS, SSL certificates
│   ├── cli.md                        ← Full Vercel CLI command reference
│   └── platform-features.md          ← Storage, caching, functions, integrations
```

## Routing

### Deployment
If the request involves deploying an app, Git integration, preview deployments, production deploys, rollbacks, CI/CD, or the deployment pipeline:
→ Read `references/deployment.md`

### Environment Variables
If the request involves setting env vars, the `NEXT_PUBLIC_` prefix, secrets management, per-environment configuration (development/preview/production), or pulling env vars locally:
→ Read `references/environment-variables.md`

### Domains & SSL
If the request involves custom domains, DNS configuration, SSL certificates, domain verification, or domain aliases:
→ Read `references/domains-ssl.md`

### CLI
If the request involves Vercel CLI commands (`vercel`, `vercel deploy`, `vercel env`, `vercel link`, `vercel pull`, `vercel dev`, `vercel logs`, etc.):
→ Read `references/cli.md`

### Platform Features
If the request involves Vercel-specific features like Serverless Functions, Edge Functions, Vercel Blob/KV/Postgres storage, caching (ISR, CDN), Web Application Firewall, Speed Insights, Analytics, or integrations:
→ Read `references/platform-features.md`

### Multiple Domains
Many requests touch multiple domains. For example, "deploy my Next.js + Stripe + Supabase app with a custom domain" requires **Deployment** + **Environment Variables** + **Domains & SSL**. Read all relevant files.

## Default Stack

- **Framework**: Next.js (App Router)
- **Deployment target**: Vercel
- **CLI**: `vercel` (latest)
- **Language**: TypeScript

## Key Principles

1. **Zero-config for Next.js.** Vercel auto-detects Next.js and configures builds, serverless functions, and routing automatically.
2. **Git push = deploy.** Connect a GitHub/GitLab/Bitbucket repo. Every push to `main` triggers a production deployment. Every PR gets a preview deployment.
3. **Environment variables must be set before deployment.** Env vars are baked into the build. If you add one after deploying, you must redeploy.
4. **`NEXT_PUBLIC_` prefix exposes to the browser.** Without this prefix, env vars are server-only. Never prefix secret keys with `NEXT_PUBLIC_`.
5. **Three environments:** Development, Preview, Production. Each can have different env var values.
6. **Preview deployments are free and automatic.** Every push to a non-production branch creates a preview with a unique URL.
7. **Rollbacks are instant.** You can roll back to any previous deployment via Dashboard or CLI.
8. **Edge Functions run globally.** Serverless Functions run in a single region by default.

## Quick Start

```bash
# Install CLI
npm i -g vercel

# Login
vercel login

# Link your project
vercel link

# Pull env vars for local dev
vercel env pull .env.local

# Deploy preview
vercel deploy

# Deploy to production
vercel --prod
```

## Environment Variables for a SaaS Stack

When deploying a Next.js + Supabase + Stripe app, set these in Vercel:

| Variable                                | Prefix?  | Description                          |
|-----------------------------------------|----------|--------------------------------------|
| `NEXT_PUBLIC_SUPABASE_URL`              | Yes      | Supabase project URL (client-safe)   |
| `NEXT_PUBLIC_SUPABASE_ANON_KEY`         | Yes      | Supabase anon key (client-safe)      |
| `SUPABASE_SERVICE_ROLE_KEY`             | No       | Supabase service role (server-only)  |
| `NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY`    | Yes      | Stripe publishable key (client-safe) |
| `STRIPE_SECRET_KEY`                     | No       | Stripe secret key (server-only)      |
| `STRIPE_WEBHOOK_SECRET`                 | No       | Stripe webhook signing secret        |

• SKILL.md 5 KB
• .claude-plugin/plugin.json 1 KB
• references/cli.md 5 KB
• references/deployment.md 4 KB
• references/domains-ssl.md 3 KB
• references/environment-variables.md 4 KB
• references/platform-features.md 7 KB