--- name: v0-dev-ff802fd5fe61 description: >- Generates UI components and full web apps with v0 (v0.app, formerly v0.dev), the AI app builder by Vercel. Use when a user asks to prototype React components, generate shadcn/ui layouts, create landing pages, scaffold UI from natural language prompts, or drive v0 from code through the v0 API. license: Apache-2.0 compatibility: "A v0 account (usage is billed in credits); the v0 API needs an API key and Node.js" metadata: author: terminal-skills version: "1.1.0" category: development tags: "ai-ui, code-generation, react, shadcn-ui, prototyping" --- # v0 — AI-Powered UI Generation ## Overview v0 by Vercel is an AI agent that builds web interfaces and full-stack apps from natural language prompts, screenshots or Figma files. It lives at v0.app (v0.dev redirects there). A new chat starts with a Next.js app using shadcn/ui and Tailwind CSS, runs it in a live preview, and can connect a database, sync with GitHub and publish to Vercel. This skill covers writing effective prompts, iterating, getting the generated code into your own repository, and calling v0 from code with the v0 API (`v0` npm package) or from another agent through its MCP server. ## Instructions ### Effective Prompts ```markdown ## What Makes a Good v0 Prompt ### ✅ Good: Specific, visual, with data examples "A pricing page with 3 tiers: Starter ($9/mo — 5 projects, 1 user), Pro ($29/mo — unlimited projects, 5 users, priority support, MOST POPULAR badge), Enterprise (custom pricing — SSO, audit logs, dedicated support, 'Contact Sales' button). Each tier is a card with a feature checklist. Use shadcn/ui, make the Pro tier visually prominent with a border and badge." ### ❌ Bad: Vague, no visual details "Make me a pricing page" ## Prompt Patterns That Work ### 1. Dashboard with real data "An analytics dashboard showing: DAU chart (line, last 30 days, current 12.4K), revenue chart (bar, monthly, $45K this month), conversion funnel (signup→trial→paid, percentages), and a table of top 10 pages by traffic. Dark theme, minimal." ### 2. Form with validation states "A multi-step checkout form: Step 1 — shipping address (name, address, city, state, zip with autocomplete). Step 2 — payment (card number, expiry, CVV with Stripe-style formatting). Step 3 — review order with item list and totals. Show a progress bar at top. Include error states and loading states." ### 3. Data table with actions "A user management table with columns: name (with avatar), email, role (admin/member/viewer as colored badge), status (active/suspended), last login (relative time). Include: search bar, role filter dropdown, bulk select checkboxes, and a row action menu (edit/suspend/delete). Pagination at bottom." ``` A screenshot or a Figma link attached to the prompt works as the visual spec; add text for behavior the image cannot show. For a multi-feature app, ask v0 to plan first (the built-in **Plan Mode** instruction makes it propose a plan and wait for approval). ### Integration Workflow v0 no longer hands over a single component file: every chat is a complete project. There are two ways to get its code into your own work. **GitHub sync (recommended).** In the chat open **Project menu `...` → Settings → GitHub → Connect**, pick the account and a repository name. v0 creates a private repository and pushes the project. Every later change is committed to a working branch such as `v0/main-abc123` with its own preview deployment; **Publish** opens (or reuses) a pull request and merges it. v0 never pushes to the base branch directly. An existing repository goes the other way: in a new chat, **+ → Import from… → Import from GitHub**. ```bash git clone git@github.com:ledgerline/pricing-page.git cd pricing-page npm install # a regular Next.js project; use pnpm instead if the repository has a pnpm-lock.yaml npm run dev ``` **Copy components into an existing app.** Read the files in the chat's **Code** tab (or pull them with the API, see below) and copy what you need. The components import shadcn/ui primitives, so the target project needs them: ```bash # 1. A Next.js project with shadcn/ui (skip if you already have one) npx create-next-app@latest ledgerline-web --typescript --tailwind --app cd ledgerline-web npx shadcn@latest init # interactive: asks for a component library (Base UI, React Aria, Radix UI) and a preset; # without prompts: `init -d` (defaults: Base UI) or `init -b radix -p nova` (Radix UI) # 2. Install the primitives the generated code imports. They must be built on the same library as the v0 project's # own components/ui/*.tsx (check whether those import radix-ui or @base-ui/react), or copy those files instead npx shadcn@latest add card table badge button input select avatar npx shadcn@latest add sheet dialog dropdown-menu tabs # 3. Copy the component files into components/ and fix import paths # The output is standard React + shadcn/ui + Tailwind: no runtime dependency on v0 ``` ### Iteration ```markdown ## Iterating on v0 Output v0 supports conversation-style iteration: 1. Generate initial component: "A user profile card with avatar, name, bio, stats" 2. Refine: "Make the avatar larger, add an edit button, and add social links" 3. Add variants: "Create a compact version of this card for use in a sidebar" 4. Add interactivity: "Make the bio editable inline with a pencil icon toggle" 5. Responsive: "Make it stack vertically on mobile with the avatar centered" Each iteration builds on the previous — v0 remembers context within a conversation. ``` Two tools make an iteration precise: in the **Code** tab select lines in the gutter and attach a comment to the next prompt; in the **Design** tab click an element in the preview and change its styles directly. Up to 10 prompts can be queued while v0 is still generating. ### Using v0 from Code The v0 API (v2, base URL `https://api.v0.dev/v2`) exposes the same agent. Create a key at v0.app/settings/keys and keep it on the server. ```bash npm install v0 # TypeScript SDK for API v2 (the older v0-sdk package targets v1) # The SDK reads V0_API_KEY from process.env: keep it in .env.local (git-ignored) or a secret manager, # never in browser code and never with a NEXT_PUBLIC_ prefix. Next.js loads .env.local itself; # a plain Node script needs `node --env-file=.env.local` (Node 20.6+) ``` ```javascript // generate-pricing.mjs — run with: node --env-file=.env.local generate-pricing.mjs import { mkdir, writeFile } from "node:fs/promises"; import { dirname, join } from "node:path"; import { v0 } from "v0"; // reads V0_API_KEY from the environment const created = await v0.chats.create({ message: "A pricing page with 3 tiers: Starter ($9/mo, 5 projects), Pro ($29/mo, unlimited projects, " + "MOST POPULAR badge), Enterprise (custom, 'Contact Sales'). shadcn/ui cards, Pro visually prominent.", }); if (created.error) throw new Error(created.error.message); const chatId = created.data.chat.id; // Iterate in the same chat instead of starting over const refined = await v0.messages.send({ chatId, message: "Add a monthly/annual toggle with 20% off annual." }); if (refined.error) throw new Error(refined.error.message); // Pull the generated source into the working tree for review const result = await v0.chats.getFiles({ chatId }); if (result.error) throw new Error(result.error.message); for (const file of result.data.files) { const target = join("v0-output", file.path); await mkdir(dirname(target), { recursive: true }); await writeFile(target, Buffer.from(file.content, file.encoding)); } console.log(`${result.data.files.length} files written to v0-output/ from chat ${chatId}`); console.log(`credits used: ${created.data.usage.creditsCost.total + refined.data.usage.creditsCost.total}`); ``` Methods return `{ data, error }` instead of throwing. `create` and `send` wait for the generation to finish; `createStream`/`sendStream` return server-sent events for a live UI, and `createAsync`/`sendAsync` return at once for polling. Other calls: `v0.chats.getPreview({ chatId })` for the preview URL, `v0.chats.deploy({ chatId })` to deploy to Vercel, `v0.chats.createFromRepo` / `createFromZip` to start from existing code. `npx create-v0-sdk-app my-v0-app` scaffolds a complete chat-and-preview frontend on top of these. Coding agents can use v0 through its remote MCP server at `https://v0.app/api/mcp` (`{ "mcpServers": { "v0": { "url": "https://v0.app/api/mcp" } } }`). It signs in with OAuth — no API key goes into the MCP configuration — and exposes the API operations as tools (`chats.create`, `messages.send`, `chats.getFiles`, `chats.deploy`). ### What v0 Generates Well vs What It Doesn't ```markdown ## v0 Strengths - Landing pages, marketing sites - Dashboard layouts, admin panels - Forms (multi-step, with validation UI) - Data tables with filters and pagination - Card layouts, grid systems - Navigation (sidebar, header, breadcrumbs) - Modal dialogs, slide-overs, popovers - Full-stack features when asked: API routes, server actions, a database (Neon, Supabase, Upstash through Project menu → Settings → Integrations), Stripe payments ## v0 Limitations (handle in your code) - A first generation uses mock data unless the prompt asks for a data layer - Best results only on its default stack (Next.js, Tailwind CSS, shadcn/ui); other frameworks and component libraries work less reliably - Customized shadcn/ui primitives confuse it: it is trained on the default implementations - Complex state management (use React context or Zustand) - Server Components vs Client Components (review "use client" placement) - Generated auth, payments and database code needs a security review before production ``` ## Examples ### Example 1: Prototype a page and bring it into a repository User: "I need a pricing page for our SaaS by tomorrow. We use Next.js and shadcn/ui." 1. At v0.app, send the pricing prompt from **Effective Prompts**, then refine in the same chat: "Add a monthly/annual toggle with 20% off annual", "Stack the cards on mobile, Pro first". 2. Connect the chat to GitHub (**Project menu → Settings → GitHub → Connect**, repository `ledgerline/pricing-page`). 3. Work on it locally: ```bash git clone git@github.com:ledgerline/pricing-page.git && cd pricing-page npm install && npm run dev # pnpm, if the repository has a pnpm-lock.yaml ``` Result: a private repository holding a complete Next.js project built with shadcn/ui and Tailwind CSS. Later prompts in the chat arrive as commits on a `v0/…` working branch with a preview deployment, and reach the base branch only through a pull request. ### Example 2: Generate UI from a script User: "Generate the pricing page from our build script and drop the files into the repo so I can review them." Save `generate-pricing.mjs` from **Using v0 from Code** and run it: ```bash npm install v0 node --env-file=.env.local generate-pricing.mjs # .env.local holds V0_API_KEY git status --short v0-output/ ``` The script creates a chat, sends one refinement, and writes every source file of the generated project under `v0-output/` with its project-relative path (for example `v0-output/app/page.tsx`), then prints how many files it wrote, the chat ID and the credits spent. Each `create` and `send` is a paid generation; the response's `usage` field reports its token counts and credit cost. ## Guidelines 1. **Be specific with data** — Include actual numbers, labels, and content in prompts; "12,450 users" generates better UI than "user count" 2. **Reference shadcn components** — Mention "shadcn/ui" in prompts; v0 generates cleaner code when explicitly targeting the component library 3. **One component at a time** — Build large apps incrementally: one feature per prompt, checked in the preview, instead of one giant prompt 4. **Iterate, don't start over** — Use the conversation to refine; v0 maintains context and each iteration improves on the previous 5. **Review "use client"** — v0 may add `"use client"` unnecessarily; remove it from components that don't use state or effects 6. **Add your design tokens** — After generating, update colors and spacing to match your brand; v0 uses shadcn defaults (a shadcn registry can teach v0 your design system) 7. **Mock data → real data** — Replace mock data with API calls once the UI is finalized, or ask v0 to add the data layer 8. **No vendor lock-in** — v0 output is standard React code; you own it completely, no runtime dependency on v0 9. **Watch the credits** — The Free plan allows 7 messages a day; paid plans (Plus $30/user/month, Business $100/user/month) bill generations in credits by tokens used, and long chats cost more because the whole context is sent each time. Check v0.app/pricing: plans change 10. **Keep secrets out of prompts** — Put API keys in the project's environment variables, not in the chat. v0 may use prompts and generated content for training unless the team has opted out in its Vercel data preferences (the plan table offers the opt-out on Business and Enterprise only; Enterprise content is never used) 11. **The repository is the source of truth** — Once a chat is connected to GitHub, deleting the repository can make the code unrecoverable --- Source attribution: terminal-skills Original project: https://github.com/TerminalSkills/skills/blob/8a9852d489f274538be9bf1c9121aeb403750b1c/skills/v0-dev/SKILL.md License: Apache-2.0 License information: https://www.apache.org/licenses/LICENSE-2.0 Original upstream instructions; downloaded from Mega AI Hub. ## Upstream license notice Apache License Version 2.0, January 2004 http://www.apache.org/licenses/ TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION 1. Definitions. "License" shall mean the terms and conditions for use, reproduction, and distribution as defined by Sections 1 through 9 of this document. "Licensor" shall mean the copyright owner or entity authorized by the copyright owner that is granting the License. "Legal Entity" shall mean the union of the acting entity and all other entities that control, are controlled by, or are under common control with that entity. For the purposes of this definition, "control" means (i) the power, direct or indirect, to cause the direction or management of such entity, whether by contract or otherwise, or (ii) ownership of fifty percent (50%) or more of the outstanding shares, or (iii) beneficial ownership of such entity. "You" (or "Your") shall mean an individual or Legal Entity exercising permissions granted by this License. "Source" form shall mean the preferred form for making modifications, including but not limited to software source code, documentation source, and configuration files. "Object" form shall mean any form resulting from mechanical transformation or translation of a Source form, including but not limited to compiled object code, generated documentation, and conversions to other media types. "Work" shall mean the work of authorship, whether in Source or Object form, made available under the License, as indicated by a copyright notice that is included in or attached to the work (an example is provided in the Appendix below). "Derivative Works" shall mean any work, whether in Source or Object form, that is based on (or derived from) the Work and for which the editorial revisions, annotations, elaborations, or other modifications represent, as a whole, an original work of authorship. For the purposes of this License, Derivative Works shall not include works that remain separable from, or merely link (or bind by name) to the interfaces of, the Work and Derivative Works thereof. "Contribution" shall mean any work of authorship, including the original version of the Work and any modifications or additions to that Work or Derivative Works thereof, that is intentionally submitted to the Licensor for inclusion in the Work by the copyright owner or by an individual or Legal Entity authorized to submit on behalf of the copyright owner. For the purposes of this definition, "submitted" means any form of electronic, verbal, or written communication sent to the Licensor or its representatives, including but not limited to communication on electronic mailing lists, source code control systems, and issue tracking systems that are managed by, or on behalf of, the Licensor for the purpose of discussing and improving the Work, but excluding communication that is conspicuously marked or otherwise designated in writing by the copyright owner as "Not a Contribution." "Contributor" shall mean Licensor and any individual or Legal Entity on behalf of whom a Contribution has been received by the Licensor and subsequently incorporated within the Work. 2. Grant of Copyright License. Subject to the terms and conditions of this License, each Contributor hereby grants to You a perpetual, worldwide, non-exclusive, no-charge, royalty-free, irrevocable copyright license to reproduce, prepare Derivative Works of, publicly display, publicly perform, sublicense, and distribute the Work and such Derivative Works in Source or Object form. 3. Grant of Patent License. Subject to the terms and conditions of this License, each Contributor hereby grants to You a perpetual, worldwide, non-exclusive, no-charge, royalty-free, irrevocable (except as stated in this section) patent license to make, have made, use, offer to sell, sell, import, and otherwise transfer the Work, where such license applies only to those patent claims licensable by such Contributor that are necessarily infringed by their Contribution(s) alone or by combination of their Contribution(s) with the Work to which such Contribution(s) was submitted. If You institute patent litigation against any entity (including a cross-claim or counterclaim in a lawsuit) alleging that the Work or a Contribution incorporated within the Work constitutes direct or contributory patent infringement, then any patent licenses granted to You under this License for that Work shall terminate as of the date such litigation is filed. 4. Redistribution. You may reproduce and distribute copies of the Work or Derivative Works thereof in any medium, with or without modifications, and in Source or Object form, provided that You meet the following conditions: (a) You must give any other recipients of the Work or Derivative Works a copy of this License; and (b) You must cause any modified files to carry prominent notices stating that You changed the files; and (c) You must retain, in the Source form of any Derivative Works that You distribute, all copyright, patent, trademark, and attribution notices from the Source form of the Work, excluding those notices that do not pertain to any part of the Derivative Works; and (d) If the Work includes a "NOTICE" text file as part of its distribution, then any Derivative Works that You distribute must include a readable copy of the attribution notices contained within such NOTICE file, excluding any notices that do not pertain to any part of the Derivative Works, in at least one of the following places: within a NOTICE text file distributed as part of the Derivative Works; within the Source form or documentation, if provided along with the Derivative Works; or, within a display generated by the Derivative Works, if and wherever such third-party notices normally appear. The contents of the NOTICE file are for informational purposes only and do not modify the License. You may add Your own attribution notices within Derivative Works that You distribute, alongside or as an addendum to the NOTICE text from the Work, provided that such additional attribution notices cannot be construed as modifying the License. You may add Your own copyright statement to Your modifications and may provide additional or different license terms and conditions for use, reproduction, or distribution of Your modifications, or for any such Derivative Works as a whole, provided Your use, reproduction, and distribution of the Work otherwise complies with the conditions stated in this License. 5. Submission of Contributions. Unless You explicitly state otherwise, any Contribution intentionally submitted for inclusion in the Work by You to the Licensor shall be under the terms and conditions of this License, without any additional terms or conditions. Notwithstanding the above, nothing herein shall supersede or modify the terms of any separate license agreement you may have executed with Licensor regarding such Contributions. 6. Trademarks. This License does not grant permission to use the trade names, trademarks, service marks, or product names of the Licensor, except as required for reasonable and customary use in describing the origin of the Work and reproducing the content of the NOTICE file. 7. Disclaimer of Warranty. Unless required by applicable law or agreed to in writing, Licensor provides the Work (and each Contributor provides its Contributions) on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied, including, without limitation, any warranties or conditions of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A PARTICULAR PURPOSE. You are solely responsible for determining the appropriateness of using or redistributing the Work and assume any risks associated with Your exercise of permissions under this License. 8. Limitation of Liability. In no event and under no legal theory, whether in tort (including negligence), contract, or otherwise, unless required by applicable law (such as deliberate and grossly negligent acts) or agreed to in writing, shall any Contributor be liable to You for damages, including any direct, indirect, special, incidental, or consequential damages of any character arising as a result of this License or out of the use or inability to use the Work (including but not limited to damages for loss of goodwill, work stoppage, computer failure or malfunction, or any and all other commercial damages or losses), even if such Contributor has been advised of the possibility of such damages. 9. Accepting Warranty or Additional Liability. While redistributing the Work or Derivative Works thereof, You may choose to offer, and charge a fee for, acceptance of support, warranty, indemnity, or other liability obligations and/or rights consistent with this License. However, in accepting such obligations, You may act only on Your own behalf and on Your sole responsibility, not on behalf of any other Contributor, and only if You agree to indemnify, defend, and hold each Contributor harmless for any liability incurred by, or claims asserted against, such Contributor by reason of your accepting any such warranty or additional liability. END OF TERMS AND CONDITIONS Copyright 2025 Terminal Skills Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. # Mega AI Hub resource metadata Creator / publisher: terminal-skills Original project: https://github.com/TerminalSkills/skills/blob/8a9852d489f274538be9bf1c9121aeb403750b1c/skills/v0-dev/SKILL.md Attribution basis: Source repository record Fields of work: Development & Engineering, Product Management, Design Roles: Frontend Developer, Product Manager, UX Designer, Growth Product Manager, Design System Lead Specialties: Frontend, API Tools: V0.Dev, Shadcn Ui, Tailwind Css Country applicability: Country not specified Classification basis: Source category, role and specialization labels Instruction SHA-256: cfb3b26dba00584bc3c9dab53ed3c905c2a1334b9414b66922bc1228ba481be3