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…
Create polished HTML technical reports and multi-page documents for consulting deliverables.
$ npx skills add thatrebeccarae/claude-marketing --skill html-report-builder -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install thatrebeccarae/claude-marketing html-report-builder --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ 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-srcUse ~/.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/
Install the "html-report-builder" agent skill from https://github.com/thatrebeccarae/claude-marketing/tree/main/skills/html-report-builder into .claude/skills/html-report-builder/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "html-report-builder", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/thatrebeccarae/claude-marketing/tree/main/skills/html-report-builderType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add thatrebeccarae/claude-marketing --skill html-report-builder -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install thatrebeccarae/claude-marketing html-report-builder --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/thatrebeccarae/claude-marketing.git skills-src && mkdir -p .agents/skills && cp -r skills-src/skills/html-report-builder .agents/skills/html-report-builder && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "html-report-builder" agent skill from https://github.com/thatrebeccarae/claude-marketing/tree/main/skills/html-report-builder into .agents/skills/html-report-builder/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "html-report-builder", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add thatrebeccarae/claude-marketing --skill html-report-builder -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install thatrebeccarae/claude-marketing html-report-builder --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/thatrebeccarae/claude-marketing.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/skills/html-report-builder .cursor/skills/html-report-builder && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "html-report-builder" agent skill from https://github.com/thatrebeccarae/claude-marketing/tree/main/skills/html-report-builder into .cursor/skills/html-report-builder/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "html-report-builder", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/thatrebeccarae/claude-marketing.git --path skills/html-report-builder--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add thatrebeccarae/claude-marketing --skill html-report-builder -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install thatrebeccarae/claude-marketing html-report-builder --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/thatrebeccarae/claude-marketing.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/skills/html-report-builder .gemini/skills/html-report-builder && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "html-report-builder" agent skill from https://github.com/thatrebeccarae/claude-marketing/tree/main/skills/html-report-builder into .gemini/skills/html-report-builder/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "html-report-builder", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install thatrebeccarae/claude-marketing html-report-builderInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add thatrebeccarae/claude-marketing --skill html-report-builder -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/thatrebeccarae/claude-marketing.git skills-src && mkdir -p .github/skills && cp -r skills-src/skills/html-report-builder .github/skills/html-report-builder && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "html-report-builder" agent skill from https://github.com/thatrebeccarae/claude-marketing/tree/main/skills/html-report-builder into .github/skills/html-report-builder/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "html-report-builder", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add thatrebeccarae/claude-marketing --skill html-report-builder -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install thatrebeccarae/claude-marketing html-report-builder --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/thatrebeccarae/claude-marketing.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/skills/html-report-builder .opencode/skills/html-report-builder && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "html-report-builder" agent skill from https://github.com/thatrebeccarae/claude-marketing/tree/main/skills/html-report-builder into .opencode/skills/html-report-builder/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "html-report-builder", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
html-report-builderCreate 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. 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.
4 steps, taken from the first numbered list in SKILL.md.
Read from SKILL.md and the folder at commit a8a63ec. It shows what the files ask for, not the result of running them.
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.
Shell commands in SKILL.md call:
gitFrom the folder's file list and the shell code blocks in SKILL.md.
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.
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
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.
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.
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.
The full file from thatrebeccarae/claude-marketing at commit a8a63ec, republished under its MIT licence (© thatrebeccarae). 444 words, ~1,233 tokens.
.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.Polished consulting reports as standalone HTML. Print to PDF via browser.
git clone https://github.com/thatrebeccarae/claude-marketing.git && cp -r claude-marketing/skills/html-report-builder ~/.claude/skills/| 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:
: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;
}#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', monospaceCover Page (dark) → Table of Contents → Executive Summary → Findings (3-6 sections) → Recommendations → Appendix| 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.
© thatrebeccarae, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
SKILL.md and 3 other files in skills/html-report-builder of thatrebeccarae/claude-marketing.
Open the folder on GitHubat commit a8a63ec
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.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| HTML Report Builder this skillthatrebeccarae/claude-marketing | 162 | — | ~1.2k | Automated safety check: Pass | MIT | |
| Design Systemaffaan-m/ECC | 275k | — | ~698 | Automated safety check: Pass | MIT | |
| Transilience Report Styletransilienceai/communitytools | 562 | — | ~6.3k | Automated safety check: Pass | MIT | |
| Minimax PDFpoco-ai/poco-claw | 1.4k | 6 repos | ~2.1k | Automated safety check: Pass | MIT | |
| Frontend Textbooksonepixelaway/frontend-textbooks | 106 | — | ~3.5k | Automated safety check: Pass | MIT | |
| Impeccablebestofjs/bestofjs | 3.1k | 27 repos | ~2.6k | Automated safety check: Pass | MIT |
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…
transilienceai/communitytools
Threat Intelligence Report Design System — ReportLab-based PDF generation for A4 reports with Transilience branding, typography, and layout standards.
poco-ai/poco-claw
A skill your agent uses when visual quality and design identity matter for a PDF.
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.
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…
Ohh-889/skyroc
Token architecture, component specifications, and slide generation.
thatrebeccarae/claude-marketing
Analyze Google Analytics data, review website performance metrics, identify traffic patterns, and suggest data-driven improvements.
thatrebeccarae/claude-marketing
Comprehensive content marketing toolkit with brand voice analysis, SEO optimization scripts, content frameworks, social media strategy, and content calendar planning.
thatrebeccarae/claude-marketing
Klaviyo marketing operations and analyst expertise. An agent skill from thatrebeccarae/claude-marketing.
thatrebeccarae/claude-marketing
Klaviyo API and developer integration expertise. An agent skill from thatrebeccarae/claude-marketing.
thatrebeccarae/claude-marketing
Looker Studio (formerly Google Data Studio) expertise. An agent skill from thatrebeccarae/claude-marketing.
thatrebeccarae/claude-marketing
Shopify e-commerce platform marketing expertise. An agent skill from thatrebeccarae/claude-marketing.
Categories
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.
HTML Report Builder fits situations like: tasks that involve Design systems; tasks that involve OKRs and executive reporting; tasks that involve HTML artifacts.
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.
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.
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.
Going by SKILL.md and its folder, HTML Report Builder needs the command-line tools its instructions call (git).
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.
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.
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.
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.
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.
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.