Slide creator

Turns talk content into one self-contained HTML file — a keyboard-driven deck with the look and motion of the reference style: warm paper background, big serif headlines, an orange/green two-accent palette, staggered entrance animations, presenter-paced bullet reveals, distinct phase-divider slides, and optional looping CSS illustrations. No build step, no dependencies, no external assets — it opens straight in a browser.

When to use

Any request to make a presentation / deck / slides out of content: an outline, talk script, notes, or a list of slide topics. Also use it to add or edit slides in a deck that already follows this format.

What you produce

One file, named after the presentation — e.g. a deck titled "Q3 Planning Review" becomes q3-planning-review.html, not index.html. Slugify the title: lowercase, spaces → hyphens, drop punctuation. If the user gives an explicit filename, use that. Save it in the working directory (or where the user points).

How to build a deck

1. Read the reference files first (they hold the actual layouts and CSS — don't improvise the markup from memory):
   • references/slide-types.md — every slide layout with copy-paste HTML.
   • references/animations.md — the reveal engine and the two ready-made looping illustrations, with their CSS.
2. Map the content to slide types. Work through the user's material and decide, per point, which layout carries it best. A good deck varies its rhythm — don't render ten bullet slides in a row. Reach for:
   • a title slide to open, statement/phase slides to break sections,
   • big-stat slides for the numbers that matter,
   • pros/cons or option cards when comparing choices (mark the pick with win),
   • before/after flow for "old way vs new way",
   • an animated illustration on the 1–2 slides where showing a system in motion beats describing it (don't overuse — it's a spotlight, not wallpaper),
   • a closing title slide for questions. Alternate data-theme="green" on some slides so the accent color breathes.
3. Start from the template. Copy assets/deck-template.html to your output filename. It already contains the full CSS engine, the nav/reveal script, and nav chrome — everything that makes the motion work. You only fill in content.
4. Set the title: replace __DECK_TITLE__ in <title> with the presentation name.
5. Replace the __SLIDES__ block (the single placeholder <section>) with your real slides, built from the snippets in slide-types.md. Keep active on the first slide only. Give each slide a .foot with a consistent section · topic scheme so the deck reads as one document.
6. If any slide uses an animated illustration: paste that illustration's CSS block (from animations.md, including the shared reveal/browser-chrome CSS) into the template's /* __ILLUSTRATION_STYLES__ */ marker, and its HTML into the slide. Skip this entirely if no slide needs one — don't carry unused CSS.
7. Palette: the reference orange/green-on-paper theme is the default. If the user names brand colors or a mood, edit only the :root custom properties at the top of the template — every component derives from them, so the whole deck reshades at once. Keep two accents (one "warm/old/con", one "cool/new/pro/win") since several layouts rely on that pairing.
8. Verify before handing off. Open the file (e.g. open <file>.html) and sanity-check: the first slide shows, →/space advances and reveals bullets one at a time, ← walks back, phase/statement slides look distinct, nothing overflows the viewport, and any illustration animates once revealed. Fix layout issues (usually a too-long headline or too many bullets on one slide) before calling it done.

Content fidelity

Present the user's content — don't invent facts, metrics, or claims to fill a layout. If a big-stat slide needs a number the user didn't give, ask or leave a clear placeholder rather than fabricating one. Tighten wording for the screen (headlines short, bullets scannable, <strong> on the key term), but keep the meaning.

Controls the finished deck ships with

→ / space / PageDown next · ← / PageUp prev · Home/End jump · click advances · URL hash tracks the slide (#12) so a spot is linkable · top progress bar and NN / NN counter.