Deploy Vercel
johnku2011/boilerplates-with-ai-skills
A skill your agent uses when deploying or configuring this project on Vercel — env vars, build settings, serverless limits, and production checks for Next.js or Express.
Create a minimal working Vercel deployment with a serverless API route.
Install Vercel Hello World
$ npx skills add jeremylongshore/tons-of-skills-marketplace --skill vercel-hello-world -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install jeremylongshore/tons-of-skills-marketplace vercel-hello-world --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/jeremylongshore/tons-of-skills-marketplace.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/.curated/vercel-hello-world .claude/skills/vercel-hello-world && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "vercel-hello-world" agent skill from https://github.com/jeremylongshore/tons-of-skills-marketplace/tree/main/skills/.curated/vercel-hello-world into .claude/skills/vercel-hello-world/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "vercel-hello-world", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/jeremylongshore/tons-of-skills-marketplace/tree/main/skills/.curated/vercel-hello-worldType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add jeremylongshore/tons-of-skills-marketplace --skill vercel-hello-world -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install jeremylongshore/tons-of-skills-marketplace vercel-hello-world --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/jeremylongshore/tons-of-skills-marketplace.git skills-src && mkdir -p .agents/skills && cp -r skills-src/skills/.curated/vercel-hello-world .agents/skills/vercel-hello-world && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "vercel-hello-world" agent skill from https://github.com/jeremylongshore/tons-of-skills-marketplace/tree/main/skills/.curated/vercel-hello-world into .agents/skills/vercel-hello-world/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "vercel-hello-world", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add jeremylongshore/tons-of-skills-marketplace --skill vercel-hello-world -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install jeremylongshore/tons-of-skills-marketplace vercel-hello-world --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/jeremylongshore/tons-of-skills-marketplace.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/skills/.curated/vercel-hello-world .cursor/skills/vercel-hello-world && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "vercel-hello-world" agent skill from https://github.com/jeremylongshore/tons-of-skills-marketplace/tree/main/skills/.curated/vercel-hello-world into .cursor/skills/vercel-hello-world/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "vercel-hello-world", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/jeremylongshore/tons-of-skills-marketplace.git --path skills/.curated/vercel-hello-world--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add jeremylongshore/tons-of-skills-marketplace --skill vercel-hello-world -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install jeremylongshore/tons-of-skills-marketplace vercel-hello-world --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/jeremylongshore/tons-of-skills-marketplace.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/skills/.curated/vercel-hello-world .gemini/skills/vercel-hello-world && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "vercel-hello-world" agent skill from https://github.com/jeremylongshore/tons-of-skills-marketplace/tree/main/skills/.curated/vercel-hello-world into .gemini/skills/vercel-hello-world/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "vercel-hello-world", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install jeremylongshore/tons-of-skills-marketplace vercel-hello-worldInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add jeremylongshore/tons-of-skills-marketplace --skill vercel-hello-world -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/jeremylongshore/tons-of-skills-marketplace.git skills-src && mkdir -p .github/skills && cp -r skills-src/skills/.curated/vercel-hello-world .github/skills/vercel-hello-world && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "vercel-hello-world" agent skill from https://github.com/jeremylongshore/tons-of-skills-marketplace/tree/main/skills/.curated/vercel-hello-world into .github/skills/vercel-hello-world/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "vercel-hello-world", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add jeremylongshore/tons-of-skills-marketplace --skill vercel-hello-world -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install jeremylongshore/tons-of-skills-marketplace vercel-hello-world --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/jeremylongshore/tons-of-skills-marketplace.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/skills/.curated/vercel-hello-world .opencode/skills/vercel-hello-world && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "vercel-hello-world" agent skill from https://github.com/jeremylongshore/tons-of-skills-marketplace/tree/main/skills/.curated/vercel-hello-world into .opencode/skills/vercel-hello-world/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "vercel-hello-world", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
- Skill name
vercel-hello-world- GitHub stars
- 2.8k
- Token cost
- ~1.3k tokens
- SKILL.md length
- 312 words
- Files
- 1
- Skills in repo
- 3,342
- Repo updated
- First seen
- Licence
- MIT
At a glance
Create a minimal working Vercel deployment with a serverless API route.
- Works in 6 steps: Create Project Structure → Create Serverless API Route → Add vercel.json Configuration → …
- Starting a new Vercel project
- SKILL.md covers Overview, Prerequisites, Instructions and Vercel System Environment…, plus 5 more sections
- Calls vercel, npm and curl; reaches vercel.com
What it does
Vercel Hello World is an agent skill from jeremylongshore/tons-of-skills-marketplace. Create a minimal working Vercel deployment with a serverless API route. Use when starting a new Vercel project, testing your setup, or learning basic Vercel deployment and API route patterns. Trigger with phrases like "vercel hello world", "vercel example", "vercel quick start", "simple vercel project", "first vercel deploy".
Its SKILL.md is about 1.3k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts. Compatibility notes: Designed for Claude Code
It sits in Backend & APIs, covering Serverless and Deployment. It works with Vercel. The repository describes itself as: Model-agnostic agent-skills platform with a harness-free canonical layer, verified adapters, and the ccpi package manager. Explore at tonsofskills.com. The licence is MIT.
When your agent uses it
- Starting a new Vercel project
- Testing your setup
- Learning basic Vercel deployment and API route patterns
- With phrases like vercel hello world
Example prompts
- “vercel hello world”
- “vercel example”
- “vercel quick start”
- “/vercel-hello-world”
Requirements
- Node.js
- Compatibility (from SKILL.md): Designed for Claude Code
- Pre-approved tools (allowed-tools): Read, Write, Edit, Bash(vercel:*), Bash(npm:*), Bash(npx:*), Bash(curl:*)
Workflow steps
6 steps, taken from the step headings in SKILL.md.
What it can do on your machine
Read from SKILL.md and the folder at commit cfae287. It shows what the files ask for, not the result of running them.
Tool permissions
Pre-approves these tools, so the agent can use them without asking each time:
ReadWriteEditBash(vercel:*)Bash(npm:*)Bash(npx:*)Bash(curl:*)
From allowed-tools in the SKILL.md frontmatter.
Runs code
Shell commands in SKILL.md call:
vercelnpmcurljqnpx
From the folder's file list and the shell code blocks in SKILL.md.
Network
Hosts in commands or code, which the agent is likely to contact:
vercel.com
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Compatibility
Designed for Claude Code
From compatibility in the SKILL.md frontmatter.
Context cost
Vercel Hello World loads about 1.3k tokens when it runs. Until then it costs about 87 tokens; SKILL.md has 312 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
Safety
Auto-check passed
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.
SKILL.md
The full file from jeremylongshore/tons-of-skills-marketplace at commit cfae287, republished under its MIT licence (© jeremylongshore). 312 words, ~1,284 tokens.
Download SKILL.mdSave it as
.claude/skills/vercel-hello-world/SKILL.md (or your agent's skills folder).- name
- vercel-hello-world
- description
- Create a minimal working Vercel deployment with a serverless API route. Use when starting a new Vercel project, testing your setup, or learning basic Vercel deployment and API route patterns. Trigger with phrases like "vercel hello world", "vercel example", "vercel quick start", "simple vercel project", "first vercel deploy".
- allowed-tools
- Read, Write, Edit, Bash(vercel:*), Bash(npm:*), Bash(npx:*), Bash(curl:*)
- compatibility
- Designed for Claude Code
- version
- 1.18.0
- license
- MIT
- author
- Jeremy Longshore <jeremy@intentsolutions.io>
- tags
- saas, vercel, api, quickstart, deployment
Vercel Hello World
Overview
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.
Prerequisites
- Completed
vercel-install-authsetup - Vercel CLI installed and authenticated
- Node.js 18+
Instructions
Step 1: Create Project Structure
mkdir my-vercel-app && cd my-vercel-app
npm init -yCreate 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>Step 2: Create Serverless API Route
// 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 typescriptStep 3: Add vercel.json Configuration
{
"rewrites": [
{ "source": "/api/(.*)", "destination": "/api/$1" }
],
"headers": [
{
"source": "/api/(.*)",
"headers": [
{ "key": "Cache-Control", "value": "s-maxage=0, stale-while-revalidate" }
]
}
]
}Step 4: Deploy Preview
# 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.appStep 5: Test the Deployment
# 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"
# }Step 6: Promote to Production
# Deploy directly to production
vercel --prod
# Or promote the preview deployment
vercel promote https://my-vercel-app-xxx.vercel.appVercel System Environment Variables
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 |
Output
- Static page served from Vercel CDN
- Serverless API route returning JSON at
/api/hello - Preview URL for testing before production
- Production deployment live on your domain
Error Handling
| 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 |
Examples
Deploy a harmless preview before connecting a domain
Create a minimal route that returns a static health response and deploy it with vercel --yes from a feature branch. Test the generated preview URL, verify the commit SHA in the deployment metadata, and keep environment variables absent unless the example requires them. Only after the preview is healthy should a reviewer approve the production workflow; do not point a customer domain at an unreviewed hello-world deployment.
Resources
Next Steps
Proceed to vercel-local-dev-loop for development workflow setup.
© jeremylongshore, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Files
Just SKILL.md in skills/.curated/vercel-hello-world of jeremylongshore/tons-of-skills-marketplace.
Open the folder on GitHubat commit cfae287
Compare with similar skills
Vercel Hello World next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Vercel Hello World this skilljeremylongshore/tons-of-skills-marketplace | 2.8k | — | ~1.3k | Automated safety check: Pass | MIT | |
| Deploy Verceljohnku2011/boilerplates-with-ai-skills | 240 | — | ~660 | Automated safety check: Notes | MIT | |
| Vercel Deploymentdavila7/claude-code-templates | 33k | 5 repos | ~534 | Automated safety check: Pass | MIT | |
| Frontmcp Deploymentagentfront/frontmcp | 146 | — | ~9.2k | Automated safety check: Notes | Apache-2.0 | |
| Deploy Fullstack Vercelvellum-ai/vellum-assistant | 1.4k | — | ~2.8k | Automated safety check: Pass | MIT | |
| Vercelhoodini/ai-agents-skills | 282 | — | ~1.1k | Automated safety check: Notes | None |
Similar skills
Vercel Deployment
davila7/claude-code-templates
Expert knowledge for deploying to Vercel with Next.js Use when: vercel, deploy, deployment, hosting, production.
Frontmcp Deployment
agentfront/frontmcp
A skill your agent uses when deploying, building for production, packaging, or shipping a FrontMCP server.
Deploy Fullstack Vercel
vellum-ai/vellum-assistant
Build and deploy a full-stack app (React frontend + Python/FastAPI backend) or a Vellum app to Vercel as a serverless demo with seeded data
Vercel
hoodini/ai-agents-skills
Deploy and configure applications on Vercel. An agent skill from hoodini/ai-agents-skills.
Deploying Applications
ancoleman/ai-design-components
Deployment patterns from Kubernetes to serverless and edge functions.
More from jeremylongshore/tons-of-skills-marketplace
All 3,342 skills in this repoPerforming Security Code Review
jeremylongshore/tons-of-skills-marketplace
Execute this skill enables AI assistant to conduct a security-focused code review using the security-agent plugin.
Adapting Transfer Learning Models
jeremylongshore/tons-of-skills-marketplace
Build this skill automates the adaptation of pre-trained machine learning models using transfer learning techniques.
Agent Context Loader
jeremylongshore/tons-of-skills-marketplace
Execute proactive auto-loading: automatically detects and loads agents.md files.
Aggregating Performance Metrics
jeremylongshore/tons-of-skills-marketplace
Aggregate and centralize performance metrics from applications, systems, databases, caches, and services.
Analyzing Capacity Planning
jeremylongshore/tons-of-skills-marketplace
Execute this skill enables AI assistant to analyze capacity requirements and plan for future growth.
Analyzing Database Indexes
jeremylongshore/tons-of-skills-marketplace
Process use when you need to work with database indexing. An agent skill from jeremylongshore/tons-of-skills-marketplace.
Related
Works with
Categories
Questions about Vercel Hello World
What does Vercel Hello World do?
Create a minimal working Vercel deployment with a serverless API route. Vercel Hello World is an agent skill from jeremylongshore/tons-of-skills-marketplace. Create a minimal working Vercel deployment with a serverless API route.
When should I use Vercel Hello World?
Vercel Hello World fits situations like: starting a new Vercel project; testing your setup; learning basic Vercel deployment and API route patterns; with phrases like vercel hello world.
How do I install Vercel Hello World in Claude Code?
Run `npx skills add jeremylongshore/tons-of-skills-marketplace --skill vercel-hello-world -a claude-code`. Or copy the skill folder (skills/.curated/vercel-hello-world in jeremylongshore/tons-of-skills-marketplace) into .claude/skills/vercel-hello-world in your project. Claude Code loads it when a task matches its description.
How do I install Vercel Hello World in Codex?
Run `npx skills add jeremylongshore/tons-of-skills-marketplace --skill vercel-hello-world -a codex`. Or copy the skill folder (skills/.curated/vercel-hello-world in jeremylongshore/tons-of-skills-marketplace) into .agents/skills/vercel-hello-world in your project. Codex loads it when a task matches its description.
Can I use Vercel Hello World in Cursor, Gemini CLI or GitHub Copilot?
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add jeremylongshore/tons-of-skills-marketplace --skill vercel-hello-world -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/vercel-hello-world, .gemini/skills/vercel-hello-world, .github/skills/vercel-hello-world and .opencode/skills/vercel-hello-world in your project.
What does Vercel Hello World need to run?
Going by SKILL.md and its folder, Vercel Hello World needs the command-line tools its instructions call (vercel, npm, curl, jq and npx). Our summary lists: Node.js. Its frontmatter pre-approves these tools: Read, Write, Edit, Bash(vercel:*), Bash(npm:*), Bash(npx:*), Bash(curl:*). Compatibility (from SKILL.md): Designed for Claude Code.
Does Vercel Hello World access the network?
SKILL.md names 1 domain. In commands or code: vercel.com; the agent is likely to contact it when it follows the instructions. This is read from the text; nothing was executed.
Is Vercel Hello World safe to install?
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.
What licence does Vercel Hello World use?
Vercel Hello World is published under the MIT licence (declared in SKILL.md). It allows redistribution, so the full SKILL.md is shown on this page.
How many tokens does Vercel Hello World use?
About 1.3k tokens (SKILL.md is roughly 5.1k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.
What are the alternatives to Vercel Hello World?
Skills that share tags, products or a category with Vercel Hello World: Deploy Vercel (johnku2011/boilerplates-with-ai-skills, 240 stars), Vercel Deployment (davila7/claude-code-templates, 33k stars), Frontmcp Deployment (agentfront/frontmcp, 146 stars) and Deploy Fullstack Vercel (vellum-ai/vellum-assistant, 1.4k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Vercel Hello World?
jeremylongshore (a GitHub user) maintains it in jeremylongshore/tons-of-skills-marketplace, which has 2,827 GitHub stars. The repository holds 3,342 skills in this directory. The repository was last updated on October 10, 2026.
Source: jeremylongshore/tons-of-skills-marketplace on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.