# Html Report Builder

> Create polished HTML technical reports and multi-page documents for consulting deliverables. Features a professional design system with dark cover pages, warm cream content pages, Switzer + Cartograph CF typography, and a curated component library (KPI cards, data tables, callout boxes, recommendation cards, priority banners). Outputs standalone HTML that prints cleanly to PDF.

- **Type:** Skill
- **Install:** `agentstack add skill-thatrebeccarae-claude-marketing-html-report-builder`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [thatrebeccarae](https://agentstack.voostack.com/s/thatrebeccarae)
- **Installs:** 0
- **Category:** [AI & ML](https://agentstack.voostack.com/c/ai-and-ml)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [thatrebeccarae](https://github.com/thatrebeccarae)
- **Source:** https://github.com/thatrebeccarae/claude-marketing/tree/main/skills/html-report-builder

## Install

```sh
agentstack add skill-thatrebeccarae-claude-marketing-html-report-builder
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# HTML Report Builder

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

## Install

```bash
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](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

```css
: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](REFERENCE.md).

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [thatrebeccarae](https://github.com/thatrebeccarae)
- **Source:** [thatrebeccarae/claude-marketing](https://github.com/thatrebeccarae/claude-marketing)
- **License:** MIT

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-thatrebeccarae-claude-marketing-html-report-builder
- Seller: https://agentstack.voostack.com/s/thatrebeccarae
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.