# Slide Charts

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

Build designed slide decks as a single HTML file (1920×1080 slides with speaker notes) whose charts animate when presented (bars that grow, a line that draws itself, plan then actual one click at a time, a moving highlight, numbers that count up, a ranking that re-sorts as the years roll), on a tested frame with 12 layouts, style families and chart recipes drawn to scale. 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-charts-77157829013
- 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-charts-77157829013

# Slide Charts

The bar: a deck is a sequence of single ideas, each readable from the back of the room in three seconds, whose headlines alone tell the story, and whose charts are honest enough to survive a ruler and animate only where the story turns. The starter gives you the frame, the layouts and the runtime; the story, the look and the charts are yours.

## References

- `read_skill_file("slide-charts", "references/starter.html")`: **required.** Your file starts from it: its whole `<head>` (frame CSS, layout classes, build CSS, and the build `<script>` at the end), and its icon sprite. Its slides are worked examples of every layout and every chart recipe.
- `read_skill_file("slide-charts", "references/charts.md")`: the six recipes (columns, paired columns, line, ranking/race, share bar, dumbbell) with exact geometry, and the full attribute semantics. Read it unless you are sure of the runtime contract below.
- `read_skill_file("slide-charts", "references/layouts.md")`: per-layout character budgets (tested in wide fonts), skeletons, the diagram kit.
- `read_skill_file("slide-charts", "references/styles.md")`: six style families (tokens, font pairs, style blocks) and a contrast-checked hue table.

Request what you need in one turn, then write the deck in your next reply without further tool calls.

## Contract (checkers depend on it)

- One self-contained HTML file. Each slide is `<section class="slide LAYOUT">`, 1920×1080, stacked vertically, with `<aside class="notes">` inside (30–90 spoken words). LAYOUT is one of `title section statement big-number stats chart compare cards process visual quote closing`, optional `inverse`. No frameworks.
- The starter's build `<script>` stays at the end of `<head>`, **copied byte for byte**. It defines `window.build` (`slides`, `steps`, `show`, `play`, …) and `window.deck`, which the step driver calls to render each step; a copy that loses one line still shows the slides but nothing moves and every step goes unmeasured. Write no other script, no handlers, no CSS animation.
- Change the head only in the TOKENS block, the `<title>`, the Google Fonts `<link>`, and an appended section 6 style block. Never set `font-size`, `style=""`, `<br>` in headings, or absolute positioning: the frame's fixed type scale and `overflow:hidden` are what make the budgets hold.
- Every number on a slide, in every step, comes from the brief; every figure in the brief's tables and bullet lists is on a slide (notes don't count).

## The runtime, in brief

- A slide's steps are 1…N, N = the largest `data-step`/`data-focus` value or the length of any `data-values`. Step 0 is everything without `data-step`. Presenting (press **P**) opens on step 0 and plays step 1; each → plays the next. The static page shows the last step, so **the slide as written is the final state**; earlier steps only hide parts or show earlier values, and each must also read as a valid slide.
- `data-step="k"` (an integer 1–4) on a chart part or `.num`: appears at step k. How it moves follows from the element: a `g.bar` grows up from its rect's bottom edge, a `g.hbar` grows right from its left edge (its value label rides the tip and counts up), a `<g>` holding a polyline/line/unfilled path draws itself and pops its dots, a figure counts up, anything else fades. Never on `h2`, `.head`, `<section>`, `.figure` or `<svg>`.
- `data-values="1840 2310 2960"` on a bar or figure: one plain number per step (no separators, units or `%`), the last equal to the label drawn; the label keeps the brief's form (`2,960`) and the script preserves its separators and decimals while tweening.
- `data-sort` on an `<svg>`: bars with `data-values` re-order each step, largest first; draw them in the order of their final values. This is the race: items × 2–4 years on one slide.
- `data-focus="3"` (or `"2 4"`) on a bar or dot group: it becomes the chart's one highlight at that step. Don't also give it `fa`; the script colours it.
- Every chart part carries `data-step` (at least `"1"`, so it enters). `big-number` and `stats` figures count up with `data-step="1"`.

## What strong decks still get wrong

- **Scale honesty.** A checker measures every bar against its label and every dot against one linear scale. Fix one scale per chart (`k = 420 / max` for columns and lines in the 1104×600 chart viewBox, `720 / max` for a ranking, `800 / max` for a dumbbell), compute every length as value × k, and never start a bar axis above zero. Write it down: a `SCALE |` line per chart slide in a PLAN comment at the top of `<body>`, alongside one line per slide and a `CHART |` line per build. Eyeballed heights are the most common failure in otherwise excellent decks.
- **Builds are rationed.** 2–3 slides build in 2–4 steps, where the story turns (plan then actual then the miss; target then line; the years rolling and the lead changing; before then after); never slide 1 or the last. More builds make the deck slow and dilute the turns.
- **Whole series, not endpoints.** Show every period or row the brief gives; a metric that worsened gets its own chart, not a sentence. With 5+ years per item, lines beat a race.
- **Words.** ≤ 40 visible words per slide (55 on data-heavy `chart`, `stats`, `compare` slides, chart labels included); stay within the character budgets in `layouts.md`. Over budget means cut, chart, or split, never shrink.
- **Precision.** Shorten long numbers without losing a digit (`3,250` → `3.25k`, never `3k`); decimals as given.
- **Look.** Decks made with this skill drift toward one look. Pick a style family and accent for this subject on purpose: avoid the topic's cliché hue unless it is the brand colour, use accent only for the kicker, the one key mark and at most one `<em>`, and keep chart labels ≥ 26 units inside the viewBox.

## Deliverable

The complete file in one ```html block, ending with `</html>`, in the same reply as its PLAN comment. Then 2–4 lines: style and accent, layout sequence, build slides (press **P**, → plays each step), and any placeholder to replace (photo slot, illustrative quote).