// 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".
UI/UX design intelligence for web and mobile. Includes 50+ styles, 161 color palettes, 57 font pairings, 161 product types, 99 UX guidelines, and 25 chart types across 10 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui, and HTML/CSS). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, and check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, and mobile app. Elements: button, modal, navbar, sidebar, card, table, form, and chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, and flat design. Topics: color systems, accessibility, animation, layout, typography, font pairing, spacing, interaction states, shadow, and gradient. Integrations: shadcn/ui MCP for component search and examples.
Vision-driven browser automation using Midscene Bridge mode. Operates entirely from screenshots — no DOM or accessibility labels required. Can interact with all visible elements on screen regardless of technology stack. This mode connects to the user's desktop Chrome browser via the Midscene Chrome Extension, preserving cookies, sessions, and login state. Use this skill when the user wants to: - Browse, navigate, or open web pages in the user's own Chrome browser - Interact with pages that require login sessions, cookies, or existing browser state - Scrape, extract, or collect data from websites using the user's real browser - Fill out forms, click buttons, or interact with web elements - Verify, validate, or test frontend UI behavior - Take screenshots of web pages - Automate multi-step web workflows - Check website content or appearance Powered by Midscene.js (https://midscenejs.com)
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.
| name | vercel-deploy |
| description | 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". |
Note: In the Make Something project, the
$deployskill is the primary entry point for deployment. If$deployexists, defer to it instead of running this skill directly.
Deploy any project to Vercel instantly. Always deploy as preview (not production) unless the user explicitly asks for production.
command -v vercel).sandbox_permissions=require_escalated).command -v vercel
vercel is installed, run this (with a 10 minute timeout):vercel deploy [path] -y
Important: Use a 10 minute (600000ms) timeout for the deploy command since builds can take a while.
vercel is not installed, or if the CLI fails with "No existing credentials found", use the fallback method below.If CLI fails with auth error, use the deploy script:
skill_dir="<path-to-skill>"
# Deploy current directory
bash "$skill_dir/scripts/deploy.sh"
# Deploy specific project
bash "$skill_dir/scripts/deploy.sh" /path/to/project
# Deploy existing tarball
bash "$skill_dir/scripts/deploy.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."
Only if user explicitly asks:
vercel deploy [path] --prod -y
Show the user the deployment URL. For fallback deployments, also show 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 issues (timeouts, DNS errors, connection resets), rerun the actual deploy command with escalated permissions (use sandbox_permissions=require_escalated). Do not escalate the command -v vercel installation check. The deploy requires escalated network access when sandbox networking blocks outbound requests.
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?