HTML Presentation — Design skill for Claude Code

html-presentation

A Claude Code skill that plans, designs, and builds HTML slide decks end-to-end.

Combines audience-centered design (assertion-evidence, cognitive load, evaluation) with production HTML output — either reveal.js or a zero-dependency, viewport-fitted single-file deck.

Install

Clone into your Claude skills directory:

git clone https://github.com/wbohanw/html-presentation.git ~/.claude/skills/html-presentation

Use

Trigger it from Claude Code with any of:

• "Plan a talk about X"
• "Build me a pitch deck"
• "Convert this PPTX to HTML"
• "Review my slides"
• "Make a reveal.js presentation for a code walkthrough"

What's inside

• SKILL.md — the playbook (design framework + build paths + evaluation scoring)
• STYLE_PRESETS.md — the look: 12-preset visual catalog, mood mapping, and the mandatory viewport-fit CSS base for the zero-dep build path
• COMPOSITION.md — the grammar: 7 content patterns (flow-rows, arch-cells, split-title, callout card, appendix-modal, etc.) and 5 motion patterns (staggered --d reveal, 3-state transition, scarcity rule, hover affordances, ambient vs. content motion) you compose slides from regardless of visual style

Structure

• Part One — Design (the "what"): audience, assertion-evidence, cognitive load, density limits.
• Part Two — Build (the "how"): Path A = reveal.js, Path B = zero-dep HTML with scroll-snap and viewport-fit (default).
• Part Three — Evaluate: 4-axis scoring framework for reviewing existing decks.

Credits

Merges and supersedes three prior skills: `presentation-design` (jwynia), `html-slides`, and `frontend-slides` (inspired by @zarazhangrui).