Agent skill

HTML Report Builder

by thatrebeccarae in thatrebeccarae/claude-marketing

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

MITAuto-check passedFrontend & Design

Install HTML Report Builder

skills CLI
$ npx skills add thatrebeccarae/claude-marketing --skill html-report-builder -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install thatrebeccarae/claude-marketing html-report-builder --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/thatrebeccarae/claude-marketing.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/html-report-builder .claude/skills/html-report-builder && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
html-report-builder
GitHub stars
162
Token cost
~1.2k tokens
SKILL.md length
444 words
Files
4
Skills in repo
55
Repo updated
First seen
Licence
MIT

At a glance

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

  • Works in 4 steps: What type of report? Audit, strategy,… → How many sections? Helps plan the… → What data do they have? Raw numbers, API… → …
  • Tasks that involve Design systems
  • SKILL.md covers Install, When to Use, Quick Reference and Before You Start, plus 5 more sections
  • Calls git

What it does

HTML Report Builder is an agent skill from thatrebeccarae/claude-marketing. 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.

Its SKILL.md is about 1.2k tokens, which your agent loads only when the skill is triggered. The skill folder holds 3 other files (for example `EXAMPLES.md` and `REFERENCE.md`).

It sits in Frontend & Design, covering Design systems, OKRs and executive reporting and HTML artifacts. The repository describes itself as: A full marketing department for Claude Code. Skill packs for Klaviyo, Shopify, GA4, Looker Studio, paid media, and more. Audit, optimize, and report using natural language. The licence is MIT.

When your agent uses it

  • Tasks that involve Design systems
  • Tasks that involve OKRs and executive reporting
  • Tasks that involve HTML artifacts

Example prompts

  • “/html-report-builder”

Workflow steps

4 steps, taken from the first numbered list in SKILL.md.

  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.

What it can do on your machine

Read from SKILL.md and the folder at commit a8a63ec. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Shell commands in SKILL.md call:

    • git

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md. Its commands use git, which can reach the network depending on how they are called.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

HTML Report Builder loads about 1.2k tokens when it runs. Until then it costs about 100 tokens; SKILL.md has 444 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~100
When it runs · the whole SKILL.md, loaded when a task matches
~1.2k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from thatrebeccarae/claude-marketing at commit a8a63ec, republished under its MIT licence (© thatrebeccarae). 444 words, ~1,233 tokens.

Download SKILL.mdSave it as .claude/skills/html-report-builder/SKILL.md (or your agent's skills folder). This skill also uses 3 other files; get the full folder from GitHub.
name
html-report-builder
description
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.
license
MIT
origin
custom
author
Rebecca Rae Barton
author_url
https://github.com/thatrebeccarae
metadata.version
1.0.0
metadata.category
reporting
metadata.domain
consulting
metadata.updated
2026-03-13
metadata.tested
2026-03-17
metadata.tested_with
Claude Code v2.1

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

TaskApproach
Create report from scratchRead REFERENCE.md for CSS + HTML patterns
Add a new componentCompose from existing components in REFERENCE.md
Export to PDFOpen in browser → Print → Save as PDF (Cmd+P)
Update design tokensEdit 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
RoleFontWeightSize
Report titleSwitzerLight (300)48-64px
Section headingSwitzerRegular (400)28-32px
Subsection headingSwitzerMedium (500)20-22px
Body textSwitzerRegular (400)16-17px
KPI numberCartograph CFBold (700)36-48px
Data labelCartograph CFRegular (400)13px
Table dataCartograph CFRegular (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
Show full SKILL.md (152 more words)Show less

Document Structure

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

Component Library

ComponentUse
KPI CardBig number + label + detail
Data TableStyled table with mono numbers, severity colors
Callout BoxHighlighted insight or bottom-line statement
Recommendation CardNumbered action with impact + effort badges
Priority BannerCritical/warning/info alert bar
Section DividerVisual break between major sections
Bullet ListStyled list with custom markers
Numbered ListOrdered 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.

© thatrebeccarae, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 3 other files in skills/html-report-builder of thatrebeccarae/claude-marketing.

  • SKILL.md
  • EXAMPLES.md
  • LICENSE
  • REFERENCE.md

Open the folder on GitHubat commit a8a63ec

Compare with similar skills

HTML Report Builder next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

HTML Report Builder compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
HTML Report Builder this skillthatrebeccarae/claude-marketing162—~1.2kAutomated safety check: PassMIT
Design Systemaffaan-m/ECC275k—~698Automated safety check: PassMIT
Transilience Report Styletransilienceai/communitytools562—~6.3kAutomated safety check: PassMIT
Minimax PDFpoco-ai/poco-claw1.4k6 repos~2.1kAutomated safety check: PassMIT
Frontend Textbooksonepixelaway/frontend-textbooks106—~3.5kAutomated safety check: PassMIT
Impeccablebestofjs/bestofjs3.1k27 repos~2.6kAutomated safety check: PassMIT

Similar skills

  • Design System

    affaan-m/ECC

    Generate a design system from an existing codebase or audit one for visual consistency: extract tokens (colors, typography, spacing, shadows) into design-tokens.json and CSS custom properties with…

    275k GitHub stars~698 tokensUpdated 3 days ago
    Frontend & DesignAuto-check passed
  • Transilience Report Style

    transilienceai/communitytools

    Threat Intelligence Report Design System — ReportLab-based PDF generation for A4 reports with Transilience branding, typography, and layout standards.

    562 GitHub stars~6.3k tokensUpdated 2 mo ago
    Frontend & DesignAuto-check passed
  • Minimax PDF

    poco-ai/poco-claw

    A skill your agent uses when visual quality and design identity matter for a PDF.

    1.4k GitHub starsUsed in 6 repos~2.1k tokens
    Documents & OfficeAuto-check passed
  • Frontend Textbooks

    onepixelaway/frontend-textbooks

    Turns a manuscript into a designed US Letter HTML book with a matching PDF, original cover art and checks that the manuscript text is preserved.

    106 GitHub stars~3.5k tokensUpdated 2 mo ago
    Documents & OfficeAuto-check passed
  • Impeccable

    bestofjs/bestofjs

    A skill your agent uses when the user wants to design, redesign, shape, critique, audit, polish, clarify, distill, harden, optimize, adapt, animate, colorize, extract, or otherwise improve a…

    3.1k GitHub starsUsed in 27 repos~2.6k tokens
    Frontend & DesignAuto-check passed
  • Design System

    Ohh-889/skyroc

    Token architecture, component specifications, and slide generation.

    795 GitHub starsUsed in 11 repos~1.7k tokens
    Frontend & DesignAuto-check passed

More from thatrebeccarae/claude-marketing

All 55 skills in this repo
  • Google Analytics

    thatrebeccarae/claude-marketing

    Analyze Google Analytics data, review website performance metrics, identify traffic patterns, and suggest data-driven improvements.

    162 GitHub starsUsed in 4 repos~1.3k tokens
    Auto-check: notes
  • Content Creator

    thatrebeccarae/claude-marketing

    Comprehensive content marketing toolkit with brand voice analysis, SEO optimization scripts, content frameworks, social media strategy, and content calendar planning.

    162 GitHub stars~1.1k tokensUpdated 4 mo ago
    Auto-check passed
  • Klaviyo Analyst

    thatrebeccarae/claude-marketing

    Klaviyo marketing operations and analyst expertise. An agent skill from thatrebeccarae/claude-marketing.

    162 GitHub stars~5k tokensUpdated 4 mo ago
    Auto-check: notes
  • Klaviyo Developer

    thatrebeccarae/claude-marketing

    Klaviyo API and developer integration expertise. An agent skill from thatrebeccarae/claude-marketing.

    162 GitHub stars~4.9k tokensUpdated 4 mo ago
    Auto-check: notes
  • Looker Studio

    thatrebeccarae/claude-marketing

    Looker Studio (formerly Google Data Studio) expertise. An agent skill from thatrebeccarae/claude-marketing.

    162 GitHub stars~3.6k tokensUpdated 4 mo ago
    Auto-check: notes
  • Shopify

    thatrebeccarae/claude-marketing

    Shopify e-commerce platform marketing expertise. An agent skill from thatrebeccarae/claude-marketing.

    162 GitHub stars~2.4k tokensUpdated 4 mo ago
    Auto-check: notes

Questions about HTML Report Builder

What does HTML Report Builder do?

Create polished HTML technical reports and multi-page documents for consulting deliverables. HTML Report Builder is an agent skill from thatrebeccarae/claude-marketing. Create polished HTML technical reports and multi-page documents for consulting deliverables.

When should I use HTML Report Builder?

HTML Report Builder fits situations like: tasks that involve Design systems; tasks that involve OKRs and executive reporting; tasks that involve HTML artifacts.

How do I install HTML Report Builder in Claude Code?

Run `npx skills add thatrebeccarae/claude-marketing --skill html-report-builder -a claude-code`. Or copy the skill folder (skills/html-report-builder in thatrebeccarae/claude-marketing) into .claude/skills/html-report-builder in your project. Claude Code loads it when a task matches its description.

How do I install HTML Report Builder in Codex?

Run `npx skills add thatrebeccarae/claude-marketing --skill html-report-builder -a codex`. Or copy the skill folder (skills/html-report-builder in thatrebeccarae/claude-marketing) into .agents/skills/html-report-builder in your project. Codex loads it when a task matches its description.

Can I use HTML Report Builder in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add thatrebeccarae/claude-marketing --skill html-report-builder -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/html-report-builder, .gemini/skills/html-report-builder, .github/skills/html-report-builder and .opencode/skills/html-report-builder in your project.

What does HTML Report Builder need to run?

Going by SKILL.md and its folder, HTML Report Builder needs the command-line tools its instructions call (git).

Does HTML Report Builder access the network?

SKILL.md contains no URLs. Its commands use git, which can reach the network depending on how they are called. This is read from the text; nothing was executed.

Is HTML Report Builder safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does HTML Report Builder use?

HTML Report Builder is published under the MIT licence (declared in SKILL.md). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does HTML Report Builder use?

About 1.2k tokens (SKILL.md is roughly 4.9k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to HTML Report Builder?

Skills that share tags, products or a category with HTML Report Builder: Design System (affaan-m/ECC, 275k stars), Transilience Report Style (transilienceai/communitytools, 562 stars), Minimax PDF (poco-ai/poco-claw, 1.4k stars) and Frontend Textbooks (onepixelaway/frontend-textbooks, 106 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains HTML Report Builder?

thatrebeccarae (a GitHub user) maintains it in thatrebeccarae/claude-marketing, which has 162 GitHub stars. The repository holds 55 skills in this directory. The repository was last updated on May 14, 2026.

Source: thatrebeccarae/claude-marketing on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.