ワンクリックで
export-pdf
Export an HTML artifact to PDF via headless Chromium (puppeteer Page.pdf). For multi-slide decks one page per <section>.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
メニュー
Export an HTML artifact to PDF via headless Chromium (puppeteer Page.pdf). For multi-slide decks one page per <section>.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
Build an HTML slide deck (1920×1080, keyboard nav, exportable) when user asks for a presentation, pitch deck, slides, or keynote. Uses deck_stage.js starter and Claude Design taste rules.
Screenshot + console sweep + visual inspection of an artifact for layout/color/typography regressions. Silent on pass, reports only on issues. Use after /done reports clean and before end-of-turn.
Build animated motion design (explainer, transition reel, product intro). Uses Stage/Sprite timeline from animations.jsx for in-browser compositions or Remotion for full video/MP4 workflows.
Apply buffered tweaks from pending.yaml to the source HTML file. Invoked when user says "save tweaks", "apply tweaks", "persist panel changes", or runs /apply-tweaks.
Generate a working demo artifact on dummy content so the user can see a reference implementation. Use when user says "show me an example deck", "what does a prototype look like", "give me a starter", "I want to see an example of X". Generates live — not from a static gallery.
Extract or build a design system (tokens, components, style guide). Use for "design system", "style guide", "tokens", "UI kit".
| name | export-pdf |
| description | Export an HTML artifact to PDF via headless Chromium (puppeteer Page.pdf). For multi-slide decks one page per <section>. |
| argument-hint | <html-path> [output.pdf] |
| allowed-tools | Read Write Bash(node:*) Bash(realpath:*) Bash(mkdir:*) Bash(which:*) Bash(stat:*) Bash(ls:*) |
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.
Bash(which node) — requiredBash(test -d node_modules/puppeteer && echo yes || echo no) — if no, tell user /doctor or run npm i -D puppeteerResolve paths:
$0 = input HTML (required)$1 = output (default: input with .pdf extension)Bash(mkdir -p $(dirname <output>)) if neededRun 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.)
Report size + path.
#!/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)`);
@media print { @page { size: ... } section { page-break-after: always } } in the global <style> it injects — already present.@page { size: letter } or similar.networkidle0 waits for all network activity to stop — if artifact uses lazy images, bump timeout to 15000ms.