Deck To HTML

Deck → interactive HTML

Turn a .pptx / .pdf into one self-contained .html file that presents better than the original: charts redrawn natively so they animate, screenshots kept where the screenshot is the evidence, live demos embedded in-slide, and a clean console.

Everything here was learned building a real investor deck. Follow the order.

Non-negotiables

1. Never fabricate data. Recover real numbers (references/04-chart-data-recovery.md) or keep the source image. A plausible-looking invented curve in an investor deck is a serious failure, not a shortcut.
2. Content is verbatim unless the user says otherwise. Fix typos and awkward phrasing; flag anything factually inconsistent rather than silently "improving" it.
3. One HTML file. All CSS, JS, fonts and images inlined. It must work with the network off — you cannot debug a missing CDN from a stage.
4. QA is not optional. Every slide screenshotted, 0 console errors, 0 overflow. references/06-qa-and-export.md.
5. Load the slide-design skill too if it is available — it governs what goes on a slide. This skill governs how it is built.

Workflow

1 — Read the source before building anything

markitdown deck.pptx > dump.md                    # text, per slide
soffice --headless --convert-to pdf deck.pptx   # LibreOffice; in Claude's sandbox:
                                                #   python scripts/office/soffice.py ...
pdftoppm -jpeg -r 100 deck.pdf slide              # visual reference for every page
python3 -c "import zipfile;zipfile.ZipFile('deck.pptx').extractall('unpacked')"

Look at every rendered page. Then classify each slide:

Full extraction recipes, hidden-slide detection and image↔slide mapping: references/01-extract-source.md.

2 — Build the generator, not the HTML

Never hand-write a 5000-line HTML file. Write a Python generator:

src/build.py      slide definitions -> emits the single .html
src/style.css     design system + components
src/app.js        runtime (nav, demos, tooltips, count-up)
src/charts.py     native SVG chart builders
src/assets.py     image -> base64 WebP data URI

build.py inlines style.css and app.js and replaces /*__DEMOS__*/ and /*__TITLES__*/ placeholders. Copy assets/ from this skill as the starting point — they are the proven versions, not sketches. references/02-architecture.md.

3 — Commit to one design system

Fixed 1280×720 stage, transform: scale() to fit any viewport. One background tone for the whole deck. Every content slide is:

kicker  ·  optional numbered badge + h1  ·  one-line sub  ·  .body

Same paddings, same type scale, one accent colour. If the deck has a numbered agenda slide ("Five Advantages"), the badges on the detail slides must match that list — and must stay in deck order. Reordering slides means renumbering both.

4 — Animate as sequencing, not decoration

[data-anim] + inline transition-delay, gated on .is-active. The entrance order is the order you speak in. Slide-to-slide transitions stay quiet — a fast fade and a 1% nudge, never 3D. references/03-animation.md.

5 — QA, every time

node qa.js        # per-slide overflow + pageerrors  (ACTIVE slide only — see gotchas)
node console.js   # full console + requestfailed sweep
node shot.js      # screenshot every slide, then LOOK at them

6 — Export

node topdf.js && python3 make_pdf.py → 16:9 PDF with animations settled. references/06-qa-and-export.md.

The gotchas that will cost you hours

Read references/07-gotchas.md before writing CSS. The five that bite hardest:

• Two style attributes on one element — the second is silently dropped, so your transition-delay vanishes and sequencing breaks. Merge them.
• preserveAspectRatio="none" stretches text. Measure the rendered container and match the viewBox aspect, or use meet.
• flex:1 inside a non-flex parent collapses to zero height — the chart renders blank.
• Overflow checks give false positives on inactive slides — entrance transforms inflate scrollHeight. Only measure .slide.is-active.
• Percentage max-height does not resolve against an auto-height parent. Constrain by width and let height follow.

Reference index

assets/ ships working style.css, app.js, assets.py, and all QA/export scripts.