html-decklisted

Generate self-contained, single-file HTML presentation decks — no framework, no build step, no dependencies beyond Google Fonts. Use this skill whenever the user wants to create slides, a slide deck, a talk, a presentation, or a "deck" that should be an HTML file (not PowerPoint/PPTX, not Google Slides, not a terminal/Markdown tool like presenterm). Especially use it for technical talks, conference/meetup presentations, video-series intros, or any time the user wants code-authored, version-controllable slides with a dark, editorial design. Also trigger when the user references this house style, asks for "a deck like Tonbi's", or wants to convert an outline/notes into presentable slides. Default to this skill for HTML decks even if the user doesn't say "HTML" explicitly, as long as they don't ask for PPTX or a WYSIWYG tool.
alycda/dotfiles · ★ 1 · Data & Documents · score 57

Install: claude install-skill alycda/dotfiles

# HTML Deck Generates a presentation as **one self-contained `.html` file**: all CSS and JS inline, slides as stacked `<div>`s, a ~40-line vanilla-JS engine for navigation. No reveal.js, Slidev, Marp, or build step. Opens directly in any browser; lives happily in git. This is a code-authored alternative to PPTX and to terminal tools like presenterm — closest in spirit to reveal.js but with zero framework. ## When to use vs. not - **Use** for: technical talks, conference/meetup decks, series intros, anything the user wants as an HTML file or in version control. - **Don't use** for: `.pptx` (use the `pptx` skill), Google Slides, or when the user explicitly wants a terminal/Markdown renderer. ## Workflow 1. **Get the content first.** If the user gave an outline, notes, or a topic, work from it. If the deck is thin on substance, ask for the spine: the one-sentence thesis, the audience, and roughly how many slides / how long the talk is. Don't invent technical claims — for the user's own domain (Rust, FFI, Ditto, CRDTs, SDK work), use what they give you and flag anything you're unsure of rather than fabricating. 2. **Read the template.** Always start from `template.html`. It is the canonical design system and engine — copy it, don't reinvent it. Read it in full before editing so you use the real class names. 3. **Build the deck** by editing a copy of the template: replace the sample slides with real ones, keeping `data-slide="N"` sequential from 0. Reuse the component patter