vercel-config-analyzer

Analyze Vercel project configurations — audit vercel.json, framework detection, build settings, edge functions, headers, redirects, rewrites, environment variables, and deployment performance. Use when asked to review, debug, or optimize a Vercel deployment.

Safety Notice

This listing is from the official public ClawHub registry. Review SKILL.md and referenced scripts before running.

Copy this and send it to your AI assistant to learn

Install skill "vercel-config-analyzer" with this command: npx skills add charlie-morrison/vercel-config-analyzer

Vercel Config Analyzer

Analyze Vercel project configurations for correctness, performance, and security. Examines vercel.json, framework settings, build configuration, edge functions, middleware, headers, redirects, environment variables, and deployment patterns. Finds misconfigurations before they cause production incidents.

Use when: "review our Vercel config", "why is our Vercel deployment slow", "check vercel.json", "optimize our edge functions", "fix Vercel build errors", "audit our headers and redirects", or when deploying a new project to Vercel.

Analysis Steps

1. Inventory Project Configuration

Locate and read all Vercel-relevant files:

  • vercel.json — primary configuration
  • Framework config: next.config.js, nuxt.config.ts, svelte.config.js, astro.config.mjs, etc.
  • package.json — build commands and framework detection
  • .env* files — check existence, not content
  • middleware.ts / middleware.js — edge middleware
  • api/ / pages/api/ / app/api/ — serverless and edge functions (search for export const runtime)

2. Analyze vercel.json

Check each section of vercel.json for correctness:

Build Configuration:

{
  "buildCommand": "npm run build",
  "outputDirectory": "dist",
  "installCommand": "npm ci",
  "framework": "nextjs"
}

Common issues:

  • buildCommand not matching package.json scripts
  • outputDirectory wrong for the framework (Next.js: .next, Vite: dist, CRA: build)
  • Missing framework field causing incorrect auto-detection
  • Using npm install instead of npm ci (non-deterministic builds)

Framework detection matrix:

FrameworkExpected Output DirAuto-DetectedBuild Command
Next.js.nextYesnext build
VitedistYesvite build
Create React AppbuildYesreact-scripts build
Nuxt.outputYesnuxt build
SvelteKit.svelte-kitYesvite build
AstrodistYesastro build
RemixbuildYesremix build
Plain HTMLpublic or .NoNone

3. Audit Headers Configuration

{
  "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": "Permissions-Policy", "value": "camera=(), microphone=(), geolocation=()" }
      ]
    }
  ]
}

Security headers checklist:

HeaderRequiredPurposeRecommended Value
Strict-Transport-SecurityCriticalForce HTTPSmax-age=63072000; includeSubDomains; preload
X-Content-Type-OptionsCriticalPrevent MIME sniffingnosniff
X-Frame-OptionsHighPrevent clickjackingDENY or SAMEORIGIN
Content-Security-PolicyHighPrevent XSS/injectionApplication-specific
Referrer-PolicyMediumControl referrer infostrict-origin-when-cross-origin
Permissions-PolicyMediumRestrict browser featuresDeny unused features
X-XSS-ProtectionLowLegacy XSS filter0 (or omit; CSP replaces this)

Cache strategy recommendations:

Resource TypeCache-ControlWhy
Hashed assets (JS/CSS)public, max-age=31536000, immutableContent-addressed, never changes
Images/fontspublic, max-age=86400, stale-while-revalidate=604800Changes rarely
HTML pagespublic, max-age=0, must-revalidateShould always check for updates
API responsesno-store or private, max-age=60Depends on data freshness needs
User-specific dataprivate, no-storeMust never be cached in shared caches

4. Analyze Redirects and Rewrites

Redirect issues to check:

  • Using permanent: true (301) for temporary moves — browsers cache 301s aggressively, very hard to undo
  • Redirect chains (A->B->C) — merge into A->C
  • Missing trailing slash consistency (/about vs /about/)
  • Manual HTTP->HTTPS redirect — Vercel handles this automatically

Rewrite issues to check:

  • External API rewrites without has conditions — creates an open proxy
  • SPA catch-all (/:path* -> /index.html) not placed LAST — overrides API routes
  • External rewrite targets not using HTTPS
  • Conflicting rewrites — first match wins, order matters

5. Evaluate Serverless and Edge Functions

Functions can be configured in vercel.json (per-file memory, maxDuration, runtime) or inline with export const runtime = 'edge' and export const maxDuration = 30.

Function optimization checklist:

  • Cold starts: Lazy-load heavy dependencies, reduce bundle size (1-5s savings)
  • Memory: Default 1024MB is overkill for simple handlers — set 128-256MB
  • Duration: Set explicit maxDuration for long operations (default: 10s Hobby / 60s Pro)
  • Runtime choice: Use edge for auth/geo/A/B tests, serverless for DB queries and file processing
  • Static generation: If an API route returns the same data for all users, use ISR instead

Edge vs Serverless decision matrix:

Use CaseRecommended RuntimeWhy
Authentication/authorizationEdgeLow latency, runs before page loads
Geolocation-based routingEdgeAccess to request.geo
A/B testingEdgeModify response before it reaches client
Feature flagsEdgeFast, runs at the edge
Database queriesServerless (Node.js)Most DB drivers need Node.js APIs
File processingServerless (Node.js)Needs Node.js fs/stream APIs
Heavy computationServerless (Node.js)Edge has CPU time limits
External API proxyEitherEdge if latency-sensitive

6. Check Environment Variables

Search code for process.env.* and client-exposed prefixes. Key audit checks:

  • API keys/DB URLs in client-exposed vars (Critical) — move to server-side, proxy through API route
  • Missing variables in production — verify all required vars in Vercel dashboard
  • Different values across environments — audit Preview vs Production values
  • Hardcoded secrets in code — move to environment variables immediately
  • Missing VERCEL_URL usage — use for dynamic base URL on preview deployments

Framework-specific variable exposure:

FrameworkClient-Exposed PrefixServer-Only
Next.jsNEXT_PUBLIC_*Everything else
ViteVITE_*Everything else
Create React AppREACT_APP_*Everything else
NuxtNUXT_PUBLIC_*NUXT_* (server)
SvelteKitPUBLIC_*Everything else
AstroPUBLIC_*Everything else

7. Analyze Build Performance

Common build time culprits and fixes:

CulpritTime CostFix
npm install30-120sUse npm ci, enable Vercel dependency cache
TypeScript compilation15-60sUse SWC (Next.js default), check tsconfig strictness
Static page generationVariesReduce build-time pages, use ISR for long-tail
Image optimization10-60sUse external image CDN
Linting/testing in build30-120sMove to CI (GitHub Actions), don't block deploy

Check build output size with du -sh .next/ dist/ build/ and analyze build-manifest.json for oversized pages.

8. Review Middleware

Middleware audit checklist:

  • Matcher excludes _next/static, _next/image, and favicon.ico
  • No database or heavy API calls (runs on EVERY request)
  • Error handling prevents middleware crash from taking down the site
  • Body under 1MB (edge runtime limit)
  • No Node.js-specific APIs (middleware runs on edge by default)
  • Cookies set with proper SameSite, Secure, and HttpOnly flags

9. Deployment Checklist

  • Production domain has correct DNS (CNAME to cname.vercel-dns.com)
  • Preview deployments are protected (password or Vercel Authentication)
  • Build caching enabled (40-60% faster repeated deploys)
  • Skew protection enabled for Next.js (prevents version mismatch during deploy)
  • Speed Insights or Web Analytics enabled for production

Output Format

# Vercel Configuration Analysis

## Project Overview
- **Framework:** {detected framework}
- **Runtime:** {Edge / Serverless / Static}
- **Build Command:** {command}
- **Output Directory:** {path}

## Findings

### Critical
- {Security or correctness issue that will cause production problems}

### Warnings
- {Performance or best-practice issue}

### Recommendations
- {Optimization opportunities}

## Security Headers
- {Present: list}
- {Missing: list with recommended values}

## Environment Variables
- {Count of server-only vars}
- {Count of client-exposed vars}
- {Any sensitive vars exposed to client}

## Performance
- {Build time analysis}
- {Bundle size concerns}
- {Caching recommendations}

## Suggested vercel.json
{Optimized configuration}

Tips

  • Always check if vercel.json settings conflict with framework config (e.g., next.config.js headers override vercel.json headers in Next.js)
  • Preview deployments use the preview environment — verify env vars are set for preview, not just production
  • Vercel's edge network caches static assets automatically — don't add redundant CDN layers
  • Use vercel env pull locally to sync environment variables for local development
  • For monorepos, set Root Directory in project settings and use ignoreCommand to skip unchanged projects
  • ISR pages re-generate on the first request after revalidate — the stale page is served while regenerating (stale-while-revalidate pattern)
  • Edge middleware adds ~1-5ms to every matched request — keep it lean
  • Use vercel build locally to test the exact build process Vercel will run
  • Check Vercel's function logs (vercel logs) for runtime errors that don't appear in build output
  • Protect preview URLs from search engine indexing with X-Robots-Tag: noindex header on non-production deployments

Source Transparency

This detail page is rendered from real SKILL.md content. Trust labels are metadata-based hints, not a safety guarantee.

Related Skills

Related by shared tags or category signals.

General

Supabase Complete Documentation

Complete Supabase platform documentation. Use when working with Supabase - covers authentication (email, OAuth, magic links, phone, SSO), database (PostgreSQL, RLS, migrations), storage (file uploads, CDN), edge functions, realtime subscriptions, AI/embeddings, cron jobs, queues, and platform management. Includes framework integrations (Next.js, React, SvelteKit, etc.).

Registry SourceRecently Updated
7.5K10Profile unavailable
Coding

Vercel Platform

Deploy applications and manage projects with complete CLI reference. Commands for deployments, projects, domains, environment variables, and live documentation access.

Registry SourceRecently Updated
10.1K23Profile unavailable
Automation

Ephemo: Instant Agentic Hosting

Publish files and folders to the web instantly. Static hosting for HTML sites and UI assets.

Registry SourceRecently Updated
1190Profile unavailable
General

update-docs

No summary provided by upstream source.

Repository SourceNeeds Review
2.2K-vercel