Skills › Visual Explainer › visual-explainer › slides.md

slides.md

38 lines · plugins/visual-explainer/references/slides.md at 9d5f880

1# Slides

3Slides are a different medium, not a long page cut into pieces. Copy the engine in `templates/slide-deck.html` as it is (chrome, `SlideEngine`, `autoFit()`, the delivery check) and restyle everything else.

Slides

Slides are a different medium, not a long page cut into pieces. Copy the engine in templates/slide-deck.html as it is (chrome, SlideEngine, autoFit(), the delivery check) and restyle everything else.

Raw lines 1 to 4

5## Plan before HTML

7Inventory every item in the source (sections, rows, decisions, details), map each to a slide (nothing unmapped: add slides, never drop content), then vary the composition (centered, left, right, split, bleed). A source with 7 sections usually needs 18–25 slides. Test: a reader who never saw the source can rebuild every major point from the deck.

Plan before HTML

Inventory every item in the source (sections, rows, decisions, details), map each to a slide (nothing unmapped: add slides, never drop content), then vary the composition (centered, left, right, split, bleed). A source with 7 sections usually needs 18–25 slides. Test: a reader who never saw the source can rebuild every major point from the deck.

Raw lines 5 to 8

9## Budget per slide (one `100dvh`, no scrolling)

11| Type | Holds at most |

12|---|---|

13| Title / Full-bleed | heading + subtitle |

14| Divider | number + heading + subhead |

15| Content | heading + 5 bullets of ≤2 lines, or heading + one figure |

16| Split | two panels, each within its own type's limits |

17| Diagram | heading + one SVG figure (≤ 10 boxes, 18px+ labels, 2px+ edges) |

18| Dashboard | heading + 6 KPIs; hero value ≤ 6 characters |

19| Table | heading + 8 rows; continue on the next slide |

20| Code | heading + 10 lines |

21| Quote | ≤ 25 words + attribution |

23- One focal point per slide; the heading states its takeaway. Body text 18px or larger in the sans, the display face only for headings. Prefer a figure to bullets.

24- Figures at slide scale: node text 24, edge labels 18, strokes 2.5 (hot 3.5), arrowheads 16 in `userSpaceOnUse`, `max-height: 56dvh`. Below 768px wide, the SVG keeps `min-width: 720px` in a scroll wrapper.

25- Decks default to the Editorial register; metrics or architecture may use Instrument or Blueprint.

26- Never three centered slides in a row.

27- Type in `clamp(px, vw, px)`, not `rem`. Reduce padding and hide decoration at `max-height: 700/600/500px`.

28- The engine pauses slide keys while focus is in `.diagram-shell`, `.table-scroll`, `.code-scroll`, or a form field; put scrollable content there.

Budget per slide (one `100dvh`, no scrolling)

Type	Holds at most
Title / Full-bleed	heading + subtitle
Divider	number + heading + subhead
Content	heading + 5 bullets of ≤2 lines, or heading + one figure
Split	two panels, each within its own type's limits
Diagram	heading + one SVG figure (≤ 10 boxes, 18px+ labels, 2px+ edges)
Dashboard	heading + 6 KPIs; hero value ≤ 6 characters
Table	heading + 8 rows; continue on the next slide
Code	heading + 10 lines
Quote	≤ 25 words + attribution

One focal point per slide; the heading states its takeaway. Body text 18px or larger in the sans, the display face only for headings. Prefer a figure to bullets.
Figures at slide scale: node text 24, edge labels 18, strokes 2.5 (hot 3.5), arrowheads 16 in userSpaceOnUse, max-height: 56dvh. Below 768px wide, the SVG keeps min-width: 720px in a scroll wrapper.
Decks default to the Editorial register; metrics or architecture may use Instrument or Blueprint.
Never three centered slides in a row.
Type in clamp(px, vw, px), not rem. Reduce padding and hide decoration at max-height: 700/600/500px.
The engine pauses slide keys while focus is in .diagram-shell, .table-scroll, .code-scroll, or a form field; put scrollable content there.

Raw lines 9 to 29

30## Delivery check

32`overflow:hidden` clips silently. Before you ship, with `prefers-reduced-motion: reduce` on (Chrome DevTools → Rendering), load the deck at the target size and at about 1280×600. The template outlines each failing slide (red = overflow, amber = autoFit used) and logs `Slide delivery check failed`. Split or cut until it logs `passed`.

Delivery check

overflow:hidden clips silently. Before you ship, with prefers-reduced-motion: reduce on (Chrome DevTools → Rendering), load the deck at the target size and at about 1280×600. The template outlines each failing slide (red = overflow, amber = autoFit used) and logs Slide delivery check failed. Split or cut until it logs passed.

Raw lines 30 to 33

34## PPTX

36Only on request or `--pptx`: build the HTML deck, then `visual-explainer-pptx deck.html deck.pptx` (or `node ./pptx/export.mjs` from a checkout). Tell the user the HTML stays the source: the PPTX has no animation, navigation, custom fonts, live diagrams, or JS.

38`visual-explainer-pptx` reads each `section.slide`: headings, `.slide__subtitle`, lists, paragraphs, tables, and `pre`, so keep that structure semantic. It drops SVG, figures, and captions: when PPTX is requested, give each figure slide its claim in a `<p class="slide__body">` too.

PPTX

Only on request or --pptx: build the HTML deck, then visual-explainer-pptx deck.html deck.pptx (or node ./pptx/export.mjs from a checkout). Tell the user the HTML stays the source: the PPTX has no animation, navigation, custom fonts, live diagrams, or JS.

visual-explainer-pptx reads each section.slide: headings, .slide__subtitle, lists, paragraphs, tables, and pre, so keep that structure semantic. It drops SVG, figures, and captions: when PPTX is requested, give each figure slide its claim in a <p class="slide__body"> too.

Raw lines 34 to 38