--- name: slide-deck description: > Build a presentation as one self-contained HTML file that opens in any browser, navigates with arrow keys and prints to a clean 4:3 PDF. Use this skill whenever someone asks for a deck, slides, a board or management presentation, a strategy or investment review, a steering-committee update, or an HTML version of a document that has to be presented. It fetches the `slide-deck` template from the quick-html registry, fills its slot contract, and applies the structural and typographic rules that make a deck read like it was written by someone senior. license: MIT --- # Slide deck skill One deck is one HTML file. No PowerPoint, no image assets, no external requests: the file opens offline, the deal team can fix wording in the browser, and Ctrl/Cmd-P produces a 4:3 PDF that is identical on every machine. ## Workflow 1. **Read the catalogue, then fetch the template and its contract.** Always that order, and always resolving the version at use time: ``` GET https://www.quick-html.com/index.json ``` Find the `slide-deck` entry and use its `urls.manifest` and `urls.template` verbatim. Both already carry `@version`. Do not take a version from this file: pinning stops a later release changing what you built, and resolving at use time stops a release 404-ing you. If a pinned URL does return 404, re-read `index.json` and refetch. The template was bumped: that is housekeeping, not an error worth reporting to the user. `/t/slide-deck/` without `@version` is the moving latest alias, fine for showing a human the template and wrong for a build step. The same `index.json` lists every other template if a different format fits better (a one-page memo, a scorecard, an invoice). Send a real user agent, never a default HTTP client string: `quick-html-skill/0.1.0 (+https://www.quick-html.com)`. 2. **Read `agentInstructions` in the manifest first.** It is the authoritative fill contract and it wins over anything in this file. The slot list tells you what may change; everything else in the template stays byte-identical. 3. **Shape the deck before you fill it.** Duplicate the `content-slide` block once per argument, delete the optional slides you do not need (`table-slide`, `chart-slide`, `risk-slide`), remove every `data-example` element, then write the content. 4. **Fill it, then QA against the checklist below.** Open the file, click through it, print to PDF and look at the PDF, not only at the screen. 5. **Deliver the single HTML file** and say in one line that arrow keys navigate, the Edit button fixes typos without another round-trip, and Print gives the PDF. ## Structure: the argument comes first - **Every title is a conclusion, not a label.** "New-logo revenue has been flat for three years" works; "Revenue overview" does not. If a title cannot be read on its own and still say something, rewrite it. This is the single biggest difference between a deck that lands and one that gets picked apart. - **Pyramid Principle throughout**: lead with the answer, support it with two to four arguments, back each argument with a number. The executive summary is the whole deck in one slide; a reader who stops there must still get the message. - **Default spine** (drop what the audience does not need): cover, agenda, executive summary, the argument chapters, business case or numbers, risks, next steps and the ask. - **Chapters, not a flat list of slides.** Repeat the same `slide-tab` on consecutive slides of one chapter, and keep the agenda wording identical to the tabs, in the same order. A reader must always know which chapter they are in. - **End on the ask.** Name the decision, the amount and the deadline. If nothing is being decided, say what happens next instead. Never end on a summary slide. - **SCQA for a narrative slide** (situation, complication, question, answer) and **structure / conduct / performance** for a market or competitor slide: both fit the two-column layout, one framework element per column or per bullet. ## Density: fill the canvas, honestly - Two to four bullets per column, at most about 22 words each, one nested level for evidence. Both columns filled: a half-empty right column reads as an unfinished slide. - Land the so-what in the takeaway strip on every slide that has one. It states the consequence, it does not restate the bullets. - Cite sources on any slide with data: which system, which extract, which date, and whether the figures are actual, forecast or plan. - Mark what is not yet validated rather than hiding it: leave `[PLACEHOLDER]` for unknown figures and tell the reader in the source line what still has to be confirmed. ## Numbers and charts - **Compute every number yourself and check it twice.** Totals must equal the sum of their rows; percentages must reconcile with the table on the previous slide; a growth rate quoted in a title must be derivable from the numbers in the deck. One number that does not tie costs you the room. - **Bars share one scale.** `height:NN%` where NN is the value divided by the largest value across **both** series, times 100, capped at 92 so the tallest label still fits. Two charts compared side by side use one divisor and one zero line, always. - Keep the second series in the neutral grey: the accent colour is for the series the argument is about. Sort categories logically (time, or ascending) and label the unit in the scale note, since the chart carries no y-axis. - Numbers only in cells; the unit lives in the column header. Negatives in parentheses, consistent decimals down a column. ## Language and locale - Match the audience's language throughout, including tabs, table headers, chart labels and the agenda. A Dutch deck with English section tabs looks unfinished. - Dutch, German and French decks use the comma decimal separator and the point thousands separator (`€ 4.887` thousand, `16,5%`), inside chart labels too. - Dates spelled out, never ambiguous: "18 August 2026", not "18/08/26". ## Rebranding the deck The template ships in a neutral slate palette. To put it in an organisation's own house style, change the four accent variables at the top of the file and nothing else: ```css --accent: #26506b; /* section tabs, titles, table headers, primary bars, bullets */ --accent-deep: #1b3b50; /* cover band, darkest step */ --accent-mid: #3a7396; /* secondary accent */ --accent-soft: #e7eef3; /* takeaway strip fill, cover wedge */ ``` Keep the neutral `--series-b` grey for the secondary chart series, keep body text on `--ink` (never pure black), and keep the status colours for chips only. Do not add a second typeface: the deck is one system font stack throughout, which is also why it renders identically without any webfont download. ## Printing (built in, do not break it) The template already prints correctly, and that is a property of three rules. Keep all three when you edit: - `@page { size: 254mm 190.5mm; margin: 0 }` gives an exact 4:3 page (10 x 7.5 inch, the standard on-screen-show size). One slide per page, no scaling, no letterboxing. - `@media print` switches the slide's font-size from `min(vw, vh)` to a fixed `3.96875mm`. Every measurement inside a slide is in `em`, so that one switch rescales the whole layout to the page. Never introduce `px`, `rem` or `vw` inside a slide: that is what breaks print. - `-webkit-print-color-adjust: exact; print-color-adjust: exact;` on `*`, and repeated inside `@media print` with `!important`. Without it, browsers drop the accent bars, table headers and chart fills unless the user finds the "Background graphics" checkbox. To export: open the file, Ctrl/Cmd-P, destination "Save as PDF", margins none, background graphics on if the browser asks. The navigation pill and the Edit / Print buttons are editor chrome and are hidden in print automatically. ## QA checklist - [ ] Every title is a full conclusion; none is a label. - [ ] Executive summary carries the whole argument on its own. - [ ] Agenda wording matches the section tabs, in the same order; chapters group the slides. - [ ] Takeaway strip filled on every slide that has one, with the consequence. - [ ] Both columns filled on every content slide; no bullet over ~22 words. - [ ] Totals tie; percentages reconcile across slides; every figure in a title is derivable. - [ ] Bars use one divisor across both series, capped at 92%; unit named in the scale note. - [ ] Source line on every data slide; `[PLACEHOLDER]` on anything unvalidated. - [ ] Language, decimal separators and dates consistent throughout. - [ ] All `data-example` elements deleted; unused optional slides removed. - [ ] Page numbers and the footer brand left to the deck runtime, not typed by hand. - [ ] Printed to PDF and inspected: 4:3, one slide per page, accent bars and table headers present.