
Export Pdf
- 66 installs
- 98 repo stars
- Updated April 20, 2026
- bluzir/claude-code-design
Export-pdf is a Claude Code skill that renders an HTML artifact to PDF through headless Chromium via puppeteer's Page.pdf.
About
Export-pdf converts an HTML artifact to PDF using headless Chromium (puppeteer's Page.pdf). For multi-slide decks it emits one page per section at the deck's native dimensions, and general pages default to A4. A developer runs it to produce a shareable PDF deliverable from a design artifact.
- Renders an HTML artifact to PDF via puppeteer Page.pdf (lossless vector for HTML/CSS/SVG)
- Deck-aware: one page per <section> at the deck-stage native dimensions
- Falls back to A4 for general pages
Export Pdf by the numbers
- 66 all-time installs (skills.sh)
- Ranked #351 of 688 Office & Documents skills by installs in the Skillselion catalog
- Data as of Aug 1, 2026 (Skillselion catalog sync)
export-pdf capabilities & compatibility
Free; needs Node and puppeteer installed
- Capabilities
- export pptx · export standalone · make deck
- Use cases
- presentations
- Pricing
- Free
What export-pdf says it does
Export an HTML artifact to PDF via headless Chromium (puppeteer Page.pdf). For multi-slide decks one page per <section>.
Uses puppeteer's `Page.pdf()` which is lossless vector when the source is HTML/CSS/SVG.
npx skills add https://github.com/bluzir/claude-code-design --skill export-pdfAdd your badge
Show developers this skill is listed on Skillselion. Paste this into your README.
| Installs | 66 |
|---|---|
| repo stars | ★ 98 |
| Last updated | April 20, 2026 |
| Repository | bluzir/claude-code-design ↗ |
What it does
Export a finished HTML deck or page to a shareable, lossless PDF with one PDF page per slide section.
When should I use this skill?
when a finished HTML artifact needs a PDF deliverable
What you get
A lossless-vector PDF, one page per deck section or A4 for general pages.
- PDF file
By the numbers
- one PDF page per deck section
Files
Export PDF
Produce a PDF from an HTML artifact. Uses puppeteer's Page.pdf() which is lossless vector when the source is HTML/CSS/SVG.
Why puppeteer instead of Chrome DevTools MCP: the MCP does not expose Page.printToPDF directly (only take_screenshot, list_console_messages, evaluate_script, etc.). Using puppeteer via a Node script is deterministic and matches /export-pptx.
Preflight
1. Bash(which node) — required 2. Bash(test -d node_modules/puppeteer && echo yes || echo no) — if no, tell user /doctor or run npm i -D puppeteer
Steps
1. Resolve paths:
$0= input HTML (required)$1= output (default: input with.pdfextension)Bash(mkdir -p $(dirname <output>))if needed
2. Run export script:
Bash(node scripts/export-pdf.mjs "<input>" "<output>")(The script exists at scripts/export-pdf.mjs; if missing, write it per the template below.)
3. Report size + path.
Script template (scripts/export-pdf.mjs)
#!/usr/bin/env node
// Usage: node export-pdf.mjs <input.html> [output.pdf]
import puppeteer from 'puppeteer';
import { pathToFileURL } from 'node:url';
import path from 'node:path';
import fs from 'node:fs/promises';
const [, , input, output = input.replace(/\.html?$/i, '.pdf')] = process.argv;
if (!input) { console.error('Usage: export-pdf.mjs <input.html> [output.pdf]'); process.exit(1); }
const inAbs = path.resolve(process.cwd(), input);
const outAbs = path.resolve(process.cwd(), output);
const browser = await puppeteer.launch({ args: ['--no-sandbox'] });
const page = await browser.newPage();
await page.goto(pathToFileURL(inAbs).toString(), { waitUntil: 'networkidle0' });
// If it's a deck, set noscale so deck-stage renders at natural dims
const deckDims = await page.evaluate(() => {
const d = document.querySelector('deck-stage');
if (!d) return null;
d.setAttribute('noscale', '');
return [parseInt(d.getAttribute('width') || '1920', 10), parseInt(d.getAttribute('height') || '1080', 10)];
});
await page.emulateMediaType('print');
const pdfOpts = {
path: outAbs,
printBackground: true,
};
if (deckDims) {
// Deck: one section per page — @media print in deck_stage.js handles page-break
pdfOpts.width = `${deckDims[0]}px`;
pdfOpts.height = `${deckDims[1]}px`;
pdfOpts.pageRanges = '';
} else {
pdfOpts.format = 'A4';
}
await page.pdf(pdfOpts);
await browser.close();
const stat = await fs.stat(outAbs);
console.log(`wrote ${outAbs} (${(stat.size / 1024).toFixed(1)} KB)`);Notes
- For decks: deck_stage.js must have
@media print { @page { size: ... } section { page-break-after: always } }in the global<style>it injects — already present. - For general pages: defaults to A4. To override, user can pass inline CSS
@page { size: letter }or similar. networkidle0waits for all network activity to stop — if artifact uses lazy images, bump timeout to 15000ms.