claude/skills/deploy-to-vercel/SKILL.md
Deploy applications and websites to Vercel. Use when the user requests deployment actions like "deploy my app", "deploy and give me the link", "push this live", or "create a preview deployment".
npx skillsauth add skanehira/dotfiles deploy-to-vercelInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
Deploy any project to Vercel. Always deploy as preview (not production) unless the user explicitly asks for production.
The goal is to get the user into the best long-term setup: their project linked to Vercel with git-push deploys. Every method below tries to move the user closer to that state.
Run all four checks before deciding which method to use:
# 1. Check for a git remote
git remote get-url origin 2>/dev/null
# 2. Check if locally linked to a Vercel project (either file means linked)
cat .vercel/project.json 2>/dev/null || cat .vercel/repo.json 2>/dev/null
# 3. Check if the Vercel CLI is installed and authenticated
vercel whoami 2>/dev/null
# 4. List available teams (if authenticated)
vercel teams list --format json 2>/dev/null
If the user belongs to multiple teams, present all available team slugs as a bulleted list and ask which one to deploy to. Once the user picks a team, proceed immediately to the next step — do not ask for additional confirmation.
Pass the team slug via --scope on all subsequent CLI commands (vercel deploy, vercel link, vercel inspect, etc.):
vercel deploy [path] -y --no-wait --scope <team-slug>
If the project is already linked (.vercel/project.json or .vercel/repo.json exists), the orgId in those files determines the team — no need to ask again. If there is only one team (or just a personal account), skip the prompt and use it directly.
About the .vercel/ directory: A linked project has either:
.vercel/project.json — created by vercel link (single project linking). Contains projectId and orgId..vercel/repo.json — created by vercel link --repo (repo-based linking). Contains orgId, remoteName, and a projects array mapping directories to Vercel project IDs.Either file means the project is linked. Check for both.
Do NOT use vercel project inspect, vercel ls, or vercel link to detect state in an unlinked directory — without a .vercel/ config, they will interactively prompt (or with --yes, silently link as a side-effect). Only vercel whoami is safe to run anywhere.
.vercel/ exists) + has git remote → Git PushThis is the ideal state. The project is linked and has git integration.
Ask the user before pushing. Never push without explicit approval:
This project is connected to Vercel via git. I can commit and push to
trigger a deployment. Want me to proceed?
Commit and push:
git add .
git commit -m "deploy: <description of changes>"
git push
Vercel automatically builds from the push. Non-production branches get preview deployments; the production branch (usually main) gets a production deployment.
Retrieve the preview URL. If the CLI is authenticated:
sleep 5
vercel ls --format json
The JSON output has a deployments array. Find the latest entry — its url field is the preview URL.
If the CLI is not authenticated, tell the user to check the Vercel dashboard or the commit status checks on their git provider for the preview URL.
.vercel/ exists) + no git remote → vercel deployThe project is linked but there's no git repo. Deploy directly with the CLI.
vercel deploy [path] -y --no-wait
Use --no-wait so the CLI returns immediately with the deployment URL instead of blocking until the build finishes (builds can take a while). Then check on the deployment status with:
vercel inspect <deployment-url>
For production deploys (only if user explicitly asks):
vercel deploy [path] --prod -y --no-wait
The CLI is working but the project isn't linked yet. This is the opportunity to get the user into the best state.
Ask the user which team to deploy to. Present the team slugs from Step 1 as a bulleted list. If there's only one team (or just a personal account), skip this step.
Once a team is selected, proceed directly to linking. Tell the user what will happen but do not ask for separate confirmation:
Linking this project to <team name> on Vercel. This will create a Vercel
project to deploy to and enable automatic deployments on future git pushes.
If a git remote exists, use repo-based linking with the selected team scope:
vercel link --repo --scope <team-slug>
This reads the git remote URL and matches it to existing Vercel projects that deploy from that repo. It creates .vercel/repo.json. This is much more reliable than vercel link (without --repo), which tries to match by directory name and often fails when the local folder and Vercel project are named differently.
If there is no git remote, fall back to standard linking:
vercel link --scope <team-slug>
This prompts the user to select or create a project. It creates .vercel/project.json.
Then deploy using the best available method:
vercel deploy [path] -y --no-wait --scope <team-slug>, then vercel inspect <url> to check statusThe Vercel CLI isn't set up at all.
Install the CLI (if not already installed):
npm install -g vercel
Authenticate:
vercel login
The user completes auth in their browser. If running in a non-interactive environment where login is not possible, skip to the no-auth fallback below.
Ask which team to deploy to — present team slugs from vercel teams list --format json as a bulleted list. If only one team / personal account, skip. Once selected, proceed immediately.
Link the project with the selected team scope (use --repo if a git remote exists, plain vercel link otherwise):
vercel link --repo --scope <team-slug> # if git remote exists
vercel link --scope <team-slug> # if no git remote
Deploy using the best available method (git push if remote exists, otherwise vercel deploy -y --no-wait --scope <team-slug>, then vercel inspect <url> to check status).
When to use: Last resort when the CLI can't be installed or authenticated in the claude.ai sandbox. This requires no authentication — it returns a Preview URL (live site) and a Claim URL (transfer to your Vercel account).
bash /mnt/skills/user/deploy-to-vercel/resources/deploy.sh [path]
Arguments:
path - Directory to deploy, or a .tgz file (defaults to current directory)Examples:
# Deploy current directory
bash /mnt/skills/user/deploy-to-vercel/resources/deploy.sh
# Deploy specific project
bash /mnt/skills/user/deploy-to-vercel/resources/deploy.sh /path/to/project
# Deploy existing tarball
bash /mnt/skills/user/deploy-to-vercel/resources/deploy.sh /path/to/project.tgz
The script auto-detects the framework from package.json, packages the project (excluding node_modules, .git, .env), uploads it, and waits for the build to complete.
Tell the user: "Your deployment is ready at [previewUrl]. Claim it at [claimUrl] to manage your deployment."
When to use: In the Codex sandbox where the CLI may not be authenticated. Codex runs in a sandboxed environment by default — try the CLI first, and fall back to the deploy script if auth fails.
Check whether the Vercel CLI is installed (no escalation needed for this check):
command -v vercel
If vercel is installed, try deploying with the CLI:
vercel deploy [path] -y --no-wait
If vercel is not installed, or the CLI fails with "No existing credentials found", use the fallback script:
skill_dir="<path-to-skill>"
# Deploy current directory
bash "$skill_dir/resources/deploy-codex.sh"
# Deploy specific project
bash "$skill_dir/resources/deploy-codex.sh" /path/to/project
# Deploy existing tarball
bash "$skill_dir/resources/deploy-codex.sh" /path/to/project.tgz
The script handles framework detection, packaging, and deployment. It waits for the build to complete and returns JSON with previewUrl and claimUrl.
Tell the user: "Your deployment is ready at [previewUrl]. Claim it at [claimUrl] to manage your deployment."
Escalated network access: Only escalate the actual deploy command if sandboxing blocks the network call (sandbox_permissions=require_escalated). Do not escalate the command -v vercel check.
You have full shell access. Do NOT use the /mnt/skills/ path. Follow the decision flow above using the CLI directly.
For the no-auth fallback, run the deploy script from the skill's installed location:
bash ~/.claude/skills/deploy-to-vercel/resources/deploy.sh [path]
The path may vary depending on where the user installed the skill.
You likely cannot run vercel login or git push. Go directly to the no-auth fallback — claude.ai sandbox.
Codex runs in a sandbox. Check if the CLI is available first, then fall back to the deploy script. Go to the no-auth fallback — Codex sandbox.
Always show the user the deployment URL.
vercel ls --format json to find the preview URL. If the CLI isn't authenticated, tell the user to check the Vercel dashboard or commit status checks.vercel deploy --no-wait. Use vercel inspect <url> to check build status and report it to the user.Deployment successful!
Preview URL: https://my-app-abc123.vercel.app
Claim URL: https://vercel.com/claim-deployment?code=...
View your site at the Preview URL.
To transfer this deployment to your Vercel account, visit the Claim URL.
Do not curl or fetch the deployed URL to verify it works. Just return the link.
If deployment fails due to network restrictions on claude.ai, tell the user:
Deployment failed due to network restrictions. To fix this:
1. Go to https://claude.ai/settings/capabilities
2. Add *.vercel.com to the allowed domains
3. Try deploying again
If deployment fails due to network issues (timeouts, DNS errors, connection resets) in a sandboxed environment, rerun with escalated permissions (sandbox_permissions=require_escalated). Do not escalate the initial CLI availability check — only escalate the actual deploy command.
Example guidance to the user:
The deploy needs escalated network access to deploy to Vercel. I can rerun
the command with escalated permissions — want me to proceed?
If vercel login or vercel deploy fails with authentication errors, fall back to the no-auth deploy script (claude.ai or Codex variant, depending on the environment).
tools
ローカルのコミット履歴と差分からDraft PRを作成する。ブランチ未作成・コミット未作成の状態でも、必要に応じてブランチ作成とコミットを行ってからPRを作成する。`.github/` にPRテンプレートがあれば内容を埋めて、なければ作業内容から本文を生成し、`AskUserQuestion`で作成可否を確認してから `gh pr create --draft` を実行する。「PRを出したい」「draft PRを作成」「プルリクを作って」「PR本文を生成」などのリクエストで起動。
tools
複数サブエージェントに異なる立場を与えて議論を反復し、相違が収束するまで議題を検証して結論を提示する。設計妥当性検証・実装方針比較・原因分析のセカンドオピニオン・アイデアの壁打ちに使用。「議論したい」「壁打ちしたい」「セカンドオピニオン」「複数視点で検証したい」などで起動。
tools
変更内容を分析し、Conventional Commit形式でコミットする (pushはユーザが手動)
development
React 19 + Vite+ (`vp`) + TypeScript + Tailwind CSS v4 + React Router v7 (HashRouter) でモバイル向け静的SPAデモサイトをTDDで構築し、Cloudflare Workers (Static Assets) へ自動デプロイするまでの標準ワークフローを提供する。テンプレートリポジトリ `skanehira/demo-site-template` を `gh repo create --template` で clone することで scaffold を省略する。`localStorage` でフロントエンドのみ完結する"フロントのみ完結デモ"に特化。デザインコンセプトの確立には `frontend-design` スキルを呼び出して連携する。起動トリガー:「デモサイトを作りたい」「モバイル向け静的デモ」「SPAを作ってCloudflareにデプロイ」「静的プロトタイプを公開」「localStorage でフロントだけ完結」。ユースケース:(1)クライアント提案用のUI/UXたたき台、(2)新機能のプロトタイプ、(3)モバイル向けランディング。ツールチェーンは Vite+ (`vp`) で統合(内部 PM は pnpm)。