# Artifact Deck

> OUTPUT IS ALWAYS A SINGLE `.html` FILE (never `.md`, never separate per-slide files) containing multiple slides navigated by arrow keys. Use this skill whenever the user asks for a slide deck, presentation, talk, "Friday demo", "share-out slides", "exec readout", "kickoff deck", "lightning talk", arrow-key deck, keynote-style outline, or any artifact whose primary shape is "a sequence of slides you advance through". Pair with `artifact-css` for the underlying design system. Do NOT use for single-page reports — those are `artifact-report`.

- Skill: `olakunlevpn/artifact-deck` (Agent Skill, multi-file: 3 files)
- Install (CLI): `npx skillmds@latest add olakunlevpn/artifact-deck`
- Raw SKILL.md: https://api.skillmd.com/api/skills/olakunlevpn/artifact-deck/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Design & Media
- Author: olakunlevpn (https://skillmd.com/u/olakunlevpn)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/olakunlevpn/artifact-deck

---


# artifact-deck

> ## OUTPUT CONTRACT
>
> **Produces ONE `.html` file.** A slide deck is multi-slide by definition; all slides live inside the same file and are switched by JavaScript (arrow keys, click on the chrome, hash routing). NEVER one file per slide. NEVER a `.md` outline.
>
> File extension is `.html`. File name typically `<topic>-deck.html`.

---

A single-file slide deck. Navigate with arrow keys, click the dots, or drag the URL hash. The reader can jump straight to slide N via `#/N`. The deck is presentation-mode by default — chrome stays minimal, content sits center-screen.

Read `artifact-css/SKILL.md` first for the full OUTPUT CONTRACT, design tokens, and class vocabulary. This skill uses **no jQuery** — slide nav is ~30 lines of vanilla JS.

## When to reach for this skill

- User says "make me a deck for X", "Friday demo slides", "kickoff deck", "exec readout", "lightning talk".
- User has 5-15 short ideas they want to walk a viewer through in order.
- User wants something they can present in a meeting without firing up Keynote / Google Slides.

If they want a one-page summary, use `artifact-report`. If they want a clickable mockup with hotspots, use `artifact-flow`. If they want a long narrative, use `artifact-explainer`.

## Anatomy of a deck

Built from four element types. Use them in order.

1. **Header bar** — fixed-position chrome at top with: deck title, current slide number / total, optional progress bar. Stays visible across all slides.
2. **Slide container** — a `<section class="slide" id="s-N">` per slide. Only the active slide is visible. Each slide is its own flexbox-centered viewport (`100vh - header`).
3. **Slide content** — one of these shapes per slide:
   - **Title slide** — eyebrow + h1 + lead. The cover.
   - **Statement slide** — one giant headline. No subhead. Used when the slide is a single point.
   - **Two-column slide** — `.grid-2` with image/code/list on each side.
   - **Stat slide** — `.stats` grid for 2-4 big numbers.
   - **Timeline slide** — small `.timeline` showing progression.
   - **Code slide** — `.code-block` with one focused snippet, mono large.
   - **Closing slide** — eyebrow + h2 + call-to-action.
4. **Footer chrome** — fixed-position bottom-right: prev / next buttons, slide counter, "Press → to advance" hint.

Five to fifteen slides is the right zone. Fewer = no point of a deck. More = it's an article.

## Voice and density rules

1. **One idea per slide.** If a slide needs more than one h2, split it.
2. **Big type.** Body text below 18px shouldn't appear on a deck slide. The reader is 6 feet from a screen.
3. **No paragraphs.** A slide with three sentences of prose is a slide that should have been a stat or a bullet list.
4. **No bullet soup.** Three to five bullets max per slide. Beyond that, split.
5. **Numbers, names, and verbs.** A slide that says "We made progress on infrastructure" is a slide that should have been deleted. Replace with "Cut p99 latency 38% across 3 services."

## Navigation contract

- **→ / Space / PageDown** — next slide.
- **← / PageUp** — previous slide.
- **Home / End** — first / last slide.
- **Click anywhere on the slide chrome (not on a link or button)** — next slide.
- **Hash routing** — `#/3` jumps to slide 3. Updates as you navigate so the URL is shareable.
- **F or `?`** — toggle a help overlay listing the shortcuts.

The JS that wires this is ~30 lines, included in the template.

## Fallback contract

With JS disabled:
- All slides render stacked top-to-bottom (one after another).
- Each slide has its own scroll target.
- The header / footer chrome still renders but the prev/next buttons are dead.

Reader still gets the content. Just no presentation polish.

## Common mistakes

- **Slide deck as long-form article.** If your slides are paragraphs, you wanted `artifact-explainer`.
- **Two ideas per slide.** Reader can't track. Split.
- **Tiny screenshots.** A 240×180 PNG on a 1920×1080 deck is unreadable. Either it fills 60%+ of the slide or it doesn't belong.
- **No closing slide.** Decks need a "what now" slide — next steps, links, contact. Otherwise the deck just stops.
- **Auto-advance.** Don't add timed advance. Presenter controls the pace.

## After the artifact

Offer the plain-text outline alongside: one line per slide, prefixed with the slide number. Useful for speaker notes or for pasting into a thread that won't render the HTML.