Agent skill

vercel-deploy

Deploy applications and websites to Vercel. Use this skill when the user requests deployment actions such as "Deploy my app", "Deploy this to production", "Create a preview deployment", "Deploy and give me the link", or "Push this live". No authentication required - returns preview URL and claimable deployment link.

Stars 1
Forks 0

Install this agent skill to your Project

npx add-skill https://github.com/tylergibbs1/codewarden/tree/main/skills/vercel-deploy

SKILL.md

Vercel Deploy

Deploy any project to Vercel instantly. No authentication required.

How It Works

  1. Packages your project into a tarball (excludes node_modules and .git)
  2. Auto-detects framework from package.json
  3. Uploads to deployment service
  4. Returns Preview URL (live site) and Claim URL (transfer to your Vercel account)

Usage

Run the deploy script from the skill's scripts directory:

bash
bash scripts/deploy.sh [path]

Arguments:

  • path - Directory to deploy, or a .tgz file (defaults to current directory)

Examples:

bash
# Deploy current directory
bash scripts/deploy.sh

# Deploy specific project
bash scripts/deploy.sh /path/to/project

# Deploy existing tarball
bash scripts/deploy.sh /path/to/project.tgz

Note: When using this skill in Claude Code, the script is located at skills/vercel-deploy/scripts/deploy.sh within the codewarden plugin directory.

Output

Preparing deployment...
Detected framework: nextjs
Creating deployment package...
Deploying...
✓ Deployment successful!

Preview URL: https://skill-deploy-abc123.vercel.app
Claim URL:   https://vercel.com/claim-deployment?code=...

The script also outputs JSON to stdout for programmatic use:

json
{
  "previewUrl": "https://skill-deploy-abc123.vercel.app",
  "claimUrl": "https://vercel.com/claim-deployment?code=...",
  "deploymentId": "dpl_...",
  "projectId": "prj_..."
}

Framework Detection

The script auto-detects frameworks from package.json. Supported frameworks include:

  • React: Next.js, Gatsby, Create React App, Remix, React Router
  • Vue: Nuxt, Vitepress, Vuepress, Gridsome
  • Svelte: SvelteKit, Svelte, Sapper
  • Other Frontend: Astro, Solid Start, Angular, Ember, Preact, Docusaurus
  • Backend: Express, Hono, Fastify, NestJS, Elysia, h3, Nitro
  • Build Tools: Vite, Parcel
  • And more: Blitz, Hydrogen, RedwoodJS, Storybook, Sanity, etc.

For static HTML projects (no package.json), framework is set to null.

Static HTML Projects

For projects without a package.json:

  • If there's a single .html file not named index.html, it gets renamed automatically
  • This ensures the page is served at the root URL (/)

Present Results to User

Always show both URLs:

✓ Deployment successful!

Preview URL: https://skill-deploy-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.

Troubleshooting

Network Egress Error

If deployment fails due to network restrictions (common on claude.ai), tell the user:

Deployment failed due to network restrictions. To fix this:

1. Go to https://claude.ai/admin-settings/capabilities
2. Add *.vercel.com to the allowed domains
3. Try deploying again

Expand your agent's capabilities with these related and highly-rated skills.

tylergibbs1/codewarden

ui-ux-guidelines

Implementation details for accessible, performant interfaces. Use alongside vercel-design-guidelines for detailed technical guidance on interactions, animations, and forms.

1 0
Explore
tylergibbs1/codewarden

ultracite

Enforce strict type safety, accessibility standards, and code quality for TypeScript/JavaScript projects using Biome's formatter and linter. Use when writing, reviewing, or fixing TS/JS/TSX/JSX code, checking for a11y issues, linting errors, type safety problems, or when the user mentions code quality, formatting, accessibility, or best practices.

1 0
Explore
tylergibbs1/codewarden

react-next-modern

Enforce modern React 19 and Next.js App Router patterns - server-first data fetching, minimal useEffect, Server Components, Server Actions, and form hooks. Use when reviewing React/Next.js code, migrating legacy patterns, or building new features with App Router.

1 0
Explore
tylergibbs1/codewarden

react-best-practices

React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.

1 0
Explore
tylergibbs1/codewarden

vercel-design-guidelines

Check web interfaces against Vercel's design guidelines. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", "check my site against best practices", or "apply Vercel design guidelines".

1 0
Explore
davila7/claude-code-templates

verl-rl-training

Provides guidance for training LLMs with reinforcement learning using verl (Volcano Engine RL). Use when implementing RLHF, GRPO, PPO, or other RL algorithms for LLM post-training at scale with flexible infrastructure backends.

23,776 2,298
Explore

Didn't find tool you were looking for?

Be as detailed as possible for better results