/export-product

Export Product

You are helping the user export their complete product design as a handoff package for implementation. This generates all files needed to integrate the UI designs into a real codebase.

Step 1: Check Prerequisites

Verify the minimum requirements exist:

**Required:**

• `/product/product-overview.md` — Product overview
• `/product/product-roadmap.md` — Sections defined
• At least one section with screen designs in `src/sections/[section-id]/`

**Recommended (show warning if missing):**

• `/product/data-shape/data-shape.md` — Product entities
• `/product/design-system/colors.json` — Color tokens
• `/product/design-system/typography.json` — Typography tokens
• `src/shell/components/AppShell.tsx` — Application shell

If required files are missing:

"To export your product, you need at minimum:

• A product overview (`/product-vision`)
• A roadmap with sections (`/product-roadmap`)
• At least one section with screen designs

Please complete these first."

Stop here if required files are missing.

If recommended files are missing, show warnings but continue:

"Note: Some recommended items are missing:

• [ ] Product entities — Run `/data-shape` for consistent entity naming
• [ ] Design tokens — Run `/design-tokens` for consistent styling
• [ ] Application shell — Run `/design-shell` for navigation structure

You can proceed without these, but they help ensure a complete handoff."

Step 2: Gather Export Information

Read all relevant files:

1. `/product/product-overview.md` — Product name, description, features 2. `/product/product-roadmap.md` — List of sections in order 3. `/product/data-shape/data-shape.md` (if exists) 4. `/product/design-system/colors.json` (if exists) 5. `/product/design-system/typography.json` (if exists) 6. `/product/shell/spec.md` (if exists) 7. For each section: `spec.md`, `data.json`, `types.ts` 8. List screen design components in `src/sections/` and `src/shell/`

Step 3: Create Export Directory Structure

Create the `product-plan/` directory with this structure:

product-plan/
├── README.md                    # Quick start guide
├── product-overview.md          # Product summary (always provide)
│
├── prompts/                     # Ready-to-use prompts for coding agents
│   ├── one-shot-prompt.md       # Prompt for full implementation
│   └── section-prompt.md        # Prompt template for section-by-section
│
├── instructions/                # Implementation instructions
│   ├── one-shot-instructions.md # All milestones combined
│   └── incremental/             # For milestone-by-milestone implementation
│       ├── 01-shell.md
│       ├── 02-[first-section].md
│       ├── 03-[second-section].md
│       └── ...
│
├── design-system/               # Design tokens
│   ├── tokens.css
│   ├── tailwind-colors.md
│   └── fonts.md
│
├── data-shapes/                 # UI data contracts
│   ├── README.md
│   └── overview.ts
│
├── shell/                       # Shell components
│   ├── README.md
│   ├── components/
│   │   ├── AppShell.tsx
│   │   ├── MainNav.tsx
│   │   ├── UserMenu.tsx
│   │   └── index.ts
│   └── screenshot.png (if exists)
│
└── sections/                    # Section components
    └── [section-id]/
        ├── README.md
        ├── tests.md               # UI behavior test specs
        ├── components/
        │   ├── [Component].tsx
        │   └── index.ts
        ├── types.ts
        ├── sample-data.json
        └── screenshot.png (if exists)

Step 4: Generate product-overview.md

Create `product-plan/product-overview.md`:

# [Product Name] — Product Overview

## Summary

[Product description from product-overview.md]

## Planned Sections

[Ordered list of sections from roadmap with descriptions]

1. **[Section 1]** — [Description]
2. **[Section 2]** — [Description]
...

## Product Entities

[If data shape exists: list entity names and brief descriptions]
[If not: "Entities to be defined during implementation"]

## Design System

**Colors:**
- Primary: [color or "Not defined"]
- Secondary: [color or "Not defined"]
- Neutral: [color or "Not defined"]

**Typography:**
- Heading: [font or "Not defined"]
- Body: [font or "Not defined"]
- Mono: [font or "Not defined"]

## Implementation Sequence

Build this product in milestones:

1. **Shell** — Set up design tokens and application shell
2. **[Section 1]** — [Brief description]
3. **[Section 2]** — [Brief description]
...

Each milestone has a dedicated instruction document in `product-plan/instructions/`.

Step 5: Generate Milestone Instructions

Each milestone instruction file should begin with the following preamble (adapt the milestone-specific details):

---

## About This Handoff

**What you're receiving:**
- Finished UI designs (React components with full styling)
- Product requirements and user flow specifications
- Design system tokens (colors, typography)
- Sample data showing the shape of data components expect
- Test specs focused on user-facing behavior

**Your job:**
- Integrate these components into your application
- Wire up callback props to your routing and business logic
- Replace sample data with real data from your backend
- Implement loading, error, and empty states

The components are props-based — they accept data and fire callbacks. How you architect the backend, data layer, and business logic is up to you.

---

01-shell.md

Place in `product-plan/instructions/incremental/01-shell.md`:

# Milestone 1: Shell

> **Provide alongside:** `product-overview.md`
> **Prerequisites:** None

[Include the preamble above]

## Goal

Set up the design tokens and application shell — the persistent chrome that wraps all sections.

## What to Implement

### 1. Design Tokens

[If design tokens exist:]
Configure your styling system with these tokens:

- See `product-plan/design-system/tokens.css` for CSS custom properties
- See `product-plan/design-system/tailwind-colors.md` for Tailwind configuration
- See `product-