Export Overview

/export-product
```bash

The export command:

1. **Checks prerequisites** — Verifies required files exist
2. **Gathers all design assets** — Components, types, data, tokens
3. **Generates implementation instructions** — Including ready-to-use prompts
4. **Generates test instructions** — TDD specs for each section
5. **Creates the export package** — A complete `product-plan/` directory
6. **Creates a zip file** — `product-plan.zip` for easy download

## What's Included

The export package contains everything needed for implementation:

### Ready-to-Use Prompts

```bash
product-plan/prompts/
├── one-shot-prompt.md     # Prompt for full implementation
└── section-prompt.md      # Prompt template for section-by-section
```bash

Pre-written prompts you copy/paste into your coding agent. They reference the instruction files and guide your agent to review the designs and ask clarifying questions before implementing.

### Implementation Instructions

```bash
product-plan/
├── product-overview.md              # Product summary (always provide)
└── instructions/
    ├── one-shot-instructions.md     # All milestones combined
    └── incremental/                 # Milestone-by-milestone
        ├── 01-shell.md              # Design tokens + app shell
        ├── 02-[section-id].md       # One per section
        └── ...
```bash

<Info>
**product-overview.md** provides context about the full product—always include it with any implementation session.
</Info>

- **one-shot-instructions.md** combines all milestones into a single document
- **Incremental instructions** break the work into milestones for step-by-step implementation

### Design System

```bash
product-plan/design-system/
├── tokens.css           # CSS custom properties
├── tailwind-colors.md   # Tailwind configuration guide
└── fonts.md             # Google Fonts setup
```bash

### Data Shapes

```bash
product-plan/data-shapes/
├── README.md            # UI data contracts overview
└── overview.ts          # Combined type reference
```bash

<Note>
These types define what data the UI components expect. How you model, store, and fetch this data on the backend is an implementation decision.
</Note>

### Shell Components

```bash
product-plan/shell/
├── README.md            # Design intent
├── components/
│   ├── AppShell.tsx     # Main layout wrapper
│   ├── MainNav.tsx      # Navigation
│   ├── UserMenu.tsx     # User menu
│   └── index.ts         # Exports
└── screenshot.png       # Visual reference
```bash

### Section Components

For each section:

```bash
product-plan/sections/[section-id]/
├── README.md            # Feature overview, user flows
├── tests.md             # UI behavior test specs
├── components/
│   ├── [Component].tsx  # Exportable components
│   └── index.ts         # Exports
├── types.ts             # TypeScript interfaces
├── sample-data.json     # Test data
└── screenshot.png       # Visual reference
```bash

### Test Instructions

<Warning>
Each section includes a `tests.md` file with framework-agnostic test-writing instructions:

- **User flow tests** — Success and failure paths
- **Empty state tests** — Verifying UI when no records exist
- **Component interaction tests** — Specific UI elements and behaviors
</Warning>

These instructions describe WHAT to test, not HOW—your coding agent adapts them to your test framework (Jest, Vitest, Playwright, Cypress, RSpec, etc.).

## About the Components

Exported components are:

- **Props-based** — Accept data and callbacks via props, never import data directly
- **Portable** — Work with any React setup, no Design OS dependencies
- **Complete** — Full styling, responsive design, dark mode support
- **Production-ready** — Not prototypes or mockups

```tsx
// Components expect data and callbacks as props
<InvoiceList
  invoices={data}
  onView={(id) => navigate(`/invoices/${id}`)}
  onEdit={(id) => navigate(`/invoices/${id}/edit`)}
  onDelete={(id) => confirmDelete(id)}
  onCreate={() => navigate('/invoices/new')}
/>
```bash

Your implementation agent's job is to:

- Wire up callbacks to routing and API calls
- Replace sample data with real data from your backend
- Implement proper error handling and loading states
- Implement empty states when no records exist
- Build the backend APIs the components need
- Write tests based on the provided test instructions (TDD approach)

## Next Steps

<CardGroup cols={2}>
  <Card title="Export Package" icon="box" href="/export/export-package">
    Explore what's in the export package
  </Card>
  <Card title="Implementation Guide" icon="code" href="/export/implementation-guide">
    Learn how to implement your designs
  </Card>
  <Card title="Implementation Approaches" icon="route" href="/export/one-shot-vs-incremental">
    Choose between one-shot or incremental
  </Card>
</CardGroup>