Converts a JS-driven, one-slide-per-screen HTML deck into a paginated PDF: one page per\nslide, matching the browser rendering, with a centred page number in the footer. There is\nno native \"print to PDF\" for such decks (printing captures only the visible slide), so the\npipeline is: screenshot every slide at 2x with headless Chrome, wrap the screenshots in a\nprint-paginated page, number them, print that to PDF, then verify the PDF by rendering it\nback to images.
\nInputs to establish up front (ask only if not obvious):
\n<section class=\"slide\"), and\nthe deck's canvas size (default 1280x720). Read the deck's own CSS to confirm both\nbefore you start; a wrong size silently letterboxes or crops every page..pdf..hud,.progress,.hint;\nfor other decks, identify the fixed nav/progress elements a printed page shouldn't show.find_chrome() {\n local base c\n for base in \"$HOME/Library/Caches/ms-playwright\" \"$HOME/.cache/ms-playwright\"; do\n [ -d \"$base\" ] || continue\n c=$(find \"$base\" -maxdepth 6 -type f \\\n \\( -name chrome -o -name Chromium -o -name \"Google Chrome for Testing\" \\) \\\n 2>/dev/null | grep -v headless_shell | sort -V | tail -1)\n [ -n \"$c\" ] && { printf '%s\\n' \"$c\"; return; }\n done\n for c in \"/Applications/Google Chrome.app/Contents/MacOS/Google Chrome\" \\\n \"$(command -v google-chrome || true)\" \"$(command -v chromium || true)\"; do\n [ -x \"$c\" ] && { printf '%s\\n' \"$c\"; return; }\n done\n}\nCHROME=$(find_chrome)\n[ -x \"$CHROME\" ] || { npx --yes playwright install chromium; CHROME=$(find_chrome); }\n\"$CHROME\" --version # sanity-check; quote \"$CHROME\" everywhere (macOS path has spaces)\n\nDECK=\"/absolute/path/to/deck.html\"\nSTAGE=$(mktemp -d -t slidespdf) # or a per-deck subdir of your session scratchpad\n\n# Per-deck settings. The defaults match SlideOps decks; change all three for a foreign one.\nSLIDE_MATCH='<section class=\"slide' # the literal that starts one slide element\nW=1280; H=720 # the deck's canvas size in CSS pixels\nCHROME_SANDBOX_ARGS=() # see \"Sandbox\" below before adding --no-sandbox\n\nN=$(grep -c \"$SLIDE_MATCH\" \"$DECK\")\n[ \"$N\" -gt 0 ] || { echo \"No slides matched $SLIDE_MATCH; check the selector\"; exit 1; }\necho \"$N slides at ${W}x${H}\"\nNever reuse a fixed staging path: parallel exports collide. Everything below writes into\n$STAGE; the directory is deleted at the end.
Sandbox. These commands deliberately do not pass --no-sandbox. You may be rendering\na deck you did not author, and the sandbox is what contains a malicious payload. Add it to\nCHROME_SANDBOX_ARGS only when Chrome cannot start as root in a container that cannot\ngrant user namespaces, and tell the user you did; running as a non-root user is the better\nfix.
Two reasons not to screenshot the deck in place: relative image paths (../img/...)\nbreak the moment screenshots need the HTML somewhere else, and the printed pages must not\nshow interactive-only chrome (nav buttons, progress bar, hints). Decks whose images are\ninlined as data: URIs skip the path problem but still need the chrome hidden, so build\nthe export copy either way:
IMG_DIR=\"/absolute/path/to/the/deck's/image/folder\" # any path is fine for an image-free deck\nCHROME_HIDE='.hud,.progress,.hint' # SlideOps chrome; change for a foreign deck\npython3 - \"$DECK\" \"$STAGE\" \"$IMG_DIR\" \"$CHROME_HIDE\" <<'EOF'\nimport sys\nfrom pathlib import Path\n\ndeck, stage, img_dir, hide = Path(sys.argv[1]), Path(sys.argv[2]), sys.argv[3], sys.argv[4]\ncontent = deck.read_text()\ncontent = content.replace('src=\"../img/', f'src=\"file://{img_dir}/')\ncontent = content.replace('</head>',\n f'<style>{hide}{{display:none !important;}}</style></head>', 1)\n(stage / \"export.html\").write_text(content)\nEOF\nAdapt the src=\"../img/ prefix to the deck's actual relative-path shape, and the hidden\nselectors to the deck's actual chrome.
for i in $(seq 1 $N); do\n \"$CHROME\" --headless=new --disable-gpu --hide-scrollbars \"${CHROME_SANDBOX_ARGS[@]}\" \\\n --window-size=$W,$H --force-device-scale-factor=2 \\\n --screenshot=\"$STAGE/slide-$(printf \"%02d\" $i).png\" \\\n \"file://$STAGE/export.html#${i}\"\ndone\n($W/$H drive both the screenshots and the @page rule below, so a foreign deck only\nneeds those two numbers changed.)
python3 - \"$STAGE\" \"$N\" \"$W\" \"$H\" <<'EOF'\nimport sys\nfrom pathlib import Path\n\nstage, n, w, h = Path(sys.argv[1]), int(sys.argv[2]), int(sys.argv[3]), int(sys.argv[4])\npages = \"\\n\".join(\n f'<div class=\"page\"><img src=\"slide-{i:02d}.png\"><div class=\"folio\">'\n f'<span>{i} / {n}</span></div></div>' for i in range(1, n + 1))\n(stage / \"print.html\").write_text(f'''<style>\n @page {{ size: {w}px {h}px; margin: 0; }}\n * {{ margin: 0; padding: 0; box-sizing: border-box; }}\n .page {{ width: {w}px; height: {h}px; overflow: hidden; page-break-after: always;\n position: relative; }}\n .page:last-child {{ page-break-after: auto; }}\n .page img {{ width: {w}px; height: {h}px; display: block; }}\n .folio {{ position: absolute; left: 0; right: 0; bottom: 18px; text-align: center;\n font: 13px/1 -apple-system, \"Segoe UI\", Roboto, sans-serif;\n font-variant-numeric: tabular-nums; }}\n .folio span {{ background: rgba(0, 0, 0, 0.38); color: #fff;\n padding: 6px 13px; border-radius: 999px; }}\n</style>\n{pages}''')\nEOF\nThe .folio div is the page number. It has to be drawn here rather than left to CSS\npaged-media margin boxes, because the pages are full-bleed screenshots with a zero @page\nmargin: there is no margin box to print into. Numbering the wrapper also means the count\nis exact by construction instead of inferred from how Chrome paginated.
It sits at bottom: 18px, where the deck's own HUD counter was before step 2 hid it, so\nit lands on space the slide already keeps clear. The translucent pill is what keeps it\nlegible on a light and a dark deck alike; white text alone disappears on one of them.\nKeep --no-pdf-header-footer below, or Chrome adds a second, right-aligned number of its\nown.
\"$CHROME\" --headless=new --disable-gpu \"${CHROME_SANDBOX_ARGS[@]}\" \\\n --print-to-pdf=\"$STAGE/output.pdf\" --no-pdf-header-footer \\\n \"file://$STAGE/print.html\"\nchrome --headless=new --screenshot against a file://…pdf URL produces a blank/dark\nimage (no PDF viewer in headless mode); don't trust it as a check. Render the PDF back to\nimages with a real PDF library in a throwaway venv:
python3 -m venv \"$STAGE/venv\"\n\"$STAGE/venv/bin/pip\" install --quiet pypdfium2 Pillow\n\"$PDFPY\" - \"$STAGE\" <<'EOF'\nimport sys\nimport pypdfium2 as pdfium\nstage = sys.argv[1]\npdf = pdfium.PdfDocument(f\"{stage}/output.pdf\")\nn = len(pdf)\nprint(\"page count:\", n) # must equal the slide count\nfor i in range(n):\n pdf[i].render(scale=1.5).to_pil().save(f\"{stage}/check-{i+1:02d}.png\")\n footer = f\"{i+1} / {n}\" # the folio is real text, so it extracts\n assert footer in pdf[i].get_textpage().get_text_range(), f\"page {i+1} has no footer\"\nprint(\"every page is numbered\")\nEOF\nThen view a representative sample with your image tool: the first page, the last\npage, and every page that embeds an image. A PDF can have the right page count while\nevery image page is silently blank (the relative-path gotcha step 2 exists to prevent);\nonly rendering pages back to images catches that.
\nCopy the verified output.pdf to the output path (default: next to the HTML, .pdf\nextension), then delete the entire $STAGE directory. Nothing but the PDF should remain.
Decks in this format are produced by the SlideOps (slideops) skill, whose Step 5 defers\nto this skill for PDF export. This skill is self-contained: it does not require\nslideops to be installed.