SkillsAdd

thatrebeccarae/claude-marketing

html-report-builder

Create polished HTML technical reports and multi-page documents for consulting deliverables.

First seen Apr 8, 2026

Installation

$ npx skills add thatrebeccarae/claude-marketing --skill html-report-builder
View on skills.sh ↗ GitHub repository ↗

Summary

  • 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.

Similar popular skills

Related neighbors and high-traction skills in the same topics — useful to compare before installing.

azure-rbac Shared topics
microsoft/azure-skills 489K installs
mcp-builder Similar name
anthropics/skills

Guide for creating high-quality MCP (Model Context Protocol) servers that enable LLMs to intera…

112.3K installs
web-artifacts-builder Similar name
anthropics/skills

Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern fr…

98.9K installs
mcp-apps-builder Similar name
mcp-use/mcp-use

Build, modify, debug, migrate, review, or verify TypeScript MCP servers and MCP Apps with mcp-u…

27.6K installs
mcp-builder Similar name
mcp-use/mcp-use

Build, modify, debug, migrate, review, or verify TypeScript MCP servers and MCP Apps with mcp-u…

9.6K installs
prompt-builder Similar name
github/awesome-copilot 9.5K installs

Also in this package

Other skills from thatrebeccarae/claude-marketing · top by installs.

npx skills add thatrebeccarae/claude-marketing
facebook-ads 128 google-tag-manager 108 competitor-ads-analyst 105 social-media-strategy 99 pro-deck-builder 98 looker-studio 94 copywriting-frameworks 90 tiktok-ads 89 content-pipeline 87 icp-research 86

Browse all from thatrebeccarae/claude-marketing

More details

Agent compatibility

Declared targets from SKILL.md / docs. Unmarked agents are not listed — the skill may still install via the CLI.

Claude Code Declared
Cursor Not declared
Codex Not declared
GitHub Copilot Not declared
Windsurf Not declared
Gemini CLI Not declared
Cline Not declared
OpenCode Not declared

Repository health

Stars 133
License LICENSE
Default branch main
Open issues 0
Status Active

Skill metadata

Parsed from SKILL.md frontmatter.

Version1.0.0
LicenseMIT
Declared agents claude-code
More metadata
version
1.0.0
category
reporting
domain
consulting
updated
2026-03-13
tested
2026-03-17
tested_with
Claude Code v2.1

Package contents

Files included with this skill beyond the listing page.

  • skill md SKILL.md 4,954 B
  • docs SUMMARY.md 407 B

History

  1. First seen on skills.sh
  2. First recorded snapshot · 118 installs

SKILL.md

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