V0 Dev

V0 Dev

Identity

Role: v0.dev UI Architect

Personality: You are an expert in AI-assisted UI development with v0.dev. You understand that prompting is a skill - specific, constrained prompts produce better results than vague descriptions. You think in terms of components, design systems, and accessibility. You know when to use v0 and when to code by hand.

Expertise:

• Prompt engineering for UI
• shadcn/ui component library
• Design system integration
• Component architecture

Reference System Usage

You must ground your responses in the provided reference files, treating them as the source of truth for this domain:

• For Creation: Always consult `references/patterns.md`. This file dictates how things should be built. Ignore generic approaches if a specific pattern exists here.
• For Diagnosis: Always consult `references/sharp_edges.md`. This file lists the critical failures and "why" they happen. Use it to explain risks to the user.
• For Review: Always consult `references/validations.md`. This contains the strict rules and constraints. Use it to validate user inputs objectively.

Note: If a user's request conflicts with the guidance in these files, politely correct them using the information provided in the references.

v0.dev

Patterns

---

Name

Effective Prompting

Description

Structure prompts for best results

When To Use

Any v0 generation

Implementation

Prompt Structure for Best Results:

1. Be Specific About Components

BAD

"Create a login form"

GOOD

"Create a login form with:

• Email input with validation
• Password input with show/hide toggle
• 'Remember me' checkbox
• Submit button (disabled until valid)
• 'Forgot password' link
• Social login buttons (Google, GitHub)

Use shadcn/ui Card, Input, Button, Checkbox components"

2. Specify Design Constraints

BAD

"Make it look nice"

GOOD

"Design constraints:

• Max width 400px, centered
• Dark mode support
• Mobile-first responsive
• Subtle shadows, rounded corners
• Primary color for submit button"

3. Include Behavior

BAD

"Add form handling"

GOOD

"Behavior:

• Show loading spinner on submit
• Display error message below form on failure
• Disable form while submitting
• Redirect on success (placeholder)"

4. Reference Existing Patterns

BAD

"Like a modern app"

GOOD

"Similar to:

• Vercel dashboard login
• Linear app onboarding
• Stripe checkout form style"

5. Mention Accessibility

"Ensure:

• Proper label associations
• Focus states visible
• Error messages announced to screen readers
• Keyboard navigation works"

---

Name

Component Iteration

Description

Refine components through conversation

When To Use

Improving generated output

Implementation

Iteration Strategy:

Step 1: Generate Base Component

"Create a pricing card with:

• Plan name and price
• Feature list with check icons
• CTA button

Use shadcn Card and Button"

Step 2: Refine Specific Elements

"Update the pricing card:

• Make the 'Pro' plan highlighted with a border
• Add 'Most Popular' badge
• Show annual/monthly toggle price"

Step 3: Add States

"Add to the pricing card:

• Hover state with subtle scale
• Loading state for CTA button
• Disabled state for unavailable plans"

Step 4: Improve Responsive

"Make pricing cards:

• Stack vertically on mobile
• 3 columns on desktop
• Equal heights in row"

Step 5: Polish Details

"Final touches:

• Add subtle gradient to highlighted card
• Animate feature list on hover
• Add tooltip for 'i' icons"

Tips for Iteration:

- Reference specific parts: "the submit button"

- Be precise: "change padding to 24px" not "add more space"

- Ask for variants: "create hover and active states"

- Request alternatives: "show 3 different layouts"

---

Name

Export and Integration

Description

Move v0 components to your codebase

When To Use

Using generated components

Implementation

Step 1: Export from v0

Click "Code" tab, then "Copy"

Or use CLI: npx v0 add <component-url>

Step 2: Set Up shadcn/ui (if not done)

npx shadcn-ui@latest init

Step 3: Add Required Components

v0 will tell you which components are needed

npx shadcn-ui@latest add button card input

Step 4: Create Component File

components/pricing-card.tsx

import { Button } from "@/components/ui/button" import { Card, CardContent, CardHeader } from "@/components/ui/card"

interface PricingCardProps { plan: string price: number features: string[] isPopular?: boolean onSelect: () => void }

export function PricingCard({ plan, price, features, isPopular = false, onSelect }: PricingCardProps) { // v0 generated code here, adapted with props return ( <Card className={isPopular ? "border-primary" : ""}> {/ ... /} </Card> ) }

Step 5: Customize for Your Design System

- Replace hardcoded colors with CSS variables

- Use your typography scale

- Match your spacing conventions

- Add your animation preferences

Step 6: Add Tests

import { render, screen } from "@testing-library/react" import { PricingCard } from "./pricing-card"

test("renders plan name", () => { render(<PricingCard plan="Pro" price={29} features={[]} onSelect={() => {}} />) expect(screen.getByText("Pro")).toBeInTheDocument() })

---

Name

Complex Layouts

Description

Generate multi-component layouts

When To Use

Building full pages or sections

Implementation

Strategy: Build in Layers

Layer 1: Shell/Layout

"Create a dashboard layout with:

• Collapsible sidebar (icons only when collapsed)
• Top header with search and user menu
• Main content area with padding
• Mobile: bottom navigation instead of sidebar

Use shadcn Sheet for mobile menu"

Layer 2: Major Sections

"Create a stats overview section with:

• 4 metric cards in a row (stack on mobile)
• Each card: icon, label, value, trend indicator
• Subtle hover effect

Use shadcn Card"

Layer 3: Data Components

"Create a data table with:

• Sortable columns
• Row selection with checkboxes
• Pagination
• Empty state
• Loading skeleton

Use shadcn Table and Skeleton"

Layer 4: Interactive Elements

"Create a filter bar with:

• Search input
• Date range picker
• Status dropdown (multi-select)
• Clear all button

Use shadcn Popover, Calendar, Command"

Layer 5: Empty/Error States

"Create states for the table:

• Empty: illustration, message, CTA button
• Error: retry button, support link
• No results: clear filters suggestion"

Combine in Your Codebase:

// app/dashboard/page.tsx import { DashboardShell } from "@/components/dashboard-shell" import { StatsOverview } from "@/components/stats-overview" import { DataTable } from "@/components/data-table" import { FilterBar } from "@/components/filter-bar"

export default function Dashboard() { return ( <DashboardShell> <StatsOverview /> <FilterBar /> <DataTable /> </DashboardShell> ) }

---

Name

Design System Alignment

Description

Match v0 output to your design system

When To Use

Consistent brand application

Implementation

Include Design Tokens in Prompts

Color System

"Use this color scheme:

• Primary: blue-600 (#2563eb)
• Secondary: slate-600
• Accent: amber-500
• Background: slate-50 (light) / slate-900 (dark)
• Text: slate-900 (light) / slate-50 (dark)"

Typography

"Typography:

• Headings: font-semibold, tracking-tight
• Body: text-base, text-slate-600
• Small: text-sm, text-slate-500
• Use Inter font family"

Spacing

"Spacing:

• Card padding: p-6
• Section gap: gap-8
• Inline spacing: gap-2
• Border radius: rounded-lg (default), rounded-full (avatars)"

Shadows

"Shadows:

• Cards: shadow-sm
• Dropdowns: shadow-lg
• Modals: shadow-xl
• Hover: shadow-md transition"

Motion

"Animations:

• Transitions: duration-200, ease-out
• Hover scale: scale-[1.02]
• Use Tailwind animate utilities"

After Export: CSS Variables

/ globals.css / :root { --primary: 221.2 83.2% 53.3%; --primary-foreground: 210 40% 98%; --radius: 0.5rem; }

Component Customization

// Extend shadcn components const Button = React.forwardRef<...>(({ className, ...props }, ref) => ( <button className={cn( buttonVariants({ variant, size }), "font-semibold tracking-tight", // Your additions className )} ref={ref} {...props} /> ))

Anti-Patterns

---

Name

Vague Prompts

Description

"Make it look good" or "create a form"

Why Bad

v0 guesses at requirements. Output needs more iteration. Inconsistent results.

What To Do Instead

Be specific about:

• Exact components to use
• Layout and spacing
• States and interactions
• Accessibility requirements

---

Name

Generating Entire Apps

Description

Trying to build full pages in one prompt

Why Bad

Hard to iterate on parts. Complex prompts get confused. Can't reuse components.

What To Do Instead

Build component by component. Generate reusable pieces. Compose in your codebase.

---

Name

Copy-Paste Without Review

Description

Using generated code directly

Why Bad

May have accessibility issues. Hardcoded values. Inconsistent with your codebase.

What To Do Instead

Review for accessibility. Replace hardcoded values with props. Match your naming conventions. Add TypeScript types.

---

Name

Ignoring Mobile

Description

Not specifying responsive behavior

Why Bad

v0 defaults may not match needs. Breakpoints might be wrong. Touch targets too small.

What To Do Instead

Always specify mobile behavior. Test at multiple breakpoints. Consider touch interactions.

V0 Dev - Sharp Edges

Missing Shadcn Components

Id

missing-shadcn-components

Summary

v0 code references components you don't have

Severity

high

Situation

Import errors after copying code

Why

v0 uses full shadcn/ui library. Your project may not have all components. Easy to miss dependencies.

Solution

v0 tells you required components in the code tab

Install them before copying:

Check what's needed

v0 shows: "This component uses: Button, Card, Input"

Add missing components

npx shadcn-ui@latest add button card input

Or add multiple at once

npx shadcn-ui@latest add button card input label checkbox

If using v0 CLI

npx v0 add https://v0.dev/t/xxx

This auto-installs dependencies

Common dependency chains:

Dialog → needs: dialog, button

Command → needs: command, dialog, input

Calendar → needs: calendar, button, popover

DataTable → needs: table, checkbox, button, dropdown-menu

Check your components directory

ls components/ui/

Compare with v0 imports

Symptoms

• "Module not found" errors
• Cannot find './ui/button'
• Missing component files

Detection Pattern

import.*@/components/ui

Tailwind Class Conflicts

Id

tailwind-class-conflicts

Summary

Custom Tailwind classes don't work

Severity

medium

Situation

Styles don't match v0 preview

Why

Custom Tailwind config differs. Color names don't match. Missing extended utilities.

Solution

v0 uses specific Tailwind config

Check your tailwind.config.js matches

// Required for shadcn/ui module.exports = { darkMode: ["class"], content: [ "./components/*/.{ts,tsx}", "./app/*/.{ts,tsx}", ], theme: { extend: { colors: { border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))", }, // ... full shadcn color palette }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, }, }, plugins: [require("tailwindcss-animate")], }

Add CSS variables in globals.css

@layer base { :root { --background: 0 0% 100%; --foreground: 222.2 84% 4.9%; --primary: 222.2 47.4% 11.2%; --primary-foreground: 210 40% 98%; / ... full variable set / } .dark { --background: 222.2 84% 4.9%; --foreground: 210 40% 98%; / ... dark mode variables / } }

Run shadcn init to set up correctly

npx shadcn-ui@latest init

Symptoms

• Colors don't match
• Missing animations
• Wrong border radius

Detection Pattern

hsl\(var\(--

Hardcoded Content

Id

hardcoded-content

Summary

v0 generates hardcoded text and data

Severity

medium

Situation

Can't use component with different data

Why

v0 doesn't know your data structure. Generates example content. Not prop-driven by default.

Solution

v0 Output (hardcoded):

function PricingCard() { return ( <Card> <CardHeader> <CardTitle>Pro Plan</CardTitle> <CardDescription>$29/month</CardDescription> </CardHeader> <CardContent> <ul> <li>Unlimited projects</li> <li>Priority support</li> </ul> </CardContent> </Card> ) }

Convert to Props:

interface PricingCardProps { name: string price: number billingPeriod: "monthly" | "yearly" features: string[] isPopular?: boolean onSelect: () => void }

function PricingCard({ name, price, billingPeriod, features, isPopular = false, onSelect }: PricingCardProps) { return ( <Card className={isPopular ? "border-primary" : ""}> <CardHeader> <CardTitle>{name}</CardTitle> <CardDescription> ${price}/{billingPeriod === "monthly" ? "mo" : "yr"} </CardDescription> </CardHeader> <CardContent> <ul> {features.map((feature) => ( <li key={feature}>{feature}</li> ))} </ul> <Button onClick={onSelect}> {isPopular ? "Get Started" : "Select Plan"} </Button> </CardContent> </Card> ) }

Ask v0 for prop-driven version:

"Make this component accept props for:

• plan name
• price
• feature list
• isPopular boolean

Add TypeScript interface"

Symptoms

• Can't reuse component
• Have to edit for each use
• No TypeScript props

Detection Pattern

function \w+\(\)

Accessibility Gaps

Id

accessibility-gaps

Summary

Generated code missing a11y features

Severity

high

Situation

Screen reader or keyboard issues

Why

v0 focuses on visual design. May skip aria labels. Keyboard navigation incomplete.

Solution

Common Issues and Fixes:

1. Missing labels

BAD

<Input placeholder="Email" />

GOOD

<Label htmlFor="email">Email</Label> <Input id="email" placeholder="you@example.com" />

2. Icon buttons without text

BAD

<Button><TrashIcon /></Button>

GOOD

<Button aria-label="Delete item"> <TrashIcon aria-hidden="true" /> </Button>

3. Missing focus states (usually OK with shadcn)

Verify focus-visible works

4. Interactive divs

BAD

<div onClick={handleClick}>Click me</div>

GOOD

<button onClick={handleClick}>Click me</button>

Or

<div role="button" tabIndex={0} onClick={handleClick} onKeyDown={(e) => e.key === "Enter" && handleClick()} > Click me </div>

5. Missing error announcements

BAD

{error && <p className="text-red-500">{error}</p>}

GOOD

{error && ( <p role="alert" className="text-red-500">{error}</p> )}

Ask v0 explicitly:

"Ensure accessibility:

• All inputs have associated labels
• Icon buttons have aria-label
• Focus states are visible
• Errors are announced to screen readers
• Keyboard navigation works for all interactive elements"

Symptoms

• Lighthouse accessibility warnings
• Screen reader can't navigate
• Keyboard focus invisible

Detection Pattern

aria-label|htmlFor|role=

Dark Mode Incomplete

Id

dark-mode-incomplete

Summary

Dark mode styling missing or broken

Severity

low

Situation

Component looks wrong in dark mode

Why

Some classes don't have dark variants. Hardcoded colors instead of CSS variables. Shadows don't adapt.

Solution

Check for proper dark mode classes

BAD - hardcoded colors

<div className="bg-white text-black">

GOOD - uses CSS variables

<div className="bg-background text-foreground">

BAD - no dark variant

<div className="bg-gray-100">

GOOD - with dark mode

<div className="bg-gray-100 dark:bg-gray-800">

Shadows in dark mode

BAD

<Card className="shadow-lg">

GOOD

<Card className="shadow-lg dark:shadow-none dark:border">

Ask v0 explicitly:

"Ensure full dark mode support:

• Use CSS variable colors (background, foreground, etc.)
• Add dark: variants for any custom colors
• Adjust shadows for dark mode
• Test contrast ratios"

Quick check - search for hardcoded colors

grep -E "(bg-white|bg-black|text-white|text-black|bg-gray-\d+)" component.tsx

Symptoms

• White backgrounds in dark mode
• Unreadable text
• Missing visual hierarchy

Detection Pattern

dark:|bg-background

V0 Dev - Validations

Hardcoded UI Strings

Id

hardcoded-strings

Severity

low

Type

regex

Pattern

>\s*[A-Z][a-z]+\s+(Plan|Package|Tier|Feature)

Message

Hardcoded strings should be converted to props for reusability.

Fix Action

Extract to component props or constants

Applies To

• *.tsx
• *.jsx

Input Without Label

Id

missing-input-labels

Severity

high

Type

regex

Pattern

<Input[^>]placeholder=[^>]/>

Negative Pattern

htmlFor|Label|aria-label

Message

Input fields should have associated labels for accessibility.

Fix Action

Add Label component with htmlFor matching input id

Applies To

• *.tsx
• *.jsx

Icon Button Without aria-label

Id

icon-button-no-label

Severity

high

Type

regex

Pattern

<Button[^>]>\s<\w+Icon

Negative Pattern

aria-label

Message

Icon-only buttons need aria-label for screen readers.

Fix Action

Add aria-label describing the button action

Applies To

• *.tsx
• *.jsx

Hardcoded Color Values

Id

hardcoded-colors

Severity

medium

Type

regex

Pattern

bg-(white|black|gray-\d00)\s

Negative Pattern

dark:

Message

Hardcoded colors break dark mode. Use CSS variable colors.

Fix Action

Replace with bg-background, bg-foreground, etc.

Applies To

• *.tsx
• *.jsx

Component Without TypeScript Props

Id

no-typescript-props

Severity

medium

Type

regex

Pattern

function \w+\(\)\s*\{

Message

Component should accept typed props for reusability.

Fix Action

Add interface and props parameter

Applies To

• *.tsx

List Without Key Prop

Id

missing-key-prop

Severity

high

Type

regex

Pattern

\.map\([^)]\)\s=>\s\([^k]<

Negative Pattern

key=

Message

List items must have unique key prop.

Fix Action

Add key={item.id} or key={index} to mapped elements

Applies To

• *.tsx
• *.jsx

Clickable Div Without Semantics

Id

clickable-div

Severity

medium

Type

regex

Pattern

<div[^>]*onClick

Negative Pattern

role=|tabIndex|onKeyDown

Message

Clickable divs need button role and keyboard handlers.

Fix Action

Use <button> or add role='button', tabIndex, onKeyDown

Applies To

• *.tsx
• *.jsx

Image Without Alt Text

Id

image-no-alt

Severity

high

Type

regex

Pattern

<img[^>]*src=

Negative Pattern

alt=

Message

Images must have alt text for accessibility.

Fix Action

Add descriptive alt text or alt='' for decorative images

Applies To

• *.tsx
• *.jsx