Pdf Html

Skill: pdf-html

Targeted per-canvas PDF export via headless Chromium. Strips preview-backdrop styles (dark page background, padding, gap) before rendering so the PDF contains only the canvas itself.

When to use

• After any design-* skill that produces a document-style HTML artifact — audit reports,

deliverables, spec sheets, long-form cards — and a PDF is the desired leave-behind format.

• When the user says "export as PDF", "capture as PDF", "PDF version of this", etc.

Skip if:

• The artifact is a social-media graphic (LinkedIn, Instagram, YouTube thumbnail, Twitter

card). Use screenshot-html for those — PDFs don't add value and print media mode may alter the styling.

• The artifact is a stream overlay or OBS scene pack. Use screenshot-html.

What it targets

Same canvas conventions as screenshot-html:

• .canvas — primary fixed-size artifact wrapper.
• [class*="canvas-"] — modifier variants: canvas-front / canvas-back, canvas-audit,

canvas-og / canvas-hero, etc.

• .scene — hash-routed scenes (captured at their hash-navigated state).

Nested matches are deduped — only top-level containers generate PDFs.

If a file has no matches, falls back to a full-page PDF. --full-page forces this for every file.

How to run

node skills/pdf-html/scripts/pdf-html.mjs  [--output ] [--width ] [--full-page]

Flags:

• ` (positional, default .): directory to scan recursively for *.html`. The

screenshots/ and pdfs/ subdirectories and hidden dirs are skipped.

• --output (default /pdfs): where PDFs are written. Flat output — one file

per canvas target.

• --width (default 1920): browser viewport width. Only needs to be ≥ the widest

canvas; PDF height is measured from the rendered DOM, not the viewport.

• --full-page: force full-page PDFs for every file, skipping canvas targeting.

Height is always auto-measured from the canvas's rendered bounding box — no --height flag needed.

Prerequisites

None — the script self-bootstraps on first run, installing Playwright and the Chromium binary into its own node_modules alongside the script. First run takes ~10–60s; subsequent runs are fast (~1s overhead).

$ node pdf-html.mjs ./design//artifacts
Playwright not found. Installing into /scripts/node_modules (one-time)…
…

Token-load guard

Same @import sanity check as screenshot-html: if a relative @import url('../tokens.css') can't resolve from the artifact's directory, the guard warns you before writing the PDF:

  artifact.html ⚠ design tokens may not have loaded — PDF may show fallback styles.
    failed CSS: file:///wrong/path/tokens.css (net::ERR_FILE_NOT_FOUND)
    Fix: run the script against the artifact's native folder so relative imports resolve.

PDF rendering details

Playwright's page.pdf() renders in @media print mode. For design-* artifacts the canvas CSS contains no @media print overrides, so the rendered PDF matches the browser preview. The preview-backdrop styles (body { background: #2a2a2a; padding: 32px; } and .canvas-label) are stripped via injected CSS before each PDF is generated, so the output contains only the canvas.

PDF dimensions are set to the canvas's exact rendered pixel size (e.g. 1200 × 5077 px for a tall audit report). This produces a single-page vector PDF — shareable, searchable, and printable — at the canvas's native resolution.

Output naming

Same convention as screenshot-html but with .pdf extension:

| Source file | Targets | Output filenames | |---|---|---| | audit-report-2026-05-14-mercer-advisors.html | one .canvas-audit | audit-report-2026-05-14-mercer-advisors.pdf | | business-card.html | .canvas-front, .canvas-back | business-card--canvas-front.pdf, business-card--canvas-back.pdf | | blog-hero.html | .canvas-og, .canvas-hero | blog-hero--canvas-og.pdf, blog-hero--canvas-hero.pdf |

Common patterns

• Single artifact PDF: node skills/pdf-html/scripts/pdf-html.mjs ./design//artifacts --output ./design//pdfs
• Full-page (deliverable pages without a .canvas): add --full-page
• Only want the audit report, not the whole artifacts dir: point at a temp dir or use --full-page to get the page at its natural height

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: slogsdon
• Source: slogsdon/skills-design
• License: MIT

Install and usage instructions live in the source repository linked above.