# Discovery Report Generator

Generates a beautiful HTML report from Discovery phase artifacts using Claude Code.

## Overview

When all Discovery artifacts are complete, this skill analyzes them and generates an interactive HTML report with:
- Key Discovery Insights
- At-a-glance metrics (market size, score, competitors, etc.)
- Cards and infographic-style visuals
- Recommendations

## Trigger Conditions

Automatically triggers when Discovery phase has ALL of these files:
- `brief.md`
- `competitors.md`
- `target-market.md`
- `prd.md`
- `user-stories.md`

AND the output file does NOT exist:
- `discovery-report.html`

## Usage

```bash
# Triggered automatically by file watcher, or manually:
claude -p "$(cat skills/discovery-report/prompt.md)" \
  --allowedTools Read,Write \
  agency/products/{slug}/discovery/
```

## Output

Generates: `agency/products/{slug}/discovery/discovery-report.html`

The HTML file is:
- Self-contained (inline CSS, no external dependencies)
- Dark theme matching Symph Agency UI (#0a0a0a background, #d4ff00 accent)
- Responsive design
- Print-friendly

## Report Sections

1. **Header** — Product name, discovery completion date
2. **Executive Summary** — 2-3 sentence overview
3. **Opportunity Score Card** — Visual score breakdown (radar chart or bars)
4. **Market Snapshot** — TAM/SAM/SOM visualization
5. **Competitive Landscape** — Competitor cards with strengths/weaknesses
6. **Target Personas** — Visual persona cards
7. **Key Insights** — Bullet points with icons
8. **Recommendations** — Next steps with priority
9. **Risk Assessment** — Risk matrix or list

## Design System

```css
/* Colors */
--bg-primary: #0a0a0a;
--bg-card: #141414;
--border: #262626;
--text-primary: #fafafa;
--text-muted: #a1a1aa;
--accent: #d4ff00;
--green: #22c55e;
--yellow: #eab308;
--red: #ef4444;
--blue: #3b82f6;

/* Typography */
font-family: system-ui, -apple-system, sans-serif;

/* Cards */
border-radius: 12px;
border: 1px solid var(--border);
background: var(--bg-card);
```

**⚠️ IMAGE LIGHTBOX REQUIRED** — If the report includes any images (charts, visualizations), include the lightbox pattern so images are clickable and expand to full size. See `skills/design-pipeline/SKILL.md` for the complete CSS/JS lightbox snippet.
