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.
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
- Packages your project into a tarball (excludes
node_modulesand.git) - Auto-detects framework from
package.json - Uploads to deployment service
- 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 scripts/deploy.sh [path]
Arguments:
path- Directory to deploy, or a.tgzfile (defaults to current directory)
Examples:
# 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:
{
"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
.htmlfile not namedindex.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
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
ui-ux-guidelines
Implementation details for accessible, performant interfaces. Use alongside vercel-design-guidelines for detailed technical guidance on interactions, animations, and forms.
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.
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.
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.
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".
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.
Didn't find tool you were looking for?