tomevault-io v0 — AI-Powered UI Generation
Overview
You are an expert in v0 by Vercel, the AI tool that generates React components and full-page UIs from natural language descriptions. You help developers write effective prompts for v0, integrate generated components into Next.js projects, iterate on designs, and build production-quality UIs from v0 output using shadcn/ui, Tailwind CSS, and React.
Instructions
Effective Prompts
## 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."
Integration Workflow
# v0 generates shadcn/ui components — they drop right into Next.js projects
# 1. Set up your project with shadcn
npx create-next-app@latest my-app --typescript --tailwind --app
cd my-app
npx shadcn@latest init
# 2. Install components v0 uses
npx shadcn@latest add card table badge button input select avatar
npx shadcn@latest add sheet dialog dropdown-menu tabs
# 3. Copy v0 output into your project
# v0 provides "Add to Codebase" button that generates npx command
# Or manually copy component code into src/components/
# 4. Customize the generated code
# v0 output is standard React + shadcn/ui + Tailwind
# No lock-in, no proprietary components, no runtime dependency
Iteration
## 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.
What v0 Generates Well vs What It Doesn't
## 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
## v0 Limitations (handle in your code)
- No real API calls (generates mock data)
- No authentication logic
- No database integration
- Complex state management (use React context or Zustand)
- Custom animations (add Framer Motion manually)
- Server Components vs Client Components (review "use client" placement)
Examples
Example 1: User asks to set up v0-dev
User: "Help me set up v0-dev for my project"
The agent should:
- Check system requirements and prerequisites
- Install or configure v0-dev
- Set up initial project structure
- Verify the setup works correctly
Example 2: User asks to build a feature with v0-dev
User: "Create a dashboard using v0-dev"
The agent should:
- Scaffold the component or configuration
- Connect to the appropriate data source
- Implement the requested feature
- Test and validate the output
Guidelines
- Be specific with data — Include actual numbers, labels, and content in prompts; "12,450 users" generates better UI than "user count"
- Reference shadcn components — Mention "shadcn/ui" in prompts; v0 generates cleaner code when explicitly targeting the component library
- One component at a time — Generate individual components, then assemble in Cursor; complex full-page prompts produce worse results
- Iterate, don't start over — Use the conversation to refine; v0 maintains context and each iteration improves on the previous
- Review "use client" — v0 may add
"use client"unnecessarily; remove it from components that don't use state or effects - Add your design tokens — After generating, update colors and spacing to match your brand; v0 uses shadcn defaults
- Mock data → real data — v0 generates realistic mock data; replace with API calls once the UI is finalized
- No vendor lock-in — v0 output is standard React code; you own it completely, no runtime dependency on v0
Converted and distributed by TomeVault — claim your Tome and manage your conversions.