kai-html-export

Export any HTML file to PPTX or PNG using a headless browser, or publish it to a public URL. PPTX and PNG export need no Node.js; the optional share helper uses Cloudflare Pages by default and Vercel as a fallback. In hosted cloud sandboxes, automatic sharing is disabled and the helper prints manual-share guidance instead of starting a deploy flow.

Commands

| Command | What it does |

|---------|-------------|

| /kai-html-export [file.html] | Export HTML presentation to PPTX (auto-detects slides) |

| /kai-html-export --pptx [file.html] | Explicit PPTX export |

| /kai-html-export --png [file.html] | Full-page screenshot to PNG |

| /kai-html-export --png --scale 2 [file.html] | 2× resolution screenshot |

| python3 /scripts/share-html.py [file.html|folder] | Publish HTML to a public URL (Cloudflare default) |

| python3 /scripts/share-html.py --provider vercel [file.html|folder] | Publish HTML to a public URL with Vercel |

If no file is specified, use the most recently modified .html file in the current directory.

Export to PPTX

Run the bundled script:

python3 <skill-path>/scripts/export-pptx.py <file.html> [output.pptx] [--mode image|native] [--width 1440] [--height 900]

Export Modes

--mode image (default):

• Pixel-perfect screenshots of each slide
• Visual fidelity: ⭐⭐⭐⭐⭐
• Editability: ❌ None (text is rasterized)
• Best for: archiving, sharing final presentations

--mode native (new):

• Editable text, shapes, and tables
• Visual fidelity: ⭐⭐⭐ (simplified gradients, no shadows)
• Editability: ✅ Full text editing
• Best for: collaborative editing, content reuse

Supported in native mode:

• Text (h1-h6, p): font size, color, bold, alignment
• Lists (ul, ol): bullet points
• Tables: editable cells
• Shapes (div with solid background): rectangles
• Images: native insertion

Not supported in native mode (fall back to image):

• CSS gradients → solid color approximation
• Box shadows → omitted
• Custom web fonts → system fonts
• SVG graphics → rasterize to PNG

Export to PNG

Run the bundled script:

python3 <skill-path>/scripts/screenshot.py <file.html> [output.png] [--width 1440] [--scale 2]

• Captures the full page at the specified width
• --scale 2 produces a 2× retina-quality image
• Useful for sharing reports or single-page HTML as images

Share HTML to a public URL

Run the bundled helper:

python3 <skill-path>/scripts/share-html.py <file.html|folder>
python3 <skill-path>/scripts/share-html.py --provider vercel <file.html|folder>

• Accepts either a single HTML file or a folder containing index.html
• Copies common relative assets automatically when starting from a single file
• Uses Cloudflare Pages by default and keeps Vercel as an optional fallback
• Cloudflare is the recommended default for China-facing links
• Automatic sharing is disabled in hosted cloud sandboxes; the helper tells the user to share manually from a local machine instead
• Cloudflare requires wrangler login before first local use
• Vercel requires npx vercel login before first local use

Dependencies

| Package | Purpose | Install |

|---------|---------|---------|

| playwright | Headless browser screenshots | pip install playwright |

| python-pptx | Assemble screenshots into PPTX | pip install python-pptx |

| Node.js + Wrangler / Vercel CLI | Optional live URL publishing | wrangler login or npx vercel login |

No browser download needed if Chrome, Edge, or Brave is already installed. URL publishing is optional and separate from export.

QA Process

After every native-mode export, assume something looks wrong until proven otherwise:

1. Preview grid — the export automatically saves {name}-preview.png with thumbnails of slide 1, ~1/3, ~2/3, and last. Open it immediately: open {name}-preview.png
2. Structural check — if slide count mismatches or any slide is unreadable, the script prints ⚠ warnings
3. Open PPTX — for image issues or layout problems, open the PPTX in Keynote/PowerPoint to verify the render
4. Re-export — if visual quality is wrong, diagnose the root cause in the HTML before re-running

Works with any HTML

Designed to work with output from:

• kai-slide-creator — HTML presentations with .slide elements
• kai-report-creator — Single-page HTML reports
• Any self-contained HTML file