Communitygithub.com

PhuongDeveloper/landingpage

將應用程式和網站部署到 Vercel。當使用者請求部署動作時使用，例如「部署我的應用程式」、「部署並給我連結」、「將此內容上線」或「建立預覽部署」。

landingpage 是什麼？

此技能提供了一套完整的流程，能將任何專案部署到 Vercel，並優先引導使用者建立最佳的長期開發設置：將專案連結至 Vercel 並啟用 Git 推送部署。支援多種代理環境，包括 Claude Code（終端機）、claude.ai（沙箱）和 Codex（沙箱），並根據專案狀態（是否已連結、是否存在 Git 遠端、CLI 是否已驗證）自動選擇最合適的部署方法。核心邏輯會先執行四個檢查命令以評估專案狀態，然後根據結果選擇 Git 推送、`vercel deploy` CLI 指令，或無需驗證的備用腳本。此外，技能還處理了團隊選擇、`--scope` 參數傳遞、`.vercel/` 目錄檢測，以及網路限制或 CLI 驗證失敗時的降級策略，確保在各種限制環境下都能成功部署。

相容平台✓Claude Code✓Codex CLI~Cursor
npx skills add https://github.com/PhuongDeveloper/landingpage/tree/HEAD/.agents/skills/deploy-to-vercel
查看原文→瀏覽所有技能

在你喜歡的 AI 中提問

開啟一個已預先載入此 Agent Skill 的新對話。

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

說明文件

部署到 Vercel

將任何專案部署到 Vercel。除非使用者明確要求，否則一律部署為預覽版（非生產環境）。

目標是讓使用者進入最佳的長期設置：他們的專案連結到 Vercel，並啟用 git 推送部署。以下每種方法都試圖讓使用者更接近該狀態。

步驟 1：收集專案狀態

在決定使用哪種方法之前，請執行所有四項檢查：

# 1. 檢查 git 遠端
使用 git remote get-url origin 2>/dev/null

# 2. 檢查是否已連結到本機的 Vercel 專案（任一檔案表示已連結）
使用 cat .vercel/project.json 2>/dev/null || cat .vercel/repo.json 2>/dev/null

# 3. 檢查 Vercel CLI 是否已安裝並通過驗證
使用 vercel whoami 2>/dev/null

# 4. 列出可用的團隊（如果已驗證）
使用 vercel teams list --format json 2>/dev/null

團隊選擇

如果使用者屬於多個團隊，請以項目符號清單呈現所有可用的團隊別名，並詢問要部署到哪個團隊。一旦使用者選擇了團隊，請立即進行下一步 — 不要要求額外的確認。

在所有後續的 CLI 指令（vercel deploy、vercel link、vercel inspect 等）中，透過 --scope 傳遞團隊別名：

vercel deploy [path] -y --no-wait --scope <team-slug>

如果專案已連結（.vercel/project.json 或 .vercel/repo.json 存在），則這些檔案中的 orgId 決定了團隊 — 無需再次詢問。如果只有一個團隊（或僅有個人帳戶），請跳過提示並直接使用它。

關於 .vercel/ 目錄： 已連結的專案具有以下任一檔案：

  • .vercel/project.json — 由 vercel link 建立（單一專案連結）。包含 projectId 和 orgId。
  • .vercel/repo.json — 由 vercel link --repo 建立（基於儲存庫的連結）。包含 orgId、remoteName 以及一個將目錄對應到 Vercel 專案 ID 的 projects 陣列。

任一檔案都表示專案已連結。請檢查兩者。

請勿在未連結的目錄中使用 vercel project inspect、vercel ls 或 vercel link 來檢測狀態 — 如果沒有 .vercel/ 配置，它們會互動式地提示（或使用 --yes 時，會默默地產生連結作為副作用）。只有 vercel whoami 可以在任何地方安全執行。

步驟 2：選擇部署方法

已連結（.vercel/ 存在）+ 具有 Git 遠端 → Git 推送

這是最理想的狀態。專案已連結並具有 Git 整合。

  1. 在推送之前詢問使用者。 未經明確批准，絕不推送：

    此專案已透過 Git 連線到 Vercel。我可以提交並推送以觸發部署。要繼續嗎？

  2. 提交並推送：

    git add .
git commit -m "deploy: <變更說明>"
git push

    Vercel 會根據推送自動建置。非生產分支會獲得預覽部署；生產分支（通常是 main）會獲得生產部署。

  3. 取得預覽 URL。 如果 CLI 已驗證：

    sleep 5
vercel ls --format json

    JSON 輸出包含一個 deployments 陣列。找到最新的條目 — 其 url 欄位即為預覽 URL。

    如果 CLI 未驗證，請告知使用者在 Vercel 控制台或 Git 提供者的提交狀態檢查中查看預覽 URL。

已連結（.vercel/ 存在）+ 沒有 Git 遠端 → vercel deploy

專案已連結但沒有 Git 儲存庫。直接使用 CLI 進行部署。

vercel deploy [path] -y --no-wait

使用 --no-wait 讓 CLI 立即返回部署 URL，而不是等待建置完成（建置可能需要一些時間）。然後使用以下指令檢查部署狀態：

vercel inspect <deployment-url>

對於生產部署（僅當使用者明確要求時）：

vercel deploy [path] --prod -y --no-wait

未連結 + CLI 已驗證 → 先連結，再部署

CLI 正常運作但專案尚未連結。這是讓使用者進入最佳狀態的機會。

  1. 詢問使用者要部署到哪個團隊。 以項目符號清單呈現步驟 1 中的團隊別名。如果只有一個團隊（或僅有個人帳戶），請跳過此步驟。

  2. 一旦選擇了團隊，直接進行連結。 告知使用者將要發生的事情，但不要要求單獨確認：

    正在將此專案連結到 Vercel 上的 <團隊名稱>。這將建立一個 Vercel 專案以供部署，並在將來的 Git 推送時啟用自動部署。

  3. 如果存在 Git 遠端，則使用所選團隊範圍進行基於儲存庫的連結：

    vercel link --repo --scope <team-slug>

    這會讀取 Git 遠端 URL 並將其與從該儲存庫部署的現有 Vercel 專案進行比對。它會建立 .vercel/repo.json。這比 vercel link（不帶 --repo）可靠得多，後者嘗試按目錄名稱進行比對，並且當本地資料夾和 Vercel 專案名稱不同時經常失敗。

    如果沒有 Git 遠端，則回退到標準連結：

    vercel link --scope <team-slug>

    這會提示使用者選擇或建立一個專案。它會建立 .vercel/project.json。

  4. 然後使用最佳可用方法進行部署：

    • 如果存在 Git 遠端 → 提交並推送（請參閱上面的 git 推送方法）
    • 如果沒有 Git 遠端 → vercel deploy [path] -y --no-wait --scope <team-slug>，然後 vercel inspect <url> 以檢查狀態

未連結 + CLI 未驗證 → 安裝、驗證、連結、部署

Vercel CLI 完全未設定。

  1. 安裝 CLI（如果尚未安裝）：

    npm install -g vercel

  2. 驗證：

    vercel login

    使用者在瀏覽器中完成驗證。如果在無法進行登入的非互動式環境中，請跳到底下的無驗證備用方案。

  3. 詢問要部署到哪個團隊 — 以項目符號清單呈現來自 vercel teams list --format json 的團隊別名。如果只有一個團隊/個人帳戶，請跳過。一旦選擇，立即繼續。

  4. 使用所選團隊範圍連結專案（如果存在 Git 遠端，使用 --repo；否則使用純 vercel link）：

    vercel link --repo --scope <team-slug>   # 如果存在 Git 遠端
vercel link --scope <team-slug>          # 如果沒有 Git 遠端

  5. 使用最佳可用方法部署（如果存在遠端則使用 git 推送，否則使用 vercel deploy -y --no-wait --scope <team-slug>，然後 vercel inspect <url> 以檢查狀態）。

無驗證備用方案 — claude.ai 沙箱

使用時機： 最後手段，當 CLI 無法在 claude.ai 沙箱中安裝或驗證時。這不需要驗證 — 它會返回一個預覽 URL（即時網站）和一個領取 URL（轉移到您的 Vercel 帳戶）。

bash /mnt/skills/user/deploy-to-vercel/resources/deploy.sh [path]

參數：

  • path - 要部署的目錄，或一個 .tgz 檔案（預設為目前目錄）

範例：

# 部署目前目錄
bash /mnt/skills/user/deploy-to-vercel/resources/deploy.sh

# 部署特定專案
bash /mnt/skills/user/deploy-to-vercel/resources/deploy.sh /path/to/project

# 部署現有的 tarball
bash /mnt/skills/user/deploy-to-vercel/resources/deploy.sh /path/to/project.tgz

該腳本會從 package.json 自動檢測框架，打包專案（排除 node_modules、.git、.env），上傳它，並等待建置完成。

告知使用者：「您的部署已準備就緒，網址為 [previewUrl]。請前往 [claimUrl] 領取以管理您的部署。」

無驗證備用方案 — Codex 沙箱

使用時機： 在 Codex 沙箱中，CLI 可能未驗證。Codex 預設在沙箱環境中執行 — 先嘗試 CLI，如果驗證失敗則回退到部署腳本。

  1. 檢查 Vercel CLI 是否已安裝（此檢查不需要權限提升）：

    command -v vercel

  2. 如果 vercel 已安裝，嘗試使用 CLI 部署：

    vercel deploy [path] -y --no-wait

  3. 如果 vercel 未安裝，或 CLI 失敗並顯示「No existing credentials found」，使用備用腳本：

    skill_dir="<skill-path>"

# 部署目前目錄
bash "$skill_dir/resources/deploy-codex.sh"

# 部署特定專案
bash "$skill_dir/resources/deploy-codex.sh" /path/to/project

# 部署現有的 tarball
bash "$skill_dir/resources/deploy-codex.sh" /path/to/project.tgz

該腳本處理框架檢測、打包和部署。它會等待建置完成並返回包含 previewUrl 和 claimUrl 的 JSON。

告知使用者：「您的部署已準備就緒，網址為 [previewUrl]。請前往 [claimUrl] 領取以管理您的部署。」

提升的網路存取權限：僅在沙箱阻止網路呼叫時，才提升實際的部署命令（sandbox_permissions=require_escalated）。請不要提升 command -v vercel 檢查。

代理特定注意事項

Claude Code / 基於終端機的代理

您具有完整的 shell 存取權限。請勿使用 /mnt/skills/ 路徑。請依照上述決策流程直接使用 CLI。

對於無驗證備用方案，從技能安裝位置執行部署腳本：

bash ~/.claude/skills/deploy-to-vercel/resources/deploy.sh [path]

路徑可能因使用者安裝技能的位置而異。

沙箱環境（claude.ai）

您可能無法執行 vercel login 或 git push。請直接前往無驗證備用方案 — claude.ai 沙箱。

Codex

Codex 在沙箱中執行。請先檢查 CLI 是否可用，然後回退到部署腳本。請前往無驗證備用方案 — Codex 沙箱。

輸出

始終向使用者顯示部署 URL。

  • Git 推送： 使用 vercel ls --format json 尋找預覽 URL。如果 CLI 未驗證，請告知使用者查看 Vercel 控制台或提交狀態檢查。
  • CLI 部署： 顯示由 vercel deploy --no-wait 返回的 URL。使用 vercel inspect <url> 檢查建置狀態並向使用者報告。
  • 無驗證備用方案： 同時顯示預覽 URL 和領取 URL： 
    部署成功！

預覽 URL：https://my-app-abc123.vercel.app
領取 URL：https://vercel.com/claim-deployment?code=...

在預覽 URL 查看您的網站。
若要將此部署轉移到您的 Vercel 帳戶，請造訪領取 URL。

請勿使用 curl 或 fetch 來驗證已部署的 URL 是否正常運作。只需返回連結即可。

故障排除

網路出口錯誤（claude.ai）

如果由於 claude.ai 的網路限制導致部署失敗，請告知使用者：

由於網路限制，部署失敗。若要修正此問題：

1. 前往 https://claude.ai/settings/capabilities
2. 將 *.vercel.com 新增到允許的網域
3. 再次嘗試部署

提升的網路存取權限（Codex / 沙箱環境）

如果由於沙箱環境中的網路問題（逾時、DNS 錯誤、連線重置）導致部署失敗，請使用提升的權限重新執行（sandbox_permissions=require_escalated）。請勿提升初始的 CLI 可用性檢查 — 僅提升實際的部署命令。

給使用者的範例說明：

部署需要提升的網路存取權限才能部署到 Vercel。我可以使用提升的權限
重新執行命令 — 要繼續嗎？

CLI 驗證失敗

如果 vercel login 或 vercel deploy 因驗證錯誤而失敗，請回退到無驗證部署腳本（取決於環境，使用 claude.ai 或 Codex 變體）。

Individual skills in this repo

This repo contains 4 individual skills — each has its own dedicated page.

PhuongDeveloper/landingpage

Postgres best practices maintained by Supabase, for Postgres running anywhere. Load this skill BEFORE writing or changing anything that lives in a Postgres database: creating or altering tables and columns (including choosing column types), schema design, migrations and declarative schema files, RLS policies and the tests that verify them, indexes, triggers, database functions, queues and scheduled jobs (pg_cron, pgmq), vector/semantic search (pgvector), and restoring dumps (pg_restore) or importing data. Also load it when diagnosing slow queries, high CPU, timeouts, EXPLAIN plans, connection exhaustion, locking, bloat, or rows visible to the wrong user or tenant. This is not just a performance guide — schema, migration, security, and SQL authoring tasks need these rules too, even for a one-column change or a single query.

PhuongDeveloper/landingpage

Use when doing ANY task involving Supabase. Triggers: Supabase products (Database, Auth, Edge Functions, Realtime, Storage, Vectors, Cron, Queues); client libraries and SSR integrations (supabase-js, @supabase/ssr) in Next.js, React, SvelteKit, Astro, Remix; auth issues (login, logout, sessions, JWT, cookies, getSession, getUser, getClaims, RLS); Supabase CLI or MCP server; schema changes, migrations, declarative schemas, security audits, Postgres extensions (pg_graphql, pg_cron, pg_vector); debugging and troubleshooting errors or unexpected behavior on Supabase projects (HTTP errors, Postgres errors, RLS surprises, permission denied, schema cache issues, timeouts, Edge Function crashes, Realtime drops, Storage failures) and reading or querying logs (Logs Explorer, ClickHouse).

PhuongDeveloper/landingpage

Deploy and manage projects on Vercel using token-based authentication. Use when working with Vercel CLI using access tokens rather than interactive login — e.g. "deploy to vercel", "set up vercel", "add environment variables to vercel".

PhuongDeveloper/landingpage

React composition patterns that scale. Use when refactoring components with boolean prop proliferation, building flexible component libraries, or designing reusable APIs. Triggers on tasks involving compound components, render props, context providers, or component architecture. Includes React 19 API changes.

相關技能

steipete/sag

ElevenLabs text-to-speech with mac-style say UX.

community

steipete/oracle

Oracle CLI second-model review/debug/refactor/design with selected files, dry-run token checks, API or browser engine.

community

steipete/peekaboo

Capture and automate macOS UI with the Peekaboo CLI.

community

mattpocock/design-an-interface

Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explore interface options, compare module shapes, or mentions "design it twice".

community

mattpocock/prototype

Build a throwaway prototype to flesh out a design — a runnable terminal app for state/business-logic questions, or several radically different UI variations toggleable from one route.

community

mattpocock/grill-me

Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".

community