HTML Report Builder

Polished consulting reports as standalone HTML. Print to PDF via browser.

Install

git clone https://github.com/thatrebeccarae/claude-marketing.git && cp -r claude-marketing/skills/html-report-builder ~/.claude/skills/

When to Use

• Audit reports, performance analyses, strategy documents
• Any multi-section document that needs professional formatting
• When the deliverable is a report (not slides — use pro-deck-builder for decks)

Quick Reference

Before You Start

Ask the user:

1. What type of report? Audit, strategy, performance review, case study?
2. How many sections? Helps plan the document structure.
3. What data do they have? Raw numbers, API exports, spreadsheets?
4. Where should the file be saved? Get an explicit path.

Design System

Color Tokens

:root {
  /* Dark mode (cover page only) */
  --bg-deep: #141414;
  --bg-surface: #1E1E1E;
  --bg-elevated: #282828;
  --text-bright: #f0f3f6;
  --text-secondary-dark: #9ca3af;

  /* Light mode (content pages — the default) */
  --bg-light: #FAF7F2;
  --bg-light-surface: #F2EDE6;
  --text-primary: #0f0e0e;
  --text-secondary: #57606a;
  --text-muted: #8b949e;

  /* Brand accent */
  --accent: #3D7A5C;
  --accent-light: #6AB88A;

  /* Semantic */
  --green: #2e8b57;
  --red: #c0392b;
  --amber: #D97706;
}

Color Rules

• Light mode (#FAF7F2 warm cream) is default for all content pages. NOT white.
• Dark mode (#141414) only for: cover page.
• Accent green (#3D7A5C) used sparingly: key metrics, accent callouts.
• Semantic colors (green/amber/red) only for status indicators, never decoration.

Typography

Critical rules:

1. Headlines use Light (300), NOT Bold. Light at large sizes = confident, premium.
2. Cartograph CF for ALL numeric/data content. KPIs, table numbers, labels.
3. Negative tracking on headlines. -0.03em to -0.04em.
4. Positive tracking on ALL CAPS labels. +0.08em to +0.1em.

Font loading:

• Switzer: free from Fontshare CDN
• Cartograph CF: commercial, loaded via local(). Fallback: 'JetBrains Mono', 'Consolas', monospace

Document Structure

Cover Page (dark) → Table of Contents → Executive Summary → Findings (3-6 sections) → Recommendations → Appendix

Component Library

Narrative Rules

1. Lead with the number. Metric-first, explanation second.
2. One insight per section. If a section makes two points, split it.
3. Benchmark everything. Never show a metric without context.
4. Color = meaning. Green/amber/red only for performance indicators.
5. No white backgrounds. Always warm cream #FAF7F2.
6. No bold headlines. Switzer Light (300) for report title and hero headings.

PDF Export

Open the HTML file in Chrome/Safari → Cmd+P → Save as PDF. Set margins to "None" and enable "Background graphics."

For complete CSS framework and HTML patterns, see [REFERENCE.md](REFERENCE.md).