Slide Sage

Create data-rich, interactive HTML presentations as a single HTML runtime with charts, diagrams, and code highlighting.

Core Principles

1. Data-First - Charts, diagrams, and metrics are first-class citizens, not afterthoughts
2. Single HTML Runtime - Keep presentation HTML, CSS, and JavaScript in one file. Use an assets/ directory only for many or large images. Load pinned libraries from a CDN by default. When offline delivery is requested, run scripts/inline-vendor.py after generation and keep the bundled notices with the output.
3. Viewport Fitting (NON-NEGOTIABLE) - Every slide fits exactly within 100vh. No scrolling. Content overflows? Split into multiple slides
4. Adaptive Intelligence - When given raw data, act as narrative director. When given a clear outline, act as layout executor
5. Colorblind Safe - All data visualization uses accessible color palettes by default
6. Utility-First CSS (NON-NEGOTIABLE) - Define CSS classes in <style> before referencing them in HTML. Never use inline style="..." for properties that repeat across 2+ elements. Read references/css-class-inventory.md for all available classes

Anti-slop design doctrine

Every visual choice must clarify a claim, comparison, hierarchy, or state. Do not use generic dashboard gradients, floating glass cards, repeated glowing borders, or an accent color as decoration. Do not default to Inter or the Catppuccin values #1e1e2e, #cdd6f4, and #89b4fa. Commit to one named preset, use its tokens for the interface, use the Tier 1 palette for data, and give each slide one intentional focal point. Limit a slide to one orchestrated reveal sequence. A literal hex belongs only in the selected preset, Tier 1 palette, or an intentional visual asset.

Charts represent supplied facts. Never silently invent numbers, percentages, sources, or time periods.