Now liveThe Skillselion MCP - thousands of ranked skills, loaded into your agent mid-task. No install.Get it →
bluzir avatar

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)
At a glance

export-pdf capabilities & compatibility

Free; needs Node and puppeteer installed

Capabilities
export pptx · export standalone · make deck
Use cases
presentations
Pricing
Free
From the docs

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>.
SKILL.md
Uses puppeteer's `Page.pdf()` which is lossless vector when the source is HTML/CSS/SVG.
SKILL.md
npx skills add https://github.com/bluzir/claude-code-design --skill export-pdf

Add your badge

Show developers this skill is listed on Skillselion. Paste this into your README.

Listed on Skillselion
Installs66
repo stars98
Last updatedApril 20, 2026
Repositorybluzir/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

SKILL.mdMarkdownGitHub ↗

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 .pdf extension)
  • 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.
  • networkidle0 waits for all network activity to stop — if artifact uses lazy images, bump timeout to 15000ms.

Related skills

This week in AI coding

Five minutes, every Monday - the tools, releases and tactics for developers.

unsubscribe anytime.