Slide Deck

---
name: slide-deck
description: Turns text, reports, meeting notes or data into a presentation, output as a single-file HTML deck that plays directly and prints to PDF. Use when the user says "make a deck", "make slides", "briefing materials", "pitch deck" or "turn this report into a presentation".
author: 8pt
---

# Slide Deck

Outputs: `deck.html` (single file, no external dependencies, keyboard navigation, print to PDF from the browser) + `speaker-notes.md`.

## 1. Ask the user first (up to 3; use the defaults if unanswered)
1. Audience and purpose? Default: an internal decision briefing that aims to get the audience to agree on one conclusion.
2. Length? Default: 10 minutes ≈ 8–12 slides (about 1 minute per slide, not counting the cover and closing).
3. Brand color? Default: `#4D74FF`, dark text `#14141a`, light background `#ffffff`.

## 2. Files
- `templates/deck.html`: the complete template with the player, theme and 6 layouts. Copy it to `deck.html` and only add or remove `<section class="slide">`; don’t touch the player script.
- `reference/layouts.md`: what each of the 6 layouts is for, its word limits and ready-to-paste HTML snippets.
- `checklists/deck.md`: the slide-by-slide checklist before delivery.

## 3. Process
1. **Distill the conclusion**: read all the material and write one sentence with the core conclusion of the whole deck (≤ 20 words).
2. **Storyline**: write the list of slide headlines as "conclusion → reasons 1/2/3 → evidence → risks → next steps". Every headline is a full statement (e.g. "Repeat purchases fell because new customers are lower quality"), never a noun like "Background" or "Data analysis". Send the headline list to the user to confirm; if they can’t confirm, carry on and list the headlines in your reply.
3. **Pick layouts**: choose one layout per slide from `reference/layouts.md`. Never use the same layout on 3 slides in a row; prefer `chart` for data slides, `compare` for comparisons and `statement` for a one-line emphasis.
4. **Lay out**: copy `templates/deck.html` → `deck.html`, change variables such as `--brand` in `:root`, and fill in content from the layout snippets.
5. **Charts**: use the template’s built-in CSS bar chart (`.chart` + `style="--v:percent"`) or an inline SVG line; label values on the chart and put units in the title or next to the axis. Don’t add external libraries such as Chart.js.
6. **Speaker notes**: write 40–80 words of notes in each slide’s `<aside class="notes">`, and collect them in `speaker-notes.md` (`## Slide N · Headline` + notes).
7. **Self-check**: open `deck.html` and step through every slide with →; go through `checklists/deck.md` item by item; confirm in print preview that each slide is one page with no overflow.

## 4. Specs
- Canvas 1920×1080 (16:9), scaled proportionally when playing; 96px safe margin on every side.
- Type sizes only: heading 64 / subheading 40 / body 28 / note 20 (px at canvas size); the template’s three special sizes are used only in their layouts: cover 96, statement 88, KPI number 120.
- Spacing only in multiples of 8: 8 16 24 32 48 64 96.
- Body text ≤ 3 points per slide, each ≤ 12 words; readable text per slide ≤ 40 words (chart values excluded).
- Color: the brand color is for emphasis only (key numbers, current item), at most 1 accent block per slide.
- Data slides cite their source at the bottom (20px, gray); data without a source stays out.
- Print: Chrome "Print → Save as PDF"; the template’s `@page` sets the paper to 1920×1080 automatically; tick "Background graphics".

## 5. Self-check before delivery
- [ ] Reading only the headlines retells the whole argument.
- [ ] No slide over the word limit; no text smaller than 20px.
- [ ] Every number comes from the user’s material or cites a source.
- [ ] `deck.html` opens offline as a single file with no console errors; ←/→/Space/Home/End all change slides.
- [ ] Print preview page count = slide count, with nothing cut off.
- [ ] `speaker-notes.md` has the same number of slides as the deck.

## 6. Don’t
- Don’t invent data, client logos, testimonials, growth curves or "illustrative data" passed off as real; if data is missing, turn that slide into a qualitative conclusion and tell the user what’s missing in your reply.
- Don’t fill whole slides with tables of numbers; split tables over 6 rows into charts or move them to an appendix slide.
- Don’t add decorative images, web images or linked fonts unrelated to the content.
- Don’t change the template’s player script or `@page` settings.

## 7. When you deliver, tell the user
1. The storyline (list of slide headlines).
2. Delivered files: deck.html, speaker-notes.md; how to present (←/→, F for full screen) and export to PDF.
3. The defaults you used (audience, length, colors).
4. Slides turned qualitative because data was missing, and the material the user needs to supply.