pdf-htmllisted

Exports design-* HTML artifacts to single-page PDFs using headless Chromium. Targets the same .canvas / [class*="canvas-"] conventions as screenshot-html, but outputs vector PDFs sized to each canvas's exact pixel dimensions rather than PNG rasters. Use when the desired output is a shareable PDF — audit reports, client deliverables, long-form documents. Do NOT use for social-media graphics (LinkedIn, Instagram, YouTube) or interactive overlay assets; screenshot-html produces better results for those. Trigger on: "export as PDF", "save as PDF", "generate a PDF", "capture as PDF", "PDF version of this", or whenever the user wants a PDF from an HTML artifact previously produced by a design-* skill.
slogsdon/skills-design · ★ 2 · Data & Documents · score 73

Install: claude install-skill slogsdon/skills-design

# 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 ```bash node skills/pdf-html/scripts/pdf-html.mjs <dir> [--output <dir>] [--width <px>] [--full-page] ``` Flags: - `<dir>` (positional, default `.`): directory to scan recursively for `*.html`. The `screenshots/`