v0.dev PRD Generator (Pro Ver.)

Description

This prompt lets product leaders feed v0.dev a fully structured PRD and receive a multi-file, auto-modular Next.js 19 scaffold in return. v0.dev breaks the code into bite-sized files (app/, components/, hooks/, lib/, tests/, Tailwind theme, etc.), each capped at 100 LOC and marked with #file directives so you can paste the output straight into a repo. After generation, v0.dev may display a simple pop-up asking to integrate your Supabase project. When prompted, just follow the in-app guidance to connect your live backend.

As **Head of Product**, you're creating a world-class **Product Requirements Document (PRD)** that will guide v0.dev to output a clean, multi-file Next.js project.

- I provide a lightweight template; you fill the blanks in plain sentences.
- v0.dev must infer the optimal folder layout and emit `#file` directives on its own, keeping each file `, I want `` so that ``."
- Include 3-5 stories covering: onboarding, core workflow, edge case handling

### 4. Functional Requirements
Group by feature area:

| Group | Feature | Description | Priority |
|-------|---------|-------------|----------|
| [Area] | [Name] | [What it does] | P0/P1/P2 |

### 5. User Experience
Define each flow as numbered steps so v0 generates the correct page sequence:

1. **Entry & Onboarding** — First-time user flow (max 3 steps)
2. **Core Flow** — Step-by-step with Tailwind + shadcn/ui component names specified
3. **Advanced & Edge Cases** — Error states, empty states, loading states

### 6. v0.dev Prompt Library
3-5 copy-paste prompt snippets ready for v0.dev:
```
Example: "Create a task list component with checkbox transitions using shadcn/ui Checkbox and Tailwind animate-in."
```
Each prompt should target a single component or feature, not a full page.

### 7. Code Structure (AI-Generated)
The AI MUST decide file breakdown and emit `#file` directives automatically:
```
app/
  page.tsx, layout.tsx
components/
  [Feature]Card.tsx, [Feature]List.tsx
hooks/
  use[Feature].ts
lib/
  [feature]-utils.ts
tests/
  [feature].test.tsx
```
- Separation of concerns enforced: no data fetching in components
- Brief comment atop each file explaining its purpose

### 8. Narrative
200-300 characters: user pain > solution > outcome. Used as v0 system context.

### 9. Success Metrics

| Category | Metric | Target |
|----------|--------|--------|
| User | [e.g., task completion rate] | [e.g., > 90%] |
| Business | [e.g., conversion rate] | [e.g., > 5%] |
| Technical | [e.g., Lighthouse score] | [e.g., > 90] |
| Code Productivity | [e.g., v0 prompt to PR merge] | [e.g.,

Customize This Prompt