1# HTML Generation: McKinsey Style Report
2 
3## Design Principles
4 
5- Sharp corners (NO border-radius)
6- Muted corporate colors (navy #003d5c, gray #f8f9fa)
7- Ultra-compact layout
8- Info-first structure
9- 14px base font, compact spacing
10- No decorative gradients or colors
11- NO EMOJIS in final HTML
12 
13---
14 
15## Generation Steps
16 
17### Step 1: Read McKinsey Template
18Load template from: `./templates/mckinsey_report_template.html`
19 
20### Step 2: Extract Key Metrics
21Extract 3-4 key quantitative findings for dashboard display at top.
22 
23### Step 3: Convert MD to HTML
24 
25Use Python script:
26```bash
27cd ~/.claude/skills/deep-research
28python scripts/md_to_html.py [markdown_report_path]
29```
30 
31**Script outputs two parts:**
32- **Part A ({{CONTENT}}):** All sections except Bibliography
33- **Part B ({{BIBLIOGRAPHY}}):** Bibliography section only
34 
35**Script handles all conversion:**
36- Headers: `##` -> `<div class="section"><h2 class="section-title">`
37- Headers: `###` -> `<h3 class="subsection-title">`
38- Lists: Markdown bullets -> `<ul><li>` with nesting
39- Tables: Markdown tables -> `<table>` with thead/tbody
40- Paragraphs: Text wrapped in `<p>` tags
41- Bold/italic: `**text**` -> `<strong>`, `*text*` -> `<em>`
42- Citations: [N] preserved for tooltip conversion
43 
44### Step 4: Add Citation Tooltips (Optional)
45 
46Attribution Gradients - wrap each [N] citation:
47```html
48<span class="citation">[N]
49  <span class="citation-tooltip">
50    <div class="tooltip-title">[Source Title]</div>
51    <div class="tooltip-source">[Author/Publisher]</div>
52    <div class="tooltip-claim">
53      <div class="tooltip-claim-label">Supports Claim:</div>
54      [Extract sentence with this citation]
55    </div>
56  </span>
57</span>
58```
59NOTE: This step is optional for speed. Basic [N] citations are sufficient.
60 
61### Step 5: Replace Template Placeholders
62 
63| Placeholder | Content |
64|-------------|---------|
65| {{TITLE}} | Report title (from first ## heading) |
66| {{DATE}} | Generation date (YYYY-MM-DD) |
67| {{SOURCE_COUNT}} | Number of unique sources |
68| {{METRICS_DASHBOARD}} | Metrics HTML from step 2 |
69| {{CONTENT}} | HTML from Part A |
70| {{BIBLIOGRAPHY}} | HTML from Part B |
71 
72### Step 6: Verify HTML
73 
74```bash
75python scripts/verify_html.py --html [html_path] --md [md_path]
76```
77- Pass: Proceed to open
78- Fail: Fix errors and re-run
79 
80### Step 7: Open in Browser
81```bash
82open [html_path]
83```
84 
85---
86 
87## PDF Generation
88 
89**Option A: WeasyPrint Direct (Preferred)**
90 
911. Create print-optimized HTML following `./reference/weasyprint_guidelines.md`
922. Critical CSS:
93   - `page-break-inside: avoid` on tables, boxes
94   - `page-break-after: avoid` on headings
95   - `orphans: 3; widows: 3` on paragraphs
96   - Use `display: table` not Flexbox/Grid
97   - Font sizes in pt (10pt body, 8pt citations)
983. Generate: `weasyprint [html_path] [pdf_path]`
994. Open: `open [pdf_path]`
100 
101**Option B: generating-pdf Skill**
102 
103Use Task tool with general-purpose agent, invoke generating-pdf skill.
104