メニュー
Use when the user wants to build a multi-slide HTML presentation with slide-type templates, a deck-stage engine, and an optional two-window presenter view for live sharing in Teams, Zoom, or Meet. For one-off single-file slide artifacts, see workbench:crafting-html. For brand theming, see workbench:crafting-design-systems.
| name | crafting-presentations |
| description | Use when the user wants to build a multi-slide HTML presentation with slide-type templates, a deck-stage engine, and an optional two-window presenter view for live sharing in Teams, Zoom, or Meet. For one-off single-file slide artifacts, see workbench:crafting-html. For brand theming, see workbench:crafting-design-systems. |
Multi-slide HTML decks with deck-stage navigation, slide-type composition, and a two-window presenter mode. Bundles a complete example deck (Deloitte x Databricks Alliance) under references/.
Reach for crafting-presentations when the deck is more than two or three slides, when speaker notes will be presented live, or when the user wants a presenter-view sidecar window during a Teams, Zoom, or Meet share. For a quick one-off single-file slide deck without presenter mode, use workbench:crafting-html and its references/09-slide-deck.html template. For theming a deck to a brand, layer workbench:crafting-design-systems on top of this skill.
If you have not yet designed the deck's content (audience analysis, message structure, slide-by-slide storyboard, speaker notes), invoke writing:presentations first. It produces a deck.md you can pass to this skill as the source brief, then crafting-presentations handles the HTML rendering.
Every slide is a <section> inside a <deck-stage> custom element. The authored canvas is 1920 x 1080 (16:9). deck-stage.js fits the canvas to the viewport via CSS transform scaling, so the deck looks the same in a 4K display and in a Zoom share. Slides are addressed by index (1-based on the URL hash, e.g. #3) and by data-screen-label for the agenda strip.
Layout grammar:
| Type | When to reach for it | Reference |
|---|---|---|
| Title | Cover / hero, opens the deck. Contains the deck title, subtitle, and a meta row (audience, date, version). | references/deloitte-databricks-alliance/slides/TitleSlide.html |
| SectionDivider | Major chapter break inside a long deck. Dark variant by default for visual rhythm. | references/deloitte-databricks-alliance/slides/SectionDivider.html |
| AgendaSlide | Multi-item list with an optional "current" highlight as the deck progresses. | references/deloitte-databricks-alliance/slides/AgendaSlide.html |
| ContentSlide | Two-column layout, a lede on top and supporting points below. The workhorse content slide. | references/deloitte-databricks-alliance/slides/ContentSlide.html |
| StatSlide | One or more hero numbers with captions. Use when the number IS the message. | references/deloitte-databricks-alliance/slides/StatSlide.html |
| CapabilitiesSlide | Three or four feature cards with icon, headline, body. | references/deloitte-databricks-alliance/slides/CapabilitiesSlide.html |
| ComparisonSlide | Side-by-side "before / after" or "us / them" two-column compare. | references/deloitte-databricks-alliance/slides/ComparisonSlide.html |
| QuoteSlide | Pull quote with attribution; clean dark background. | references/deloitte-databricks-alliance/slides/QuoteSlide.html |
| TimelineSlide | Linear sequence with phase labels and milestones. | references/deloitte-databricks-alliance/slides/TimelineSlide.html |
| ClosingSlide | Call to action, contact, next steps; mirrors the title slide visually. | references/deloitte-databricks-alliance/slides/ClosingSlide.html |
Use references/deloitte-databricks-alliance/slides/index.html as the canonical starting point. It composes all ten slide types in one HTML file with <deck-stage> wrapping them. Adapt the content to the user's topic; do not move slides between the <deck-stage> and the page body, the deck-stage element drives scaling and navigation.
Speaker notes live in a JSON island inside the deck HTML:
<script type="application/json" id="speaker-notes">
{
"1": "Open with the value prop. Twenty seconds.",
"2": "Set up the section: what we are about to cover."
}
</script>
Keys match the 1-based slide index. presenter.js reads this block and renders it in the presenter window. A slide without a notes entry shows "No notes for this slide" in presenter view.
Open the deck in Edge, Chrome, or Arc. Keys (from the deck window):
P opens the presenter window. Allow the popup once.B blacks out the audience screen. Press again to resume.Keys (from the presenter window):
T resets the timer.. or K blacks out the presenter view itself.Sync uses BroadcastChannel, same-origin, no server required.
Sharing in Teams, Zoom, or Meet: open the deck, press P, then pick Share to Window and select the deck window only. Never Share screen, or the presenter notes leak. The presenter window is invisible to the audience even though it is on the same machine.
Multi-file is the default. Keep the upstream layout: slides/index.html plus slides/slides.css plus slides/deck-stage.js plus slides/presenter.js plus assets/*.svg. This is the right shape for a deck that lives in a repo and benefits from editability.
Single-file is the right call when the deck must travel as one attachment (email, Teams DM, archive). Inline slides.css, deck-stage.js, presenter.js into the head of a single HTML file. Replace <img src="../assets/..."> with <svg> markup inline (the SVGs are small text). The presenter window cannot run in single-file mode unless the file is served over HTTP, because BroadcastChannel requires same-origin.
Before emitting HTML, check for an active design system and inline its overrides into the deck's style:
brand-2026 design system"), then .workbench/config.md ## Design system Name:, then no override..workbench/design-systems/<name>/ (project scope), then ~/.claude/workbench/design-systems/<name>/ (user scope). If a name resolves but no directory is found at either scope, report the missing path to the user and emit with the bundled defaults; do not fabricate a substitute.colors.css (and typography.css if present) into the deck's <head> as a <style> block AFTER the bundled colors_and_type.css link or inline. This makes the design system's values win the cascade.components/<name>.html markup and scoped style into the deck slide where it belongs.base64 -w 0 <file>) and inline as data:image/<type>;base64,<payload>. SVG is text and can be inlined directly. Use relative paths only when the deck and the design system co-exist in the same git tree and the deck will not travel.To create or edit a design system, see workbench:crafting-design-systems.
The bundled references/deloitte-databricks-alliance/colors_and_type.css and references/deloitte-databricks-alliance/slides/slides.css declare the :root variables the deck reads. The full inventory is documented in workbench:crafting-design-systems under its per-template variable inventory section. Override any subset via your design system's colors.css and typography.css.
workbench:crafting-html is the catch-all for non-presentation HTML artifacts and ships a simpler single-file 09-slide-deck.html for quick one-off decks.workbench:crafting-design-systems is the theming layer. It supplies the CSS variable overrides this skill consumes.workbench:writing-spec, workbench:writing-plans, workbench:brainstorming, workbench:systematic-debugging, and research:research are the other HTML producers in the wider plugin family, each with their own artifact shape.https://unpkg.com/lucide@latest. The deck breaks offline. If the deck must run offline, vendor Lucide into the slides directory and update the script reference.README.md documents this clearly.slides.css uses DM Sans via Google Fonts. Vendoring .woff2 or swapping for the user's licensed typeface is the right call for production decks.Use when the user wants to be taught and quizzed on a topic, theme, or concept they name (not the current session), to verify they deeply understand it. For example "teach me about Kafka consumer groups and test me" or "quiz me on this repo's auth flow".
Use when the user wants to be taught and quizzed on the work from the current session, what was just built, decided, debugged, or changed, to verify they deeply understand it. Not for updating agent instruction files; that is capturing-session-learnings.
This skill encodes Emil Kowalski's philosophy on UI polish, component design, animation decisions, and the invisible details that make software feel great.
Use when the user wants to design the content of a slide presentation, from audience brief through critiqued storyboard. Produces a markdown deck.md with structured per-slide front-matter. For a written prose talk instead of a deck, use writing:writing with format talk. For rendering a deck.md to HTML, use workbench:crafting-presentations.
Draft, review, and finish long form prose, essays, talks, newsletters, memos, and briefings.
Use when implementing any feature, bugfix, refactor, or behavior change before writing implementation code. Enforces test-first RED-GREEN-REFACTOR discipline.