V0 Dev
Generate and integrate v0 UI from prompts, CLI, and SDK with correct handoffs to shadcn and AI SDK when detected in output.
Install
npx skills add https://github.com/vercel-labs/vercel-plugin --skill v0-devWhat is this skill?
- Covers v0 CLI (npx/bunx v0), SDK (@v0/sdk), and v0.dev docs for AI code generation
- Retrieval aliases: v0, AI code gen, UI generator, prompt to code
- chainTo shadcn when @/components/ui or shadcn patterns appear in generated code
- chainTo ai-sdk when useChat, streamText, or ai package imports appear
- Prompt signals include generate with v0, v0 components, v0 generate with scored retrieval
Adoption & trust: 55 installs on skills.sh; 187 GitHub stars; 2/3 security scanners passed (skills.sh audits).
Recommended Skills
Frontend Designanthropics/skills
Vercel React Best Practicesvercel-labs/agent-skills
Remotion Best Practicesremotion-dev/skills
Vercel Composition Patternsvercel-labs/agent-skills
Develop Userscriptsxixu-me/skills
Next Best Practicesvercel-labs/next-skills
Journey fit
Common Questions / FAQ
Is V0 Dev safe to install?
skills.sh reports 2 of 3 security scanners passed. Review the Security Audits panel on this page before installing in production.
SKILL.md
READMESKILL.md - V0 Dev
# v0 by Vercel You are an expert in v0 (v0.app) — Vercel's AI-powered development agent that generates production-ready code from natural language descriptions. ## Overview v0 transforms prompts into working React/Next.js code. It supports 6M+ developers and 80K+ active teams globally. v0 operates as a universal coding agent with research, planning, debugging, and iteration capabilities. ## Core Capabilities - **Natural language → code**: Describe what you want, get production React components - **Visual input**: Upload Figma designs, screenshots, or sketches → code - **Multi-framework**: Outputs React, Vue, Svelte, HTML, Markdown - **Agentic intelligence**: Research, plan, debug, iterate autonomously - **shadcn/ui + Tailwind CSS**: Default styling system - **Full IDE**: Built-in VS Code editor, terminal, and git panel in the web UI ## CLI Usage ### Component Integration CLI (`v0` package) Install and pull v0-generated components into your Next.js project: ```bash # Initialize v0 in an existing Next.js project (one-time setup) npx v0@latest init # Add a specific v0-generated component by ID npx v0@latest add <component-id> # With pnpm pnpm dlx v0@latest init pnpm dlx v0@latest add <component-id> ``` `v0 init` installs required dependencies (`@radix-ui/react-icons`, `clsx`, `lucide-react`) and creates a `components.json` config file. ### "Add to Codebase" (Web UI → Local) From the v0.dev web interface, click the "Add to Codebase" button (terminal icon) to generate a command: ```bash npx shadcn@latest add "https://v0.dev/chat/b/<project_id>?token=<token>" ``` Run this in your project root to pull the entire generated project into your codebase. ### Typical Workflow ```bash # 1. Scaffold a Next.js app npx create-next-app@latest --typescript --tailwind --eslint # 2. Initialize v0 integration npx v0@latest init # 3. Generate a component on v0.dev, get its ID # 4. Add the component locally npx v0@latest add a1B2c3d4 # 5. Import and use in your app ``` ### Project Scaffolding CLI ```bash # Create a new project from v0 templates npx create-v0-sdk-app@latest my-v0-app # Use the v0-clone template (full