Create an HTML presentation

Create an HTML presentation

Produce a single self-contained .html deck the user can open in any browser and (optionally) feed to the narrate-to-video skill.

Steps

1. Gather the content. Use the topic, outline, or document the user gave you. If the scope is unclear, ask 1–2 quick questions (audience, length, key message). Otherwise infer a tight narrative arc (hook → context → substance → takeaway).

2. Start from the template. Copy the bundled template to the user's chosen location (default: the current directory):

   cp "${CLAUDE_PLUGIN_ROOT}/templates/deck-template.html" ./<name>.html
   

   Read it first — it documents every reusable block at the top.

3. Brand it. In the copied file:

   • Set <title> and the .brand wordmark.
   • Set --accent / --accent2 in :root to the brand colour (default emerald).
   • Set the dimmed .watermark (replace the text with the brand name, paste an inline <svg> logo, or delete the element).

4. Author the slides. Replace the example <section class="slide"> blocks with real ones, in order. Each slide = one idea. Use the building blocks already in the template: h1/h2, .kicker, .sub, .card(+.em), .two/.cols-3, table, .flow+.node, .stat, .quote, .shot (screenshots), .foot (footer). Keep the first slide a title slide. Aim for 8–16 slides.

   • Screenshots: put images in an assets/ folder next to the deck and reference them as assets/<file>.png inside a .shot. To capture app screens, drive a browser and crop out the browser chrome.

5. Keep it self-contained. All CSS/JS stays inline; only local image files are external. Do not remove the <script> block — it powers #N hash routing, ?render=1 (used by the video build), and keyboard navigation.

6. Verify. Open it (open <name>.html on macOS) or render a slide headless to confirm it looks right:

   "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome" --headless=new \
     --window-size=1920,1080 --screenshot=/tmp/check.png "file://$PWD/<name>.html?render=1#1"
   

7. If the user wants a video next, also write a sibling narration.json (see ${CLAUDE_PLUGIN_ROOT}/templates/narration.example.json): one { "slide": N, "text": "..." } per slide, with voice_id and model set. Then hand off to the narrate-to-video skill. Spell out numbers and acronyms in the narration text so the voice reads them naturally.

Notes

• The deck is 16:9 (1920×1080) by design — ideal for both presenting and video export.
• Prefer few words per slide; let the narration carry the detail.