web-to-pdf

# Web to PDF Capture any web page — especially slide-based presentations — as a multi-page PDF using a headless browser. ## How it works A bundled Playwright script screenshots each slide (or the full page) as PNG, then assembles them into a PDF via Pillow. It auto-detects the navigation model: | Model | Detection | Examples | |-------|-----------|---------| | **reveal.js** | `.reveal` element + `Reveal` JS API | reveal.js decks | | **Vertical scroll** | Page height > 1.5× viewport, multiple slide elements | Custom JS slide decks with stacked sections | | **Keyboard** | Multiple slide elements, not scrollable | impress.js, deck.js, arrow-key decks | | **Single page** | No slide structure detected | Regular web pages, articles | ## Prerequisites The script bundles its own `package.json`. On first use (or if `node_modules` is missing), install dependencies: ```bash cd ${CLAUDE_SKILL_DIR}/scripts && npm install && npx playwright install chromium ``` Pillow (Python) is also required for PNG-to-PDF assembly: ```bash pip install Pillow ``` ## Usage Run the capture script: ```bash node ${CLAUDE_SKILL_DIR}/scripts/capture.mjs <url> <output.pdf> [options] ``` ### Options | Flag | Default | Description | |------|---------|-------------| | `--width N` | 1920 | Viewport width in pixels | | `--height N` | 1080 | Viewport height in pixels | | `--wait N` | 1000 | Milliseconds to wait per slide for animations | | `--max-slides N` | 50 | Safety cap on number of slides | ### Examples ```bash # Presentation deck at 1080p node ${CLAUDE_SKILL_DIR}/scripts/capture.mjs https://example.com/pitch output.pdf # Narrow viewport for mobile-style capture node ${CLAUDE_SKILL_DIR}/scripts/capture.mjs https://example.com/page doc.pdf --width 1280 --height 720 # Slow animations, give extra time node ${CLAUDE_SKILL_DIR}/scripts/capture.mjs https://example.com/deck slides.pdf --wait 2000 ``` ## Workflow 1. Check that `playwright` and `Pillow` are installed; install if missing 2. Run the capture script with the user's URL and desired output path 3. Verify the output — check page count and spot-check a few pages by reading the PDF or individual screenshots 4. Report the result to the user (page count, file size, output path) ## Troubleshooting - **Slides all identical**: The navigation detection may have picked the wrong model. Try adding `--wait 2000` for slower transitions, or check if the site requires interaction (cookie banners, login) before slides are accessible. - **Missing content / animations not rendered**: Increase `--wait` to give JS more time to render. - **Blank pages**: Some sites lazy-load content; the scroll-based capture handles this by scrolling to each slide. If keyboard navigation produces blanks, the site may actually be scroll-based. - **Too few / too many pages**: Check `--max-slides` and verify the slide selector detected is correct by inspecting the script's console output.