# Slide Interactive

> Build designed slide decks as a single HTML file (1920×1080 slides with speaker notes) in which 2…

Build designed slide decks as a single HTML file (1920×1080 slides with speaker notes) in which 2–3 slides can be used, not just watched (a slider that computes "what would it cost you", a chart whose bars open their detail, tabs that switch a comparison, a quiz that reveals its answer), on a tested frame with design tokens, a fixed type scale and 16 named layouts with word budgets. Use this skill whenever the user asks for a deck, slides, a slideshow, a presentation, a pitch deck, an investor deck, a talk, a keynote, a lecture, a webinar, a board or quarterly business review (QBR), or "PowerPoint-style" or "Keynote-style" slides in HTML, even if they only say "make a presentation about X".

- Page: https://ss33.ai/skills/skillstore33/slide-interactive-56185234742
- Publisher: skillstore33
- Category: [Creative & Media](https://ss33.ai/skills/category/creative-and-media-0j3x01) › [Image & design](https://ss33.ai/skills/category/creative-and-media-0j3x01/image-and-design-nlbt3d)
- License: MIT

## Skill

SKILL.md: https://ss33.ai/api/v1/ss33/download/skillstore33/slide-interactive-56185234742

# Slide Interactive

A deck is a sequence of single ideas, each readable from the back of the room in three seconds, and a few moments where the audience gets to use a slide instead of watching it. The starter gives you the frame, every layout's CSS, an icon sprite and a runtime script that drives the interactive slides and the presenter. Your job is the story, the layout choices, very few very good words, and choosing where interaction earns its place.

## What to read

`read_skill_file("slide-interactive", "references/starter.html")` is required: your file is built on it. Read the others as you need them, all in one turn, before you write:

- `references/layouts.md`: the 16 layouts with character budgets (tested in wide fonts; within budget nothing overflows), skeletons, the bar-chart recipe and the diagram kit.
- `references/interact.md`: exact attribute semantics, the calc / explore / tabs / quiz recipes, and the honest-numbers rules the checker applies.
- `references/styles.md`: six style families (tokens, font pairs, a style block each) and a contrast-checked hue table.

Then make no more tool calls: the next reply is the finished deck.

## The bar

- **Action titles.** Every `h2` is a full sentence stating the takeaway; the headlines alone tell the story. `.kicker` is a 1–4 word topic label.
- **One idea per slide**, about 15–30 visible words, never over 40 (data-deck `chart`/`stats`/`compare` 55; `calc` 50; `explore`/`tabs` 45 with one pane showing). A number is shown as a number or a chart, not a sentence; a lone number gets its comparison or meaning.
- **Every brief figure on a slide, as written, nothing invented.** Every row of every table or series in the brief appears (notes don't count); worsening metrics get a chart. If the brief lists slides, make exactly those, in order. Shorten long numbers without losing precision (`3,250` → `3.25k`, never `3k`).
- **Variety and rhythm.** No layout twice in a row, at least 6 layouts in 8–12 slides, a chart, diagram or icon row at least every third slide. `title` first, `closing` last.
- **A look that belongs to this deck.** Pick a style family from `styles.md` that fits the audience and room, and an accent from the hue table drawn from a concrete object in the subject's world, not the topic's cliché hue (green for energy, navy for finance) unless it is the brand colour. Replace the TOKENS block, the Google Fonts `<link>`, and paste the family's style block as section 6 of `<style>`. Accent is emphasis only: kicker, the key number or bar, at most one `<em>` per slide.
- **Interaction where the room would ask** "what would it cost me?", "what happened that month?", "what about my town?", "would I have guessed?". 2–3 slides, two different kinds when the story allows, never first or last. Each is a complete slide before anyone touches it (an `explore` opens on the bar the headline is about, a `calc` on the brief's typical case); only a quiz opens unanswered.

## Contract (the checker relies on all of it)

- One self-contained HTML file. Each slide is `<section class="slide LAYOUT">` (1920×1080, stacked), LAYOUT one of `title section statement big-number stats chart compare cards process visual quote closing calc explore tabs quiz`, optional `inverse`, with a non-empty `<aside class="notes">` of 30–90 spoken words.
- Copy the starter's `<head>`, `<style>` frame and layout CSS, icon sprite and runtime unchanged; change only tokens, `<title>`, fonts link and style section 6. The runtime `<script>` goes **whole and unchanged** as the last thing in `<body>`; the checker looks for its parts, and a trimmed copy renders but nothing responds. No other script, no `onclick`, no handlers, no framework.
- No inline `style`, no `font-size`, no `<br>` in headings, no absolute positioning, transforms or negative margins. SVGs have a `viewBox`, no width/height attributes, text ≥ 26 units. Images are inline SVG or a `.slot` placeholder; never invented URLs, never emoji.
- A PLAN comment first in `<body>`: one line per slide (number, layout, headline), the style choice, and one `LIVE |` line per interactive slide (layout, variables with values and default, the question it answers).

## Non-obvious knowledge about the interactive layer

- **Attributes are the whole API**: `data-live="k=default"` on the section (quiz: `data-live="pick"`), `data-set="k=v"` on buttons or SVG shapes (never on a `<g>` or label), `data-show="k=v"` on `.pane`s, `<input type="range" name min max step value>` in a `.dial`, `data-calc` formulas on the section, `data-out` / `data-bar` for results, one `data-correct` per quiz. Every `data-set` value needs a pane with exactly that `data-show` value and the reverse; values compare whole (`jul` ≠ `july`). At most 2 variables per slide.
- **Formulas are arithmetic, not JavaScript**: `+ - * / ( )`, `min`, `max`, `round`, plain numbers (`0.35`, not `35%` or `1,500`). Every constant must be a brief figure (percent as fraction), a small integer up to 12, or a unit conversion (7, 24, 52, 60, 100, 365, 1000). Write the brief's figures out (`km * 220 * 0.21`), never a factor you pre-multiplied: the checker flags it as invented.
- **`data-out` defaults are checked against the formula** at the default dial and choice values, and the text you write is the format (prefix, decimals, thousands separators, `k`/`M` scaling). Compute them exactly. Slider `value` and `max` must be `min` plus whole steps; `.ends` show `min` and `max`.
- **Derived figures need a home.** A figure you work out (a payback, a cost after a grant) is honest only when a `calc` formula computes it in its default state; then it may appear elsewhere too. Otherwise it counts as invented.
- **Every state is measured**: each pane and slider position is screenshotted and budget-checked like a slide, and figures that appear only after a click are checked against the brief. The whole series stays visible in the default state; panes add detail.
- With/without options are 0/1 choices set by a two-tab `.tabbar` in `.dials`, used as numbers in the formula.

## Deliverable

The reply after the reads is the complete HTML in one ```html block, ending with `</html>` and the fence; never stop at the plan. After it, 2–4 lines: the style and accent chosen, the layout sequence, the interactive slides (press **P** to present; controls work in both views), and any placeholder to replace.