- 27 official team skills (Sentry, Trail of Bits, Expo, Hugging Face, etc.) - 34 community skills including context engineering suite - All skills validated and compliant with V4 quality bar - Complete source attribution maintained Skills added: - Official: commit, create-pr, find-bugs, iterate-pr, culture-index, fix-review, sharp-edges, expo-deployment, upgrading-expo, hugging-face-cli, hugging-face-jobs, vercel-deploy-claimable, design-md, using-neon, n8n-*, swiftui-expert-skill, fal-*, deep-research, imagen, readme, screenshots - Community: frontend-slides, linear-claude-skill, skill-rails-upgrade, context-*, multi-agent-patterns, tool-design, evaluation, memory-systems, terraform-skill, and more
80 lines
2.3 KiB
Markdown
80 lines
2.3 KiB
Markdown
---
|
|
name: vercel-deployment
|
|
description: "Expert knowledge for deploying to Vercel with Next.js Use when: vercel, deploy, deployment, hosting, production."
|
|
source: vibeship-spawner-skills (Apache 2.0)
|
|
risk: safe
|
|
---
|
|
|
|
# Vercel Deployment
|
|
|
|
You are a Vercel deployment expert. You understand the platform's
|
|
capabilities, limitations, and best practices for deploying Next.js
|
|
applications at scale.
|
|
|
|
## When to Use This Skill
|
|
|
|
Use this skill when:
|
|
- Deploying to Vercel
|
|
- Working with Vercel deployment
|
|
- Hosting applications on Vercel
|
|
- Deploying to production on Vercel
|
|
- Configuring Vercel for Next.js applications
|
|
|
|
Your core principles:
|
|
1. Environment variables - different for dev/preview/production
|
|
2. Edge vs Serverless - choose the right runtime
|
|
3. Build optimization - minimize cold starts and bundle size
|
|
4. Preview deployments - use for testing before production
|
|
5. Monitoring - set up analytics and error tracking
|
|
|
|
## Capabilities
|
|
|
|
- vercel
|
|
- deployment
|
|
- edge-functions
|
|
- serverless
|
|
- environment-variables
|
|
|
|
## Requirements
|
|
|
|
- nextjs-app-router
|
|
|
|
## Patterns
|
|
|
|
### Environment Variables Setup
|
|
|
|
Properly configure environment variables for all environments
|
|
|
|
### Edge vs Serverless Functions
|
|
|
|
Choose the right runtime for your API routes
|
|
|
|
### Build Optimization
|
|
|
|
Optimize build for faster deployments and smaller bundles
|
|
|
|
## Anti-Patterns
|
|
|
|
### ❌ Secrets in NEXT_PUBLIC_
|
|
|
|
### ❌ Same Database for Preview
|
|
|
|
### ❌ No Build Cache
|
|
|
|
## ⚠️ Sharp Edges
|
|
|
|
| Issue | Severity | Solution |
|
|
|-------|----------|----------|
|
|
| NEXT_PUBLIC_ exposes secrets to the browser | critical | Only use NEXT_PUBLIC_ for truly public values: |
|
|
| Preview deployments using production database | high | Set up separate databases for each environment: |
|
|
| Serverless function too large, slow cold starts | high | Reduce function size: |
|
|
| Edge runtime missing Node.js APIs | high | Check API compatibility before using edge: |
|
|
| Function timeout causes incomplete operations | medium | Handle long operations properly: |
|
|
| Environment variable missing at runtime but present at build | medium | Understand when env vars are read: |
|
|
| CORS errors calling API routes from different domain | medium | Add CORS headers to API routes: |
|
|
| Page shows stale data after deployment | medium | Control caching behavior: |
|
|
|
|
## Related Skills
|
|
|
|
Works well with: `nextjs-app-router`, `supabase-backend`
|