aicr-creating-slide-decks

name	aicr-creating-slide-decks
description	Use when building a self-contained HTML slide deck or visual talking-point for a technical concept or workflow (e.g. a demos/*.html) — shown full-screen or projected and narrated, opening in any browser with no build step or dependencies.

Creating Slide Decks

Overview

A deck here is one self-contained HTML file — inline CSS and inline SVG, no build, no dependencies, no network — that opens in any browser and projects cleanly. One idea per slide; hand-drawn SVG diagrams carry the weight. It's the talk-to-it companion to a runnable demo script (see the aicr-creating-guided-demos skill).

Copy skeleton.html: it's already a working deck (palette + chrome + keyboard nav + a title slide + a content slide + an SVG diagram stub). Add one <section class="slide"> per idea; the script auto-counts and navigates.

When to use

• Building a visual talking-point (a demos/*.html) to present or teach a concept/workflow, full-screen or projected.
• A leave-behind a reader can click through on their own later.
• Not for: prose docs (use Markdown), anything needing a real web app/build, or live data dashboards.

Conventions

• One self-contained file. Inline <style> + inline <svg>; no external fonts/CSS/JS/CDN — it must work offline and on a projector with no network. Lives in demos/.
• Full-viewport slides + nav. One <section class="slide" data-title="…"> per idea; only .active shows. Keyboard (←/→/Space, Home/End), on-screen ‹ ›, a progress bar, a slide counter, F fullscreen, and #n deep-links — all from the skeleton's script.
• One idea per slide. An eyebrow label + a heading + one visual (a diagram, a code block, or a small table). If it overflows, split it.
• Inline SVG carries the concept. Hand-author with the node/edge classes (node/node-g, edge/edge-g, nlabel/nsub/elabel); one diagram per slide; a viewBox plus max-height: …vh so it scales. Keep labels legible from the back of a room.
• Dark NVIDIA theme. The :root palette (green #76b900 accent, NVIDIA Sans with system fallback). Wordmark in text — no fabricated NVIDIA logo.

Rules

• Real, accurate content — no marketing fluff. The deck explains the actual thing; don't overclaim. (Same honesty bar as the demo it accompanies.)
• Self-contained or it doesn't ship. A single external dependency breaks the offline/projector promise.
• Commit-ready by default. Generic content, no personal/machine specifics, no invented logos.

Validate before you ship

Decks fail silently — a malformed <svg> just doesn't render. Before committing:

• Parse every inline <svg> as XML. Inline SVG is held to a stricter bar than the surrounding HTML: a bare &, an unclosed tag, or a stray attribute that a browser tolerates in HTML makes the whole <svg> fail to draw. Escape & as &, </> as </>. Quick check:

  python3 - <<'PY'
  import re; from xml.dom import minidom
  html = open("demos/your-deck.html").read()
  for n, s in enumerate(re.findall(r'<svg\b.*?</svg>', html, re.DOTALL), 1):
      minidom.parseString(s); print(f"svg #{n}: well-formed")
  PY
  

• Open it in a browser and arrow through every slide; check each diagram/code block fits the viewport (cap max-height; slides scroll internally as a fallback). If you can't open a browser, at minimum confirm each diagram's viewBox height stays within its max-height cap.

Worked example

demos/evidence-demo-slides.html — nine slides (problem → mechanics → diagrams → payoff → roadmap), four hand-built SVG diagrams, keyboard nav, dark theme.

Common mistakes

• External fonts/CSS/JS → dies offline or on the projector. Inline everything.
• Wall of text per slide → one idea per slide; split instead.
• Fabricated logo or marketing fluff → text wordmark, real content.
• SVG taller than the viewport → set max-height; verify in a browser.