A human-led, agent-assisted design system for single-file HTML presentations: you own the topic, style and wording; the agent owns evidence, structure and build discipline. Five steps settle all of that first — each leaves a file you can review — and the build starts only after you approve the skeleton.
This skill builds an HTML deck in five steps. A single skeleton document pins down topic, narrative, style, evidence and per-slide structure across those steps, each leaving a file you can read and correct; only the approved skeleton becomes HTML. So the result stays strictly under the author's control and intent — no invented numbers, no improvised layout, and none of the navigation your audience expects is missing.
Every number and claim that reaches the HTML has to trace back to the source file. That is the core contract, and it is what the five steps exist to enforce.
| Step | What it does | Produces |
|---|---|---|
| 1 Topic & narrative | settle the central question, audience, duration, slide count and act structure | requirement block |
| 2 Style direction | 9 temperament presets (Fluent / Material 3 / paper-neutral / editorial / Liquid Glass / doc-list / manga / academic / playful) and 13 templates (J–Q layouts + R–V complete systems: electronic magazine and four from frontend-slides) | style decision block |
| 3 Evidence base (optional) | evidence-gated research of the sources: disputed, second-hand and unreachable items are all clearly flagged | <topic>-sources.md |
| 4 Skeleton spec | the build specification: act structure, per-slide keywords (three core — type / key / sec — are mandatory, the rest 5–11 chosen from a 51-word library; each deck declares the 12–24 it uses), implementation notes, and speaker prompts for every slide |
<topic>-HTML-PPT-skeleton.md — awaits your review, §7 included |
| 5 Build | produce the single-file HTML strictly from the skeleton | <topic>.html |
| 6 Verify & deliver | static checks, browser assertions, number audit, delivery note | tested items + untested items |
| 7 Screen annotation (optional) | for presenting, teaching or reviewing live: pen, highlighter, two eraser modes, annotations kept per slide | the same <topic>.html plus one layer |
| 8 Presenter mode (optional) | a second window: a fixed top banner (clock, page counter, prev / next / reset) plus four magnetic cards — current slide, next slide, this page's prompt, all-slide overview — both windows paging in sync | the same <topic>.html plus one more layer |
Step 3 runs only if the topic needs external data or you ask for research. Both optional layers come after verification, and step 4 is the one gate that never gets skipped.
1280×720 proportional canvas · G thumbnail overview · Space / arrows / Home·End / digit paging · click either half · touch swipe · URL-hash deep links · F fullscreen · Q shortcut panel (the optional layers register their own sections into it) · mobile portrait mask · counting numerals · reduced-motion support · one slide per printed page · media transport (drag-seek bar, , . nudge ±1s, [ ] rate, mute).
Images are inlined as base64 (.img-frame + <img>). Audio and video are files in the same folder as the .html, so they have to be copied along with that folder.
Copy the human-led-ppt/ folder into your skills directory, reload the session, then run /human-led-ppt — or just ask for a deck about your topic.
The five step documents exist as English, 中文 and 日本語 mirrors.
- Screen annotation (
assets/ink-overlay.html): a tool for simple ink annotations directly in the HTML deck. - Presenter mode (
assets/presenter-overlay.html): add this layer when you need to present to an audience.
- The style presets approximate a brand's look rather than quoting official design tokens. Check against the brand guideline before changing anything, and re-measure contrast after any colour tweak.
- Third-party skill names mentioned in the references are a 2026-10-14 marketplace snapshot that was neither installed nor read — re-verify and get user confirmation before use.
- Every example in the docs is a placeholder (
<…>/……). Never let one reach a finished deck or copy an example figure.
- The style library grows to 22 presets — an electronic-magazine preset (five e-ink palettes) plus Bold Signal / Creative Voltage / Terminal Green / Notebook Tabs; presets C/D/F/G drop their brand names for Paper-neutral / Editorial / Doc-list / Manga.
- Full-bleed backdrops and generated images — a new
backgroundkeyword (a page-filling image) and adrawkeyword (an AI image, prompt reviewed first); step 3 gains a "Candidate images" section. - The evidence chain is per-deck — only a serious deck (defence / research / data report) shows it in the bottom-right; it is decided while writing, not by a hotkey; a video/audio file that is missing says "not found" inside the player box.
- A shorter audio strip, and the check asks first — the audio bar unfolds into a compact centred strip; step 6 asks whether the agent or the user runs the final check.
Full notes: CHANGELOG.md.
The layout-template system and the presenter mode of v1.2 onward were modelled on lewislulu/html-ppt-skill ("HTML PPT Studio") — its way of organising a template (one :root token set plus a fixed menu of existing page types, with --accent-ink and image-container rules) and its two-window preview, magnetic cards, prompt card and timer. The reference is to method and interaction design, not code: nothing was copied. Every piece was rewritten against this skill's own constraints — single file, zero external dependencies, layers appended before </body> and assembled by assemble.cjs, prompt text owned by skeleton §7 — and window sync was rebuilt on postMessage because BroadcastChannel is unreliable across file:// opaque origins.
MIT — see LICENSE. Copyright holder: Makitoid Wang.