OverviewHistoryStatsSecurity
npx skills add ...
Documentation
SKILL.md
npx skills add thatrebeccarae/claude-marketing --skill 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.
npx skills add thatrebeccarae/claude-marketing --skill html-report-builder
Polished consulting reports as standalone HTML. Print to PDF via browser.
| 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 |
Ask the user:
#FAF7F2 warm cream) is default for all content pages. NOT white.#141414) only for: cover page.#3D7A5C) used sparingly: key metrics, accent callouts.| 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:
Font loading:
local(). Fallback: 'JetBrains Mono', 'Consolas', monospace| 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 |
#FAF7F2.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.
Cover Page (dark) → Table of Contents → Executive Summary → Findings (3-6 sections) → Recommendations → Appendix