composition-patterns
Composition patterns for building flexible, maintainable React components. Avoid boolean prop proliferation by using compound components, lifting state, and…
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".
$ npx -y skills add vercel-labs/agent-skills --skill vercel-cli-with-tokens --agent claude-codeHow it fires
How this skill gets triggered: by you, by Claude, or both.
/vercel-cli-with-tokensContext preview
The summary Claude sees to decide when to auto-load this skill.
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".
name: vercel-cli-with-tokens description: 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". metadata: author: vercel version: "1.0.0"
Deploy and manage projects on Vercel using the CLI with token-based authentication, without relying on `vercel login`.
Before running any Vercel CLI commands, identify where the token is coming from. Work through these scenarios in order:
printenv VERCEL_TOKEN
If this returns a value, you're ready. Skip to Step 2.
grep '^VERCEL_TOKEN=' .env 2>/dev/null
If found, export it:
export VERCEL_TOKEN=$(grep '^VERCEL_TOKEN=' .env | cut -d= -f2-)
Look for any variable that looks like a Vercel token (Vercel tokens typically start with `vca_`):
grep -i 'vercel' .env 2>/dev/null
Inspect the output to identify which variable holds the token, then export it as `VERCEL_TOKEN`:
export VERCEL_TOKEN=$(grep '^<VARIABLE_NAME>=' .env | cut -d= -f2-)
If none of the above yield a token, ask the user to provide one. They can create a Vercel access token at vercel.com/account/tokens.
---
**Important:** Once `VERCEL_TOKEN` is exported as an environment variable, the Vercel CLI reads it natively — **do not pass it as a `--token` flag**. Putting secrets in command-line arguments exposes them in shell history and process listings.
# Bad — token visible in shell history and process listings vercel deploy --token "vca_abc123" # Good — CLI reads VERCEL_TOKEN from the environment export VERCEL_TOKEN="vca_abc123" vercel deploy
Similarly, check for the project ID and team scope. These let the CLI target the right project without needing `vercel link`.
# Check environment printenv VERCEL_PROJECT_ID printenv VERCEL_ORG_ID # Or check .env grep -i 'vercel' .env 2>/dev/null
**If you have a project URL** (e.g. `https://vercel.com/my-team/my-project`), extract the team slug:
# e.g. "my-team" from "https://vercel.com/my-team/my-project" echo "$PROJECT_URL" | sed 's|https://vercel.com/||' | cut -d/ -f1
**If you have both `VERCEL_ORG_ID` and `VERCEL_PROJECT_ID` in your environment**, export them — the CLI will use these automatically and skip any `.vercel/` directory:
export VERCEL_ORG_ID="<org-id>" export VERCEL_PROJECT_ID="<project-id>"
Note: `VERCEL_ORG_ID` and `VERCEL_PROJECT_ID` must be set together — setting only one causes an error.
Ensure the Vercel CLI is installed and up to date:
npm install -g vercel vercel --version
Always deploy as **preview** unless the user explicitly requests production. Choose a method based on what you have available.
When `VERCEL_TOKEN` and `VERCEL_PROJECT_ID` are set in the environment, deploy directly:
vercel deploy -y --no-wait
With a team scope (either via `VERCEL_ORG_ID` or `--scope`):
vercel deploy --scope <team-slug> -y --no-wait
Production (only when explicitly requested):
vercel deploy --prod --scope <team-slug> -y --no-wait
Check status:
vercel inspect <deployment-url>
Use this when you have a token and team but no pre-existing project ID.
# Does the project have a git remote? git remote get-url origin 2>/dev/null # Is it already linked to a Vercel project? cat .vercel/project.json 2>/dev/null || cat .vercel/repo.json 2>/dev/null
**With git remote (preferred):**
vercel link --repo --scope <team-slug> -y
Reads the git remote and connects to the matching Vercel project. Creates `.vercel/repo.json`. More reliable than plain `vercel link`, which matches by directory name.
**Without git remote:**
vercel link --scope <team-slug> -y
Creates `.vercel/project.json`.
**Link to a specific project by name:**
vercel link --project <project-name> --scope <team-slug> -y
If the project is already linked, check `orgId` in `.vercel/project.json` or `.vercel/repo.json` to verify it matches the intended team.
**A) Git Push Deploy — has git remote (preferred)**
Git pushes trigger automatic Vercel deployments.
1. **Ask the user before pushing.** Never push without explicit approval. 2. Commit and push:
git add . git commit -m "deploy: <description of changes>" git push
3. Vercel builds automatically. Non-production branches get preview deployments. 4. Retrieve the deployment URL:
sleep 5 vercel ls --format json --scope <team-slug>
Find the latest entry in the `deployments` array.
**B) CLI Deploy — no git remote**
vercel deploy --scope <team-slug> -y --no-wait
Check status:
vercel inspect <deployment-url>
1. Clone the repository:
git clone <repo-url> cd <repo-name>
2. Link to Vercel:
vercel link --repo --scope <team-slug> -y
3. Deploy via git push (if you have push access) or CLI deploy.
A linked project has either:
Not needed when `VERCEL_ORG_ID` + `VERCEL_PROJECT_ID` are both set in the
A collection of skills for AI coding agents. Skills are packaged instructions and scripts that extend agent capabilities. Skills follow the Agent Skills format.
Get the whole plugin, auto-invokedRepo: vercel-labs/agent-skills
Composition patterns for building flexible, maintainable React components. Avoid boolean prop proliferation by using compound components, lifting state, and…
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…
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js…
Comprehensive best practices for React Native and Expo applications. Contains rules across multiple categories covering performance, animations, UI patterns,…
Guide for implementing smooth, native-feeling animations using React's View Transition API (`<ViewTransition>` component, `addTransitionType`, and CSS view…
Use for Vercel cost and performance optimization on deployed projects, especially Next.js, SvelteKit, Nuxt, and limited Astro apps. Collect Vercel metrics,…