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

Task	Approach
Create report from scratch	Read REFERENCE.md for CSS + HTML patterns
Add a new component	Compose from existing components in REFERENCE.md
Export to PDF	Open in browser → Print → Save as PDF (Cmd+P)
Update design tokens	Edit CSS custom properties in :root block

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

Role	Font	Weight	Size
Report title	Switzer	Light (300)	48-64px
Section heading	Switzer	Regular (400)	28-32px
Subsection heading	Switzer	Medium (500)	20-22px
Body text	Switzer	Regular (400)	16-17px
KPI number	Cartograph CF	Bold (700)	36-48px
Data label	Cartograph CF	Regular (400)	13px
Table data	Cartograph CF	Regular (400)	14px

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

Component	Use
KPI Card	Big number + label + detail
Data Table	Styled table with mono numbers, severity colors
Callout Box	Highlighted insight or bottom-line statement
Recommendation Card	Numbered action with impact + effort badges
Priority Banner	Critical/warning/info alert bar
Section Divider	Visual break between major sections
Bullet List	Styled list with custom markers
Numbered List	Ordered list with accent-colored numbers

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.