Agent skill

Vercel Deploy

This skill should be used when the user asks to "deploy to Vercel", "deploy frontend", "push to production", "deploy my app", "go live on Vercel", or mentions Vercel deployment workflows.

View SKILL.md on GitHub Repository
Stars 163
Forks 31

Install this agent skill to your Project

npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/other/other/vercel-deploy

SKILL.md

Deploy to Vercel

Overview

Vercel deployment automates frontend application deployment with zero-configuration builds, automatic SSL, and global CDN. This skill guides through production-ready Vercel deployments for modern web applications.

Prerequisites Check

Install Vercel CLI

bash
npm install -g vercel

Authentication

bash
vercel login

Verify Setup

bash
vercel --version
vercel whoami

Project Configuration

Vercel Configuration File

Create vercel.json in project root:

json
{
  "version": 2,
  "builds": [
    {
      "src": "package.json",
      "use": "@vercel/static-build",
      "config": {
        "distDir": "dist"
      }
    }
  ],
  "routes": [
    {
      "src": "/api/(.*)",
      "dest": "/api/$1"
    },
    {
      "src": "/(.*)",
      "dest": "/index.html"
    }
  ],
  "env": {
    "NODE_ENV": "production"
  },
  "build": {
    "env": {
      "VITE_API_URL": "@api_url"
    }
  }
}

Build Configuration

Ensure package.json has proper build scripts:

json
{
  "scripts": {
    "build": "vite build",
    "preview": "vite preview",
    "type-check": "tsc --noEmit"
  },
  "engines": {
    "node": ">=18.0.0"
  }
}

Deployment Workflows

Production Deployment

bash
# Deploy to production
vercel --prod

# Deploy with custom domain
vercel --prod --domain your-app.com

Preview Deployment

bash
# Deploy preview (staging)
vercel

# Deploy specific branch preview
vercel --target preview --git-branch staging

Environment-Specific Deployment

bash
# Deploy with environment
vercel --prod --env NODE_ENV=production --env API_URL=https://api.production.com

Environment Configuration

Environment Variables Setup

bash
# Add production environment variables
vercel env add VITE_API_URL production
vercel env add VITE_APP_NAME production
vercel env add DATABASE_URL production

# Add preview environment variables
vercel env add VITE_API_URL preview
vercel env add DATABASE_URL preview

# List all environment variables
vercel env ls

Local Environment Sync

bash
# Pull environment variables to local
vercel env pull .env.local

# Link project to Vercel
vercel link

Framework-Specific Configurations

React/Vite Applications

json
// vite.config.js
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  build: {
    outDir: 'dist',
    sourcemap: true,
    rollupOptions: {
      output: {
        manualChunks: {
          vendor: ['react', 'react-dom'],
          ui: ['@mui/material', '@emotion/react']
        }
      }
    }
  },
  optimizeDeps: {
    exclude: ['lucide-react']
  }
});

Next.js Applications

javascript
// next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    appDir: true
  },
  images: {
    domains: ['your-image-domain.com']
  },
  env: {
    CUSTOM_KEY: process.env.CUSTOM_KEY
  }
};

module.exports = nextConfig;

SvelteKit Applications

javascript
// svelte.config.js
import adapter from '@sveltejs/adapter-vercel';

export default {
  kit: {
    adapter: adapter({
      runtime: 'nodejs18.x'
    })
  }
};

Custom Domain Setup

Add Custom Domain

bash
# Add domain to Vercel project
vercel domains add your-domain.com

# Set domain as alias
vercel alias set your-deployment-url.vercel.app your-domain.com

DNS Configuration

Update DNS records with your domain provider:

Type: CNAME
Name: www
Value: cname.vercel-dns.com

Type: A
Name: @
Value: 76.76.19.61

Advanced Deployment Features

Edge Functions

typescript
// api/edge-function.ts
import { NextRequest } from 'next/server';

export const config = {
  runtime: 'edge'
};

export default function handler(req: NextRequest) {
  return new Response(
    JSON.stringify({
      message: 'Hello from Edge Function',
      timestamp: new Date().toISOString(),
      location: req.geo?.city || 'Unknown'
    }),
    {
      status: 200,
      headers: {
        'content-type': 'application/json',
        'cache-control': 'max-age=60'
      }
    }
  );
}

Serverless Functions

javascript
// api/serverless.js
export default function handler(req, res) {
  if (req.method === 'POST') {
    // Handle POST request
    const { data } = req.body;

    res.status(200).json({
      success: true,
      message: 'Data processed',
      data: data
    });
  } else {
    res.setHeader('Allow', ['POST']);
    res.status(405).end(`Method ${req.method} Not Allowed`);
  }
}

ISR (Incremental Static Regeneration)

typescript
// pages/products/[id].tsx
export async function getStaticProps({ params }) {
  const product = await fetchProduct(params.id);

  return {
    props: { product },
    revalidate: 60 // Regenerate page every 60 seconds
  };
}

export async function getStaticPaths() {
  const products = await fetchProducts();

  return {
    paths: products.map(p => ({ params: { id: p.id } })),
    fallback: 'blocking'
  };
}

CI/CD Integration

GitHub Actions Deployment

yaml
# .github/workflows/vercel-deployment.yml
name: Deploy to Vercel

on:
  push:
    branches: [main, staging]
  pull_request:
    branches: [main]

jobs:
  deploy:
    runs-on: ubuntu-latest

    steps:
    - uses: actions/checkout@v3

    - name: Setup Node.js
      uses: actions/setup-node@v3
      with:
        node-version: '18'
        cache: 'npm'

    - name: Install dependencies
      run: npm ci

    - name: Run tests
      run: npm test

    - name: Build application
      run: npm run build

    - name: Deploy to Vercel
      uses: amondnet/vercel-action@v25
      with:
        vercel-token: ${{ secrets.VERCEL_TOKEN }}
        vercel-org-id: ${{ secrets.VERCEL_ORG_ID }}
        vercel-project-id: ${{ secrets.VERCEL_PROJECT_ID }}
        vercel-args: '--prod'
      if: github.ref == 'refs/heads/main'

GitLab CI/CD

yaml
# .gitlab-ci.yml
stages:
  - test
  - build
  - deploy

variables:
  NODE_VERSION: "18"

test:
  stage: test
  image: node:$NODE_VERSION
  script:
    - npm ci
    - npm run test
    - npm run type-check

build:
  stage: build
  image: node:$NODE_VERSION
  script:
    - npm ci
    - npm run build
  artifacts:
    paths:
      - dist/

deploy_production:
  stage: deploy
  image: node:$NODE_VERSION
  script:
    - npm install -g vercel
    - vercel --token $VERCEL_TOKEN --prod --yes
  only:
    - main
  environment:
    name: production
    url: https://your-app.vercel.app

Monitoring and Analytics

Vercel Analytics Integration

typescript
// app/layout.tsx
import { Analytics } from '@vercel/analytics/react';

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>
        {children}
        <Analytics />
      </body>
    </html>
  );
}

Performance Monitoring

javascript
// lib/analytics.js
export function trackPageView(url) {
  if (typeof window !== 'undefined' && window.gtag) {
    window.gtag('config', 'GA_MEASUREMENT_ID', {
      page_location: url
    });
  }
}

export function trackEvent(action, category, label, value) {
  if (typeof window !== 'undefined' && window.gtag) {
    window.gtag('event', action, {
      event_category: category,
      event_label: label,
      value: value
    });
  }
}

Security Configuration

Security Headers

json
// vercel.json
{
  "headers": [
    {
      "source": "/(.*)",
      "headers": [
        {
          "key": "X-Content-Type-Options",
          "value": "nosniff"
        },
        {
          "key": "X-Frame-Options",
          "value": "DENY"
        },
        {
          "key": "X-XSS-Protection",
          "value": "1; mode=block"
        },
        {
          "key": "Referrer-Policy",
          "value": "strict-origin-when-cross-origin"
        },
        {
          "key": "Content-Security-Policy",
          "value": "default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline';"
        }
      ]
    }
  ]
}

Environment Security

bash
# Secure environment variable management
vercel env add SECRET_KEY production --sensitive
vercel env add API_KEY production --sensitive

# Use Vercel's built-in secrets
vercel secrets add my-secret-name "secret-value"

Troubleshooting Common Issues

Build Failures

bash
# Check build logs
vercel logs

# Local build debugging
vercel dev --debug

# Clear build cache
vercel --force

Domain Issues

bash
# Verify domain configuration
vercel domains inspect your-domain.com

# Check DNS propagation
nslookup your-domain.com

# Force SSL certificate renewal
vercel certs issue your-domain.com

Performance Issues

bash
# Analyze bundle size
npm install -g @vercel/ncc
ncc analyze dist/

# Check Core Web Vitals
vercel inspect https://your-app.vercel.app

Best Practices

Optimization Strategies

Code Splitting:

javascript
// Lazy load components
const LazyComponent = React.lazy(() => import('./LazyComponent'));

// Dynamic imports for large dependencies
const loadChartLibrary = () => import('chart.js');

Image Optimization:

typescript
// Next.js Image component
import Image from 'next/image';

<Image
  src="/hero-image.jpg"
  alt="Hero"
  width={800}
  height={600}
  priority
  placeholder="blur"
  blurDataURL="data:image/jpeg;base64,..."
/>

Caching Strategy:

json
{
  "headers": [
    {
      "source": "/static/(.*)",
      "headers": [
        {
          "key": "Cache-Control",
          "value": "public, max-age=31536000, immutable"
        }
      ]
    },
    {
      "source": "/api/(.*)",
      "headers": [
        {
          "key": "Cache-Control",
          "value": "s-maxage=60, stale-while-revalidate"
        }
      ]
    }
  ]
}

Deployment Checklist

Pre-Deployment:

  • All tests pass locally
  • Build completes without errors
  • Environment variables configured
  • Dependencies up to date
  • Security headers configured
  • Performance optimizations applied

Post-Deployment:

  • Deployment URL accessible
  • Custom domain working
  • SSL certificate valid
  • Analytics tracking functional
  • Error monitoring active
  • Performance metrics baseline established

Additional Resources

Reference Files

For detailed deployment configurations, consult:

  • references/framework-configs.md - Framework-specific Vercel configurations
  • references/performance-optimization.md - Performance optimization strategies
  • references/security-best-practices.md - Security configuration guidelines

Example Files

Working deployment examples in examples/:

  • examples/react-vite-config.js - Complete React+Vite Vercel setup
  • examples/nextjs-deployment.js - Next.js deployment configuration
  • examples/ci-cd-pipeline.yml - Complete CI/CD pipeline

Scripts

Deployment utility scripts in scripts/:

  • scripts/deploy-production.sh - Automated production deployment
  • scripts/setup-vercel-project.sh - Initial Vercel project setup
  • scripts/performance-check.sh - Post-deployment performance validation

Deploy modern web applications with confidence using Vercel's powerful platform and these production-ready configurations.

Recommended Agent Skills

Expand your agent's capabilities with these related and highly-rated skills.

majiayu000/claude-skill-registry

agent-ops-spec

Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.

163 31
Explore
majiayu000/claude-skill-registry

agent-ops-state

Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.

163 31
Explore
majiayu000/claude-skill-registry

agent-ops-spec

Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.

163 31
Explore
majiayu000/claude-skill-registry

agent-ops-testing

Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.

163 31
Explore
majiayu000/claude-skill-registry

agent-ops-testing

Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.

163 31
Explore
majiayu000/claude-skill-registry

agent-ops-state

Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.

163 31
Explore

Didn't find tool you were looking for?

Be as detailed as possible for better results