← ClaudeAtlas

html-to-pdflisted

Export HTML pages to print-quality vector PDFs using Playwright's page.pdf() API. Trigger with /html-to-pdf or when the user wants to export an HTML page to PDF, create a print-ready PDF from HTML, or generate a PDF of a handout, card, flyer, or any HTML design.
t0ddharris/compound-marketing · ★ 1 · Web & Frontend · score 63
Install: claude install-skill t0ddharris/compound-marketing
# HTML to PDF — Print-Quality Export Export HTML pages to high-quality, print-ready vector PDFs using Playwright's `page.pdf()` API. ## When to Use Trigger with `/html-to-pdf` or when the user asks to: - Export an HTML page to PDF - Create a print-ready PDF from HTML - Generate a PDF of a handout, card, flyer, or any HTML design ## Critical Rules 1. **NEVER screenshot-to-PDF.** Never render HTML as a screenshot (PNG) and convert to PDF. This rasterizes text into pixels — unacceptable for print. Always use Playwright's `page.pdf()` which produces vector PDFs with selectable, scalable text. 2. **Always emulate screen media.** Chromium's PDF renderer defaults to `print` media which washes out colors (dark backgrounds turn grey, accents look dull). Force `screen` media to preserve exact browser colors: ```js await page.emulateMedia({ media: 'screen', colorScheme: 'dark' }); ``` 3. **Always set `printBackground: true`.** Without this, backgrounds are stripped entirely. 4. **RGB output only.** Generate RGB PDFs. the user handles CMYK conversion in Adobe Acrobat with proper ICC profiles. Pillow's RGB→CMYK conversion produces off colors — never attempt it programmatically. ## How It Works The skill uses Playwright (Node.js) via a temporary script to: 1. Launch headless Chromium 2. Set viewport to match the HTML page dimensions 3. Emulate screen media + dark color scheme for accurate color rendering 4. Navigate to the local HTML file 5. Export as PDF with exact page