---
name: HTML Deck (HTML)
description: Single-file HTML slide deck — keyboard-driven 16:9 slides rendered in the browser, optionally exportable to PPTX. For talks, demos, and launch decks where Figma export would be heavier than the deck itself.
triggers:
  - html deck
  - html slides
  - browser slides
  - reveal-style deck
  - keynote in html
cd:
  mode: deck
  platform: html-canvas
  scenario: presentation
  preview: html_file
  fidelity: high
  speaker_notes: true
  animations: true
  featured: true
  design_system:
    requires: true
    sections: [palette, type, spacing]
  craft:
    requires:
      - typography
      - typography-hierarchy-editorial
      - color
      - anti-ai-slop
      - cinematic-patterns
      - scene-templates
      - animation-best-practices
  inputs:
    - brief (deck topic)
    - audience
    - slide count (default 10)
  parameters:
    - ratio (default 16:9)
    - export (none | pptx)
  outputs:
    primary: html_file
    capabilities_required:
      - write_file
      - read_file
  default_for:
    - html-deck
  example_prompt: "10-slide HTML deck pitching a developer tool for the Hacker News audience"
---

## When to use HTML deck vs Figma deck

Choose this skill when the user wants a **shareable URL or local file**, plans to present from the browser, or wants slide-level animation that Figma frames can't show. Choose `pitch-deck-figma` when the deck must end up in Figma for collaboration or PDF export.

## Slide rhythm

Use the same 10-slide spine as Figma decks (cover → problem → solution → why now → product → traction → model → market → team → ask). For non-pitch decks (talks, launches), adapt to the topic — but keep the **one-idea-per-slide** rule.

## Layout principles

- 16:9 fixed canvas. Center content with generous margins.
- Hero the type. Display headline 80–140px on a 1920×1080 canvas; body 22–28px.
- Single focal point per slide.
- Quiet chrome: slide number bottom-right at 12–14px in `color.muted`.

## Cinematic patterns

This skill leans on `cinematic-patterns.md` and `scene-templates.md`. Use camera-style transitions sparingly — at most 2–3 narrative beats in the whole deck. Every other slide gets a quiet cross-fade or no transition.

## Speaker notes

When `speaker_notes: true`, attach notes invisible during presentation but visible in a presenter view (open in a second tab). Each note ≤ 40 spoken words.

## Export

If `export: pptx`, also emit a sibling `.pptx` produced via the `editable-pptx.md` reference. Keep the same slide order; rasterize cinematic transitions to static keyframes.

## Quality bar

- All slides reachable by arrow keys.
- No external CDN that requires a network round-trip the audience may not have.
- `prefers-reduced-motion` respected.
- Self-check against `craft_lint` before returning.
