# Discovery Pipeline Skill

Orchestrates the full product discovery process with sequential agent tasks.

## Overview

When a product is created from an opportunity, this pipeline runs 5 sequential steps. **After each artifact is created, immediately generate an HTML visualization card.**

1. **Brief** → `brief.md` → `brief.html`
2. **Competitors** → `competitors.md` → `competitors.html`
3. **Target Market** → `target-market.md` → `target-market.html`
4. **PRD** → `prd.md` → `prd.html`
5. **User Stories** → `user-stories.md` → `user-stories.html`

Each step reads outputs from previous steps and updates `progress.md` in real-time.

## HTML Visualization (IMPORTANT)

After writing each markdown artifact, **immediately write the corresponding HTML file** in the same step. This provides real-time visual feedback in the UI.

### HTML Design System

```css
/* Dark theme - use these exact values */
--bg: #0a0a0a;
--card: #141414;
--border: #262626;
--text: #fafafa;
--muted: #a1a1aa;
--accent: #d4ff00;
```

### HTML Template Structure

```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: system-ui, -apple-system, sans-serif;
      background: #0a0a0a;
      color: #fafafa;
      padding: 24px;
      line-height: 1.6;
    }
    .card {
      background: #141414;
      border: 1px solid #262626;
      border-radius: 12px;
      padding: 24px;
      margin-bottom: 16px;
    }
    .badge {
      background: rgba(212, 255, 0, 0.1);
      color: #d4ff00;
      padding: 4px 12px;
      border-radius: 20px;
      font-size: 0.75rem;
      font-weight: 500;
      display: inline-block;
    }
    .metric-value {
      font-size: 1.5rem;
      font-weight: 700;
      color: #d4ff00;
    }
    .metric-label {
      font-size: 0.75rem;
      color: #a1a1aa;
      text-transform: uppercase;
    }
    .grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 16px;
    }
    .muted { color: #a1a1aa; }
    .highlight { color: #d4ff00; }
    h1 { font-size: 1.5rem; margin-bottom: 16px; }
    h2 { font-size: 1.25rem; margin-bottom: 12px; color: #d4ff00; }
    h3 { font-size: 1rem; margin-bottom: 8px; }
    p { margin-bottom: 12px; }
    ul { margin-left: 20px; margin-bottom: 12px; }
    li { margin-bottom: 4px; }
    
    /* Image Lightbox Styles */
    .lightbox-img {
      cursor: zoom-in;
      transition: transform 0.2s ease, box-shadow 0.2s ease;
    }
    .lightbox-img:hover {
      transform: scale(1.02);
      box-shadow: 0 8px 32px rgba(212, 255, 0, 0.15);
    }
    .lightbox-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.95);
      display: none;
      justify-content: center;
      align-items: center;
      z-index: 9999;
      cursor: zoom-out;
      padding: 20px;
    }
    .lightbox-overlay.active {
      display: flex;
    }
    .lightbox-overlay img {
      max-width: 95%;
      max-height: 95%;
      object-fit: contain;
      border-radius: 8px;
      box-shadow: 0 0 60px rgba(212, 255, 0, 0.2);
    }
    .lightbox-close {
      position: fixed;
      top: 20px;
      right: 20px;
      color: #fafafa;
      font-size: 32px;
      cursor: pointer;
      z-index: 10000;
      opacity: 0.7;
      transition: opacity 0.2s;
    }
    .lightbox-close:hover {
      opacity: 1;
    }
  </style>
</head>
<body>
  <!-- Content here - extract key data, use cards and grids -->
  
  <!-- Lightbox Overlay (add before </body> if page has images) -->
  <div class="lightbox-overlay" id="lightbox">
    <span class="lightbox-close">&times;</span>
    <img src="" alt="Expanded view" id="lightbox-img">
  </div>
  
  <script>
  // Lightbox functionality - auto-applies to all images
  document.addEventListener('DOMContentLoaded', function() {
    const lightbox = document.getElementById('lightbox');
    const lightboxImg = document.getElementById('lightbox-img');
    const closeBtn = document.querySelector('.lightbox-close');
    
    document.querySelectorAll('img:not(#lightbox-img)').forEach(img => {
      img.classList.add('lightbox-img');
      img.addEventListener('click', function() {
        lightboxImg.src = this.src;
        lightbox.classList.add('active');
      });
    });
    
    lightbox.addEventListener('click', function(e) {
      if (e.target === lightbox || e.target === closeBtn) {
        lightbox.classList.remove('active');
      }
    });
    
    document.addEventListener('keydown', function(e) {
      if (e.key === 'Escape') lightbox.classList.remove('active');
    });
  });
  </script>
</body>
</html>
```

**Note:** The lightbox automatically makes all images clickable. On click, they expand to full size in a modal overlay. Press Escape or click outside to close.

### What Each HTML Should Show

**brief.html:**
- Product name and sector badge
- Key metrics (market size, score)
- Problem/solution summary cards
- Differentiators list

**competitors.html:**
- Competitor cards in a grid (name, what they do, strengths in green, weaknesses in red)
- Positioning summary
- Gap/opportunity highlight

**target-market.html:**
- TAM/SAM/SOM metrics row
- Persona cards (2-3) with name, role, pain points
- Geographic focus

**prd.html:**
- Feature cards with priority badges (P0 red, P1 orange, P2 blue)
- MVP scope summary
- Success metrics

**user-stories.html:**
- Epic headers
- Story cards showing user story format
- Priority indicators
- Count summary

## Usage

Triggered via job file in `agency/jobs/` with action `discovery-pipeline`:

```yaml
id: discovery-pipeline-{slug}-{timestamp}
action: discovery-pipeline
product_slug: health-tracking-ring-dashboard
opportunity:
  name: Health Tracking Ring Dashboard
  sector: Health Tech
  description: ...
  score: 4.3
status: pending
created_at: 2026-02-02T19:30:00Z
```

## Pipeline Execution

### Step 1: Brief (20%)

**Input:** Opportunity data from job
**Output:** `brief.md` + `brief.html`

Write comprehensive product brief with:
- Clear problem statement (be specific, not generic)
- Proposed solution with 3-5 key features
- Why Symph is positioned to build this
- Initial hypotheses to validate
- Success criteria

Then immediately write `brief.html` with:
- Product header with sector badge
- Key metrics cards
- Problem/Solution side-by-side
- Differentiators list

**After writing both files:**
```
Update progress.md: [TIMESTAMP] ✓ brief.md + brief.html generated
Update workflow.json: progress=20
```

### Step 2: Competitors (40%)

**Input:** brief.md
**Output:** `competitors.md` + `competitors.html`

Research and document:
- 5-8 competitors (direct and indirect)
- Their strengths and weaknesses
- Pricing if available
- Gaps we can fill

Use `web_search` if available to find real competitors.

Then immediately write `competitors.html` with:
- Grid of competitor cards
- Strength/weakness badges
- Market positioning summary

**After writing both files:**
```
Update progress.md: [TIMESTAMP] ✓ competitors.md + competitors.html generated
Update workflow.json: progress=40
```

### Step 3: Target Market (60%)

**Input:** brief.md, competitors.md
**Output:** `target-market.md` + `target-market.html`

Define:
- TAM/SAM/SOM with estimates
- 2-4 user personas with details
- Geographic focus
- Pain points ranked by severity

Then immediately write `target-market.html` with:
- TAM/SAM/SOM visualization
- Persona cards with avatars
- Pain points list

**After writing both files:**
```
Update progress.md: [TIMESTAMP] ✓ target-market.md + target-market.html generated
Update workflow.json: progress=60
```

### Step 4: PRD (80%)

**Input:** All previous artifacts
**Output:** `prd.md` + `prd.html`

Synthesize into PRD with:
- Executive summary
- Problem & target users
- MVP features (P0/P1/P2)
- Technical requirements
- Success metrics
- Timeline

Then immediately write `prd.html` with:
- Feature cards with priority badges
- Metrics summary
- Tech stack if mentioned

**After writing both files:**
```
Update progress.md: [TIMESTAMP] ✓ prd.md + prd.html generated
Update workflow.json: progress=80
```

### Step 5: User Stories (100%)

**Input:** prd.md, target-market.md
**Output:** `user-stories.md` + `user-stories.html`

Generate user stories:
- Organized by epic
- Full format: As a [user], I want [goal], so that [benefit]
- Acceptance criteria for each
- Priority tags

Then immediately write `user-stories.html` with:
- Epic sections
- Story cards
- Count summary

**After writing both files:**
```
Update progress.md: [TIMESTAMP] ✓ user-stories.md + user-stories.html generated
Update workflow.json: progress=100, status="complete"
```

## Progress Tracking

After each step, append to `progress.md`:

```
[2026-02-02 19:35:00] ✓ brief.md + brief.html generated
[2026-02-02 19:36:30] ✓ competitors.md + competitors.html generated
[2026-02-02 19:38:00] ✓ target-market.md + target-market.html generated
[2026-02-02 19:40:00] ✓ prd.md + prd.html generated
[2026-02-02 19:42:00] ✓ user-stories.md + user-stories.html generated
[2026-02-02 19:42:00] ✓ Discovery complete!
```

Update `workflow.json` after each step:
```json
{
  "status": "in-progress",  // or "complete" at end
  "progress": 40,           // 20, 40, 60, 80, 100
  "updated_at": "2026-02-02T19:36:30.000Z"
}
```

## Error Handling

If a step fails:
1. Log error to progress.md
2. Set workflow status to "error"
3. Don't proceed to next step
4. Human can review and retry

## Key Points

1. **Write HTML immediately after each markdown** — don't wait until the end
2. **Use the exact design system** — dark theme, #d4ff00 accent
3. **Extract key data for HTML** — don't just dump the markdown, create a visual summary
4. **Update progress after each pair** — so UI shows real-time updates
5. **Use web_search when available** — for competitor and market research
