# Slide Patterns
CSS patterns, JS engine, slide type layouts, transitions, navigation chrome, and aesthetic presets for single-file HTML presentation decks. All slides are `100dvh` viewport-fit, single-file, offline-playable under `file://`.
**Trigger phrases:** "as a slide deck", "make a deck", "forge slides", `forge-slides`, `/forge-slides`, `--slides` flag. Never auto-select slide format — only on explicit request.
**4-phase pipeline position:** This doc is read during **Phase 3 (Generation)**. It tells the skill which HTML structure, class names, and CSS hooks to emit for each slide type. Phase 1 (Context) handles brand detection and aesthetic selection. Phase 2 (Decision) runs the Frame and produces the silent deck outline. Phase 4 (Deliver) writes the output file and runs the checklist.
---
## When to Use `forge-slides` vs Other Forge Skills
| Situation | Skill |
|---|---|
| Presenting to a room / screen-share / async video | `forge-slides` |
| Detailed technical guide or walkthrough | `forge-guide` |
| Issue/epic analysis for contributors or stakeholders | `forge-epic` |
| Visual explainer or architecture diagram | `forge-epic` or `forge-guide` + fgraph |
| A/B comparison gallery for generated artifacts | `forge-gallery` |
| Charts and metrics (standalone) | `forge-chart` |
**Decision rule:** slides when the reader navigates through a sequence with clear pacing. Guides and epics when the reader scrolls and scans at will.
---
## Slide Engine Base
The deck is a scroll-snap container. Each slide is exactly one viewport tall.
```html
.........
```
```css
/* Scroll-snap container */
.deck {
height: 100dvh;
overflow-y: auto;
scroll-snap-type: y mandatory;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
}
/* Individual slide */
.slide {
height: 100dvh;
scroll-snap-align: start;
overflow: hidden;
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
padding: clamp(40px, 6vh, 80px) clamp(40px, 8vw, 120px);
isolation: isolate;
}
```
---
## 10 Slide Types
Each type uses `.slide.slide--{type}` plus internal element classes prefixed with `slide__`. Adapt colors and spacing per aesthetic; keep structural class names consistent so `SlideEngine` and CSS hooks resolve correctly.
### title
**Purpose:** Full-viewport hero opening the deck. Sets visual tone and topic. One heading, one subtitle or date.
**HTML shape:**
```html
Deck Title
Subtitle or date
```
**CSS hook points:** `.slide--title` (centering), `.slide__display` (48–120px display type), `.slide__subtitle` (mono, dimmed), `.slide__decor` (decorative SVG accents).
**Content fit:** 1 heading + 1 subtitle max. Background via gradient or `slide__bg` image. Display text at max scale — never smaller than 48px.
```css
.slide--title {
justify-content: center;
align-items: center;
text-align: center;
}
```
---
### section
**Purpose:** Breathing room between topics. Oversized decorative section number (ultra-light weight) with heading. No body text.
**HTML shape:**
```html
02
Section Title
Optional subheading
```
**CSS hook points:** `.slide--section` (centering), `.slide__number` (decorative oversized numeral, `opacity: 0.08`), `.slide__heading`, `.slide__subtitle`.
**Content fit:** 1 number + 1 heading + optional subhead. The number is decorative — `pointer-events: none`, absolutely positioned.
```css
.slide--section {
justify-content: center;
}
.slide--section .slide__number {
font-size: clamp(100px, 22vw, 260px);
font-weight: 200;
line-height: 0.85;
opacity: 0.08;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -55%);
pointer-events: none;
}
```
---
### content
**Purpose:** Heading + bullets or short paragraphs. Asymmetric layout with optional aside area for an illustration, icon, or accent SVG.
**HTML shape:**
```html
Context label
Heading
First point
Second point
```
**CSS hook points:** `.slide--content .slide__inner` (3fr 2fr grid), `.slide__bullets` (custom bullet via `::before`, no list-style), `.slide__aside` (hidden below 768px width).
**Content fit:** 1 heading + 5–6 bullets (max 2 lines each). If more content is needed, split to a second slide.
```css
.slide--content .slide__inner {
display: grid;
grid-template-columns: 3fr 2fr;
gap: clamp(24px, 4vw, 60px);
align-items: center;
width: 100%;
}
.slide--content .slide__bullets {
list-style: none;
padding: 0;
}
.slide--content .slide__bullets li {
padding: 8px 0 8px 20px;
position: relative;
font-size: clamp(16px, 2vw, 22px);
line-height: 1.6;
color: var(--text-muted);
}
.slide--content .slide__bullets li::before {
content: '';
position: absolute;
left: 0;
top: 18px;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--accent);
}
```
---
### diagram
**Purpose:** Full-viewport Mermaid diagram or fgraph. Heading at top, diagram fills remaining space. See [In-Slide Diagrams](#in-slide-diagrams) for Mermaid vs fgraph decision and init sequence.
**HTML shape (Mermaid):**
```html
Diagram Title
graph TD
A --> B
```
**CSS hook points:** `.slide--diagram` (reduced padding to give diagram room), `.slide__diagram-wrap` (flex, center-aligned, fills remaining height), `.slide--diagram .Mermaid svg` (force 100% width via `autoFit()`).
**Content fit:** 1 heading + 1 diagram. Max 8–10 nodes for projection readability. 18px+ node labels, 2px+ edges.
```css
.slide--diagram {
padding: clamp(24px, 4vh, 48px) clamp(24px, 4vw, 60px);
}
.slide__diagram-wrap {
flex: 1;
min-height: 0;
display: flex;
align-items: center;
justify-content: center;
border-radius: 12px;
overflow: auto;
}
.slide--diagram .Mermaid svg {
width: 100% !important;
height: auto !important;
max-width: 100% !important;
}
```
---
### table
**Purpose:** Structured comparison or data table. Cell text at 18–20px for projection readability. Heading at top.
**HTML shape:**
```html
```
**CSS hook points:** `.slide--image` (zero padding, text at bottom), `.slide__bg` (absolute inset, cover), `.slide__scrim` (gradient from bottom), `.slide__content` (z-index 2, padded).
**Content fit:** 1 heading + 1 subtitle. Background image at 16:9 for title slides, 1:1 for aside illustrations. When no generated image is available, use `.slide__bg--gradient` with a bold `linear-gradient`.
```css
.slide--image {
padding: 0;
justify-content: flex-end;
}
.slide__bg {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
z-index: 0;
}
.slide__scrim {
position: absolute;
inset: 0;
background: linear-gradient(
to top,
rgba(0,0,0,0.75) 0%,
rgba(0,0,0,0.1) 50%,
transparent 100%
);
z-index: 1;
}
.slide--image .slide__content {
position: relative;
z-index: 2;
padding: clamp(40px, 6vh, 80px) clamp(40px, 8vw, 120px);
color: #ffffff;
}
.slide__bg--gradient {
background: linear-gradient(
135deg,
var(--accent) 0%,
color-mix(in srgb, var(--accent) 60%, var(--bg) 40%) 100%
);
}
```
---
### comparison
**Purpose:** Two-panel split for before/after, option A vs B, or text + diagram. Each panel has its own background tier. Zero padding on the slide root — panels fill edge to edge.
**HTML shape:**
```html
Before
Option A
Content or diagram
After
Option B
Content or diagram
```
**CSS hook points:** `.slide--comparison` (zero padding), `.slide__panels` (grid, 3fr 2fr or 1fr 1fr), `.slide__panel--a` (surface tier), `.slide__panel--b` (surface2 tier).
**Content fit:** Each panel follows its inner type's density limits (heading + 3–4 bullets, or 1 diagram). Panels do not scroll — if either side overflows, reduce content.
```css
.slide--comparison {
padding: 0;
}
.slide--comparison .slide__panels {
display: grid;
grid-template-columns: 1fr 1fr;
height: 100%;
}
.slide__panel {
padding: clamp(40px, 6vh, 80px) clamp(32px, 4vw, 60px);
display: flex;
flex-direction: column;
justify-content: center;
}
.slide__panel--a {
background: var(--surface);
}
.slide__panel--b {
background: var(--surface2);
border-left: 1px solid var(--border);
}
```
---
### closing
**Purpose:** Final slide. Mirrors the title slide structure — centered, display type, optional CTA or next-step text. Background treatment echoes the title.
**HTML shape:**
```html
Thank You
Next step or contact info
```
**CSS hook points:** `.slide--closing` (same centering as title), `.slide__display`, `.slide__subtitle`. Often shares background treatment with `slide--title` — use the same gradient or image pattern for visual bookending.
**Content fit:** 1 heading + 1 subtitle/CTA. No bullets, no body text. If a recap is needed, use a `content` slide before the closing.
```css
.slide--closing {
justify-content: center;
align-items: center;
text-align: center;
}
```
---
## Runtime Init Sequence
**Order:** `initSlideMermaid()` → `autoFit()` → `new SlideEngine('.deck')`
This order is load-bearing. Each step depends on the previous completing.
```javascript
document.addEventListener('DOMContentLoaded', async function() {
await initSlideMermaid() // render SVGs first — intrinsic dims needed for autoFit
autoFit() // then patch SVG width/height + scale KPIs/quotes
new SlideEngine('.deck') // finally wire keyboard + touch + IntersectionObserver
})
```
**Why `initSlideMermaid()` runs first:** Mermaid SVGs don't exist in the DOM until `Mermaid.render()` injects them. `autoFit()` queries `.slide--diagram svg` to strip `height` attributes and set `width: 100%; height: auto` — that query returns nothing if Mermaid hasn't rendered yet. Rendering first, patching second, is the working contract (same pattern VE uses).
**Why `autoFit()` runs before `SlideEngine`:** `SlideEngine` attaches an `IntersectionObserver` to every `.slide`. If a diagram slide is first on screen and its SVG still has intrinsic fixed dimensions, the slide overflows horizontally before the observer sees "visible" and swaps in layout. Patching SVG dims before the observer fires keeps the initial frame clean.
**Why `SlideEngine` runs last:** It owns chrome (progress bar, dots, counter) and keyboard/touch bindings. Until all slide content is laid out, the first `entry.isIntersecting` fire counts the wrong slide as active — the progress bar and counter start misaligned. Awaiting `initSlideMermaid()` + running `autoFit()` first keeps state consistent.
**`initSlideMermaid()` — scoped init (not `Mermaid-init.js`):** `slide-deck-base.js` ships its own Mermaid init. It does not reuse `base/Mermaid-init.js` verbatim because that file's `window.__postLoad` contract is tab-loader-specific. The slide init:
1. Imports `Mermaid` from CDN (`cdn.jsdelivr.net/npm/Mermaid@11`)
2. Calls `Mermaid.initialize({ startOnLoad: false, theme: 'base', ... })`
3. Queries only `.slide--diagram [data-Mermaid]` — not page-wide `.Mermaid` elements
4. Assigns each element a unique ID `Mermaid-slide-${i}` before calling `Mermaid.render()` — preventing duplicate-ID collisions when a deck has multiple diagram slides
5. Injects the rendered SVG into the adjacent `.slide__diagram-wrap` container
6. Returns a `Promise` that resolves when all diagram slides are rendered
---
## Typography Scale
Slide type scale is 2–3× larger than scrollable pages. Clamp ranges ensure readability from 1280px to 4K.
| CSS var | Clamp range | `vw` fluid value | Used by |
|---|---|---|---|
| `--fs-display` | 48–120px | `8vw` | title, closing (`slide__display`) |
| `--fs-heading` | 28–48px | `4vw` | all types (`slide__heading`) |
| `--fs-body` | 16–24px | `2vw` | content bullets, panel body (`slide__body`) |
| `--fs-caption` | 10–14px | `1vw` | labels, table headers, citations (`slide__label`) |
Values match `slide-deck-base.css` CSS custom properties (`--fs-display/heading/body/caption`) — authoritative source.
```css
.slide__display {
font-size: clamp(48px, 8vw, 120px);
font-weight: 800;
letter-spacing: -3px;
line-height: 0.95;
text-wrap: balance;
}
.slide__heading {
font-size: clamp(28px, 5vw, 48px);
font-weight: 700;
letter-spacing: -1px;
line-height: 1.1;
text-wrap: balance;
}
.slide__body {
font-size: clamp(16px, 2.2vw, 24px);
line-height: 1.6;
text-wrap: pretty;
color: var(--text-muted);
}
.slide__label {
font-family: var(--font-mono);
font-size: clamp(10px, 1.2vw, 14px);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1.5px;
color: var(--text-dim);
}
.slide__subtitle {
font-family: var(--font-mono);
font-size: clamp(14px, 1.8vw, 20px);
color: var(--text-dim);
letter-spacing: 0.5px;
}
```
**Section number scale (decorative, not in the table above):** `clamp(100px, 22vw, 260px)` at `font-weight: 200`. This is purely typographic decoration — it intentionally exceeds the display scale and stays legible because it is ghosted at `opacity: 0.08`.
---
## Aesthetic Presets for Slide Mode
All 6 forge aesthetics are tuned for slide mode. Each aesthetic file (`aesthetics/*.css`) includes slide-specific overrides for type scale, section-divider backgrounds, and title-slide treatment. Read the aesthetic file before generating — do not guess token values.
| Aesthetic | Display font weight | Section-divider bg | Title-slide treatment | Known strength |
|---|---|---|---|---|
| `editorial` | 800 (Outfit, bold display) | Radial amber glow at top center | Centered heading at full scale, corner marks in gold | Rich roadmaps, design reviews, project walkthroughs |
| `roxabi` | 800 (Outfit, same as editorial) | Gold radial glow, surface2 bg | Gold accent border on content area | Roxabi-branded decks, product pitches |
| `lyra` | 800 (Outfit) | Orange-red radial at top | Orange accent corner SVG, surface bg | Lyra project decks, voiceCLI demos |
| `terminal` | 400 mono weight (Geist Mono, not bold) | Faint dot grid, dark surface2 | Large weight-400 mono instead of bold display | Code-heavy decks, CLI walkthroughs, developer talks |
| `caveman` | 800 (system-ui) | Pure black, grid background | Full-bleed gradient with cursor-spotlight fallback | High-contrast product showcases, stark minimal style |
| `blueprint` | 700 (IBM Plex Sans) | Blueprint grid lines, muted blue surface | Grid-pattern bg, mono label above heading | Architecture diagrams, technical spec walkthroughs |
**Aesthetic detection:** same as `forge-guide` and `forge-epic` — brand book override (`brand/forge.yml`) → project-level mapping (`tokens.md § Which Theme to Use`) → fallback to `editorial`.
### V2 slide-type coverage policy
Base CSS (`slide-deck-base.css`) styles every slide type by default, so any aesthetic renders all 10 types without aesthetic-specific overrides. Aesthetics *opt in* to richer per-type treatments — they don't carry the full matrix.
| Aesthetic | V1 (`title`, `content`, `closing`) | +`section` | +`quote` | +`comparison` | +`table` | +`code` | +`diagram` |
|---|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
| `editorial` | ✓ | ✓ | — | — | — | — | — |
| `roxabi` | ✓ | ✓ | — | — | — | — | — |
| `blueprint` | ✓ | ✓ | ✓ | — | — | — | — |
| `caveman` | ✓ | ✓ | ✓ | ✓ | — | — | — |
| `lyra` | ✓ | ✓ | ✓ | ✓ | — | — | — |
| `terminal` | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
**Reference aesthetic for V2 types:** `terminal` is the complete reference — when authoring a new V2 slide treatment for any aesthetic, read `terminal.css` first for structural cues, then adapt tokens. The partial coverage of the other aesthetics is intentional: each picked up V2 overrides as decks actually exercised the types (lyra/caveman leaned into `comparison`, blueprint into `quote`). Backfill lazily — when a deck's V2 slide renders acceptably on base CSS, leave it; when it needs aesthetic-specific polish, add the rule.
---
## In-Slide Diagrams
### Mermaid
Use Mermaid for complex graphs: 8+ nodes, branching paths, cycles, multiple edge crossings. If the diagram has fewer than ~7 nodes with no branching, prefer fgraph (below) or a CSS pipeline layout — small Mermaid SVGs float in dead space at slide scale.
**HTML shape inside a `diagram` slide:**
```html
flowchart TD
A["Input"] --> B["Process"]
B --> C["Output"]
```
Use `data-Mermaid` on the element — `slide-deck-base.js`'s `initSlideMermaid()` queries `.slide--diagram [data-Mermaid]` and assigns each element a unique ID `Mermaid-slide-${i}` before calling `Mermaid.render()`. This avoids duplicate-ID errors when a deck has multiple diagram slides.
**Why the skill ships its own init (not `base/Mermaid-init.js`):** `base/Mermaid-init.js` uses a `window.__postLoad` callback contract that is tab-loader-specific — it fires after a tab's content is fetched and injected into the shell. In a slide deck there are no tabs; all slides are in the DOM on load. The slide init is synchronous-then-async: it runs on `DOMContentLoaded`, iterates the diagram slides in order, renders each to a unique ID, and resolves a `Promise` that gates `SlideEngine` init. The import/config pattern (CDN ESM, `theme: 'base'`, `themeVariables` from forge CSS tokens) is the same as `Mermaid-guide.md § Single-File Mermaid`.
**Mermaid presentation overrides** (add inside the deck's `