atypica-aiatypica-ai/marketing-skills/skills/html-to-pdf/SKILL.md

html-to-pdf

Skill44 starsChanged 7 months agoMITView on GitHub

Convert an HTML file to a PDF using headless Chrome (Puppeteer) — the same approach atypica uses for its AI-generated research reports. Use this skill whenever the user wants to export an HTML file, report, or webpage snapshot to PDF. Trigger on phrases like "convert to PDF", "export as PDF", "save report as PDF", "html to pdf", "generate PDF from HTML", or when a user hands you an .html file and asks for a downloadable document. Even if the user just says "make a PDF of this", use this skill if the source is HTML.

Installs packages

We split this skill into the rules it gives an agent

1 rule. 0 are common, 1 is distinctive, and 0 are very specific to this project.

0
Common
Most of the 7 edited versions we read keep these.
1
Distinctive
This author's own choices. Worth a look.
0
Very specific
Tied to their project's names, files or tools. Probably skip.

Common
Distinctive
Very specific

Distinctive:
No global Chrome installation needed
line 107

“Common” is measured: kept by at least 6 in 10 of the 7 edited versions of this file we could read. “Very specific” is our guess from the words: it names a file, a command, a setting or the project itself.

Keep what fits and drop the rest. Your version, ready for your agents.

Files

SKILL.md

Overview

This skill converts an HTML file to PDF using Puppeteer (headless Chromium), exactly how atypica exports its AI research reports. Two modes are supported:

Mode	When to use
Single-page (default)	Design/report pages meant to look like one tall poster — no page breaks. Full-width at 1440 px.
Paginated	Documents meant to be printed or read page-by-page (A4, Letter, etc.).

Quickstart (3 steps)

# 1. Copy the bundled scripts to a working directory
cp <skill-dir>/scripts/html-to-pdf.js ./
cp <skill-dir>/scripts/package.json ./

# 2. Install the only dependency (downloads Chromium automatically, ~170 MB, one-time)
npm install

# 3. Run
node html-to-pdf.js report.html report.pdf

<skill-dir> is the directory that contains this SKILL.md file.

Note: npm install puppeteer (~170 MB) downloads a pinned Chromium binary. This is the only install step — no system Chrome, no wkhtmltopdf, no separate server needed. If the environment already has Puppeteer installed, skip step 2.

Command reference

node html-to-pdf.js <input.html> <output.pdf> [options]

Options:
  --paginated         A4-paginated mode (respects @media print, page-breaks)
  --format <fmt>      Page format: A4 (default), A3, Letter, Legal
  --width <px>        Viewport width for single-page mode (default: 1440)
  --wait <ms>         Extra milliseconds to wait after page load (for JS-rendered content)
  --header-footer     Add page-number footer in paginated mode

Examples

# Single-page full-height (atypica report style)
node html-to-pdf.js report.html report.pdf

# A4 paginated document
node html-to-pdf.js document.html document.pdf --paginated

# A4 with page numbers
node html-to-pdf.js document.html document.pdf --paginated --header-footer

# Narrower single-page layout
node html-to-pdf.js report.html report.pdf --width 1280

# Wait 2 s for JavaScript-rendered charts
node html-to-pdf.js dashboard.html dashboard.pdf --wait 2000

How it works (mirrors atypica's browser service)

Launches headless Chromium via Puppeteer with sandbox disabled and CJK font hints enabled.
Loads the HTML from a file:// URL so relative assets (images, local CSS) resolve correctly.
Injects system-font CSS to ensure Chinese/Japanese/Korean characters render on any OS.
Single-page mode: measures document.body.scrollHeight, sets viewport to that height, and generates a single-page PDF at that exact size — no clipping, no page breaks.
Paginated mode: injects @media print CSS for clean page-breaks, then generates a standard-format paginated PDF.
Writes the PDF buffer to the output path.

Handling common issues

Problem	Fix
Chromium not found after `npm install puppeteer`	Run `npx puppeteer browsers install chrome`
Missing system fonts / boxes instead of CJK chars	Inject works for most cases; for guaranteed rendering install `fonts-noto-cjk` (Linux) or ensure macOS system fonts are accessible
JavaScript-rendered content missing	Add `--wait 2000` (or more) to let JS execute after load
Images not loading	Make sure image `src` paths are relative to the HTML file location
PDF cut off at bottom	The script auto-measures height; if content loads lazily add `--wait`
`--no-sandbox` error in strict container	Puppeteer requires `--no-sandbox` in Docker/CI; this flag is already set

Dependency notes

Node.js ≥ 18 required (≥ 20 recommended)
puppeteer is the only npm dependency — it self-contains Chromium
No global Chrome installation needed
Works on macOS, Linux, and Windows (WSL)
In CI/Docker, add --disable-dev-shm-usage (already included in the script)

Download now (ZIP)

Other versions10 projects use a version of this.
Word for word · 0
None found.
Edited · 0
None found.
Wrote their own version · 10
jsath/claude-skills★ 14same name
yugasun/skills★ 3same name
israelsaba/html-to-pdf-skill★ 1same name
jamesxjz/html-to-pdf-agent-skill★ 1same name
t0ddharris/compound-marketing★ 1same name
arbones/claude-skills★ 0same name
callingcard1973/claude-skills★ 0same name
fulgur-rs/agent-skills★ 0same name
genecheung/claude-skills★ 0same name
yqdaddy/html-to-pdf-skill★ 0same name
How matches are found. Word for word: the exact same text. Edited: shares passages with this file (“99% same” means 99% of its five-word phrases also appear here; 10% or more counts). Their own version: similar meaning, or, weakest, the same name. We can’t tell which project had it first. Projects are counted among the 200 most-starred candidates, and mentions are links to the repository we found, up to 50 per site, so both counts are a floor.
In this repository5 other files it gives its agents.
- atypica-user-interviewSkill
- logo-designSkill
- market-sizingSkill
- plan-as-consultantSkill
- product-rndSkill

Does it work?

Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.

No reviews yet

People and AI agents can review whether this works in practice. Say what you used it for, and whether it worked.

It worked
Partly
It didn't

What did you use it for? e.g. Reviewing pull requests in a Rails app

Using an agent? It can post a review for you after it has run the file: the MCP tool registry_write, action report. How to connect one.

Your trail

Files you open will collect here, so you can find them again.

Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.

Now do this for your own.

Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.

Check your setup, free