From vercel-pack
Creates and deploys minimal Vercel project with static HTML page calling TypeScript serverless API route. Verifies CLI auth, structure, and pipeline via preview deploy and curl tests.
How this skill is triggered — by the user, by Claude, or both
Slash command
/vercel-pack:vercel-hello-worldThis skill is limited to the following tools:
The summary Claude sees in its skill listing — used to decide when to auto-load this skill
Deploy a minimal project to Vercel with a static page and a serverless API route. Confirms your CLI auth, project structure, and deployment pipeline work end to end.
Deploy a minimal project to Vercel with a static page and a serverless API route. Confirms your CLI auth, project structure, and deployment pipeline work end to end.
vercel-install-auth setupmkdir my-vercel-app && cd my-vercel-app
npm init -y
Create the static landing page:
<!-- public/index.html -->
<!DOCTYPE html>
<html>
<head><title>Hello Vercel</title></head>
<body>
<h1>Hello from Vercel</h1>
<p id="result">Loading...</p>
<script>
fetch('/api/hello')
.then(r => r.json())
.then(d => document.getElementById('result').textContent = d.message);
</script>
</body>
</html>
// api/hello.ts
import type { VercelRequest, VercelResponse } from '@vercel/node';
export default function handler(req: VercelRequest, res: VercelResponse) {
res.status(200).json({
message: 'Hello from Vercel Serverless Function!',
timestamp: new Date().toISOString(),
region: process.env.VERCEL_REGION || 'local',
});
}
Install the types:
npm install --save-dev @vercel/node typescript
{
"rewrites": [
{ "source": "/api/(.*)", "destination": "/api/$1" }
],
"headers": [
{
"source": "/api/(.*)",
"headers": [
{ "key": "Cache-Control", "value": "s-maxage=0, stale-while-revalidate" }
]
}
]
}
# Deploy to a preview URL (not production)
vercel
# Output:
# Vercel CLI 39.x.x
# 🔗 Linked to your-team/my-vercel-app
# 🔍 Inspect: https://vercel.com/your-team/my-vercel-app/xxx
# ✅ Preview: https://my-vercel-app-xxx.vercel.app
# Test static page
curl -s https://my-vercel-app-xxx.vercel.app/ | head -5
# Test API route
curl -s https://my-vercel-app-xxx.vercel.app/api/hello | jq .
# {
# "message": "Hello from Vercel Serverless Function!",
# "timestamp": "2026-03-22T12:00:00.000Z",
# "region": "iad1"
# }
# Deploy directly to production
vercel --prod
# Or promote the preview deployment
vercel promote https://my-vercel-app-xxx.vercel.app
These are available in every function at runtime:
| Variable | Value |
|---|---|
VERCEL | "1" — always set on Vercel |
VERCEL_ENV | "production", "preview", or "development" |
VERCEL_URL | Deployment URL (no protocol) |
VERCEL_REGION | Function region (e.g., iad1) |
VERCEL_GIT_COMMIT_SHA | Git commit hash |
VERCEL_GIT_COMMIT_MESSAGE | Git commit message |
/api/hello| Error | Cause | Solution |
|---|---|---|
404 NOT_FOUND on /api/hello | File not in api/ directory | Move file to project root api/ folder |
FUNCTION_INVOCATION_FAILED | Runtime error in handler | Check function logs: vercel logs <url> |
BUILD_FAILED | TypeScript compilation error | Run npx tsc --noEmit locally first |
NO_RESPONSE_FROM_FUNCTION | Handler didn't call res.send/json | Ensure all code paths return a response |
FUNCTION_PAYLOAD_TOO_LARGE | Response body > 4.5 MB | Paginate or stream the response |
Proceed to vercel-local-dev-loop for development workflow setup.
npx claudepluginhub jeremylongshore/claude-code-plugins-plus-skills --plugin vercel-packSets up Vercel local dev server with vercel dev, pulls env vars, enables hot reload, and tests serverless functions/APIs. For fast local iteration on Vercel projects.
Deploys projects to Vercel as preview deployments, linking the project with git integration. Handles team selection and detects project state.
Installs Vercel CLI via npm, authenticates, links projects, manages environment variables, and checks vercel.json/.vercelignore configs for deployment setup.