`. Keep markup semantic; style with Tailwind utilities mapped to tokens. 1. **Title slide** — deck title (display, large), subtitle/tagline, presenter/date/confidentiality line, logo. One restrained signature element (a thin accent rule, a single key metric, or a subtle background motif). No clip-art. 2. **Agenda / contents** — numbered list *only because an agenda genuinely is a sequence*. Current section can highlight in accent. Keep to 3–6 items. 3. **Section divider** — large section number + section title on a `subtle` or inverted (ink) background. Resets attention. Optionally shows "Section 2 of 5." 4. **Statement / thesis** — one sentence, large, lots of air. For the single most important claim. Use sparingly (1–2 per deck max). 5. **KPI dashboard** — 3–4 metric cards in a row: big number (tabular, weight 800), label above, delta below with ▲/▼ and `positive`/`negative` color, tiny sparkline optional. This is the workhorse "data-oriented" slide. 6. **Single chart + insight** — chart fills ~65% width, a short **insight callout** (the "so what") in the remaining space. Headline states the conclusion; chart proves it. Direct-label the key series. 7. **Two-up comparison** — two columns (before/after, us/them, option A/B). Symmetric. Highlight the recommended/winning side in accent. 8. **Data table** — clean financial-style table: right-aligned tabular numbers, zebra via `subtle` (subtle!), bold totals row with a top border, units in the header, no vertical gridlines. Heatmap-shade cells only to reveal a real pattern. 9. **Process / timeline** — horizontal stepped flow *only when order carries meaning*. Numbered nodes, connecting rule, accent on the current/critical step. 10. **Quote / testimonial** — short pull quote, attribution with name/title/company, optional small logo. No giant decorative quotation marks unless they're typographically deliberate. 11. **Matrix / 2×2** — classic consulting quadrant (axes labeled, items plotted, recommended quadrant tinted). 12. **Closing / CTA** — the ask, next steps (3 max), contact block. Mirrors the title slide's styling for bookends. > When the user gives content that doesn't fit a template, compose a new layout from the same tokens and grid — don't force the content into the wrong template. --- ## 8. Interactivity & motion Interactivity must **aid comprehension or pacing**, never perform. Default to restraint; over-animation is a top signal of AI-generated work. **Use:** - **Fragments (incremental builds)** — reveal bullets, chart series, or table rows one step at a time so the presenter controls the narrative. `

`. This is the highest-value interaction in a deck — use it on dense slides. - **Animated chart entrance** — bars grow / lines draw **once** when the slide becomes active (hook Reveal's `slidechanged` event to `chart.update()`), 400–700ms, ease-out. Disable Chart.js animation on subsequent interactions. - **Hover detail** — chart tooltips (clean, see §9), and hover states on interactive elements. Cursor `pointer` only on truly clickable things. - **Toggles / tabs / scenario sliders** — e.g., switch a chart between "Actual / Forecast," toggle scenarios, or a small input that recomputes a projected figure live. Excellent for finance/what-if decks. Keep controls obvious and labeled with plain verbs. - **Slide transitions:** `fade` (or `none`). **Never** zoom, cube, flip, slide-spin — they read as PowerPoint-2007. **Motion rules:** - Durations 200–600ms, ease-out. Nothing bouncy, nothing that loops forever. - One orchestrated entrance per slide beats five scattered effects. - **Respect `prefers-reduced-motion`** — gate all non-essential animation behind it. - Motion never blocks reading: content is legible at rest, animation only adds emphasis. ```css @media (prefers-reduced-motion: reduce) { *,*::before,*::after { animation: none !important; transition: none !important; } } ``` --- ## 9. Data visualization standards (the core of "data-oriented") This section is where most decks succeed or fail. Hold the line. ### 9.1 Chart-type selection | Goal | Use | Avoid | |---|---|---| | Compare categories | Horizontal bar (sorted) | 3D bars, radar | | Trend over time | Line (or area for one series) | Many overlapping lines (>4) | | Part-to-whole | **Stacked bar or just a number**; pie only for 2–3 slices | Pie/donut with 6+ slices | | Correlation | Scatter | Dual-axis trickery | | Distribution | Histogram / box | — | | Single big result | A **number**, not a chart | A one-bar bar chart | Default to **sorting bars by value**. A sorted bar chart is clearer than almost any pie. ### 9.2 Restyle Chart.js to the design system (mandatory) Chart.js defaults look generic. Apply a global config: ```js Chart.defaults.font.family = 'Inter, system-ui, sans-serif'; Chart.defaults.font.size = 13; Chart.defaults.color = tokens.muted; Chart.defaults.borderColor = tokens.hairline; Chart.defaults.plugins.legend.display = false; // prefer DIRECT LABELS over legends Chart.defaults.plugins.tooltip.backgroundColor = tokens.ink; Chart.defaults.plugins.tooltip.padding = 10; Chart.defaults.plugins.tooltip.cornerRadius = 6; Chart.defaults.datasets.bar.borderRadius = 4; Chart.defaults.datasets.bar.maxBarThickness = 48; Chart.defaults.elements.point.radius = 0; // clean lines; show points on hover Chart.defaults.elements.line.tension = 0.3; // gentle smoothing, not wavy ``` Then per chart: - **Remove chartjunk:** no vertical gridlines, faint horizontal gridlines only (`hairline`), no chart border, no background fill unless an area chart with a low-opacity accent. - **Direct-label** the end of lines / the key bar instead of a legend whenever feasible. - **Axis hygiene:** start value axes at 0 for bars (never truncate to exaggerate); concise tick formatting with units (`$1.2M`, `34%`, `12.4k`); label axes only when not obvious. - **Highlight one series in `accent`**, mute the rest to `muted`/`hairline`. Don't rainbow every series. - Add a `Source:` line under any chart with external data. ### 9.3 Number formatting (strict, deck-wide consistency) - **Thousands separators** always (`1,240,000` or `1.24M` — pick one convention per deck and keep it). - **Consistent decimals** within a metric (don't show 12.4% next to 12.40%). - **Units attached or in the axis/header**, never ambiguous. Currency symbol or code stated once. - **Localize on request** (e.g., Indian numbering `₹1,24,000` / lakh-crore if the audience is Indian; otherwise default to international). - **Deltas** carry sign + direction: `+34%` `▲` in `positive`, `−8%` `▼` in `negative`. - **Tabular figures** (`tabular-nums`) on every number so columns align. - Round to the **precision that matters** to the audience — boards want `$4.2M`, not `$4,231,887.34`. ### 9.4 Tables Financial-report styling: right-aligned numbers, generous row height, header in `muted` uppercase small, hairline under header and above totals, **bold totals**, subtle zebra at most. No heavy borders, no gridlines on every cell. For large tables, consider making rows reveal as fragments or letting the user sort. ### 9.5 ECharts Only when Chart.js can't do it (sankey, treemap, geo/map, large dense datasets, sunburst). Apply the same tokens (colors, fonts, hairline gridlines, ink tooltips). Keep the visual language identical to Chart.js slides so the deck feels uniform. --- ## 10. Writing & copy Copy makes a deck feel templated as fast as visuals do. - **Headlines = conclusions.** (Repeating §5 because it matters most.) - Plain verbs, sentence case, no filler, no hype adjectives ("revolutionary," "best-in-class," "synergy"). Specific beats clever. - Active voice. Name things the way the audience says them. - Bullets: max ~6 words each, parallel structure, no sub-sub-bullets. If a bullet runs two lines, it's a sentence — cut it. - Every chart gets a one-line **"so what"** insight. Data without interpretation is homework you're handing the audience. - Footnotes/sources in `muted`, small, bottom-left. Cite real sources; never fabricate a citation. --- ## 11. Print / PDF export (must work) Decks get emailed. Reveal exports via `?print-pdf` + browser "Print to PDF." Guarantee it: ```css @media print { @page { size: 1280px 720px; margin: 0; } .reveal .slides section { page-break-after: always; } /* ensure backgrounds/colors print */ * { -webkit-print-color-adjust: exact; print-color-adjust: exact; } } ``` - Test that charts render in print (Chart.js draws to canvas — trigger `resize`/render before print if needed; ECharts needs `renderer:'canvas'`). - No content clipped at slide edges (respect the safe area). - Fragments: decide whether the PDF shows the fully-built slide (`pdfSeparateFragments:false`, default) or each build step. - Tell the user the exact export steps in your delivery summary: open `deck.html?print-pdf`, Ctrl/Cmd-P, "Save as PDF," set margins to None, enable "Background graphics," landscape. --- ## 12. Accessibility & responsiveness (quality floor) - **Contrast:** text ≥ 4.5:1, large text/UI ≥ 3:1. Check the accent. - **Keyboard:** all interactive controls focusable with a visible focus ring; don't remove outlines without replacing them. - **Semantics:** real headings, `alt` on meaningful images, ARIA labels on icon-only buttons, charts get a text summary or `aria-label` describing the takeaway. - **Reduced motion** honored (§8). - **Scaling:** Reveal scales the 1280×720 stage to any screen automatically — verify it doesn't overflow on a laptop and is legible projected. The deck is *presented*, so it need not be mobile-perfect, but it shouldn't break on a phone preview. --- ## 13. Anti-patterns — do NOT ship these - ❌ Reveal's default theme / visible Tailwind-template look (rounded gradient cards, generic blue-violet hero). - ❌ Emoji as professional iconography. ❌ Clip-art, stock "handshake/lightbulb" images. - ❌ Pie/donut charts with many slices; 3D charts; truncated y-axes that lie. - ❌ Rainbow-colored series when one accent + muted would communicate better. - ❌ Drop shadows everywhere, neon glows, glassmorphism, animated gradients. - ❌ Title Case Headlines, ALL-CAPS body text, justified body text. - ❌ Walls of text; >6 bullets; bullets that are full sentences; sub-sub-bullets. - ❌ Zoom/cube/flip slide transitions; looping/auto-playing animations; parallax for its own sake. - ❌ Inconsistent number formats, non-tabular figures, missing units. - ❌ Fabricated data presented as real, or invented sources. - ❌ Hardcoded hex colors / one-off font sizes that bypass the token system. --- ## 14. Workflow when given a brief 1. **Clarify the essentials** (only if missing and consequential): audience & setting (board / client pitch / internal), narrative goal (the one decision you want), brand colors/fonts/logo, real data vs placeholder, light/dark, offline-needed. Ask at most a few; otherwise proceed and state assumptions. 2. **Outline the narrative first** — list slide headlines (as assertions) so the *argument* is sound before any pixels. Confirm or proceed. 3. **Set tokens** — lock colors, fonts, accent from brand (or defaults) before building. 4. **Build with templates (§7)**, one idea per slide, composing new layouts as needed. 5. **Wire data** — restyle Chart.js (§9.2), format numbers (§9.3), label placeholders. 6. **Add interactivity sparingly** (§8) — fragments on dense slides, animated chart entrances, toggles where they help. 7. **Self-critique pass** against §13 anti-patterns and §15 checklist. Remove one thing. Tighten spacing and number formatting. 8. **Deliver** the single `.html`, plus a short note: assumptions, which numbers are placeholders, how to present (keys), and how to export PDF (§11). --- ## 15. Pre-delivery checklist (run every time) - [ ] Opens as a single self-contained file; nav, fragments, overview all work. - [ ] Every content slide headline is an **assertion**, not a topic. - [ ] One idea per slide; consistent eyebrow / footer / slide number chrome. - [ ] Colors/fonts/sizes all come from tokens; accent used rarely and meaningfully. - [ ] Charts restyled (no chartjunk, direct labels, one highlighted series, 0-based bar axes, sources cited). - [ ] Numbers: tabular figures, consistent decimals/separators, units, signed deltas. - [ ] Animation restrained, ≤600ms, reduced-motion respected. - [ ] Contrast AA, keyboard focus visible, charts have text alternatives. - [ ] Prints to PDF cleanly (one slide/page, backgrounds + charts render, nothing clipped). - [ ] No anti-patterns from §13. Placeholder data clearly flagged to the user. - [ ] Took one accessory off — removed the least-necessary element on the busiest slide. --- ## Appendix A — Zero-dependency fallback engine (no Reveal) Use only when the user demands a single file with **no external libraries at all** (true offline / locked-down environment). Implement a minimal engine: - Slides are `

`; show one via a CSS class, advance with `keydown` (←/→/Space), click zones, and `hashchange`. - Scale a fixed 1280×720 stage with a CSS `transform: scale()` computed on resize. - Implement fragments as `.frag.is-visible` toggled by an index counter. - Print: same `@media print` rules; each `.slide { page-break-after: always; }`. - For charts without Chart.js: hand-build SVG (you control every pixel) — bars as ``, lines as ``, all colored from CSS vars. Keep them in the same visual language as §9. Keep the design system (§6), viz standards (§9), and anti-patterns (§13) **identical** — only the engine changes. --- ## Appendix B — Quick reference snippets **KPI card:** ```html

Net revenue retention

118%

▲ +6 pts YoY

``` **Slide shell:** ```html

Financial review

Revenue grew 34% on enterprise expansion

``` **Chart on slide-activate:** ```js Reveal.on('slidechanged', e => { const c = e.currentSlide.querySelector('canvas'); if (c && c._chart) c._chart.update(); }); ``` --- *End of CLAUDE.md. When in doubt: fewer elements, more whitespace, headlines that argue, numbers that align, one accent. Make it look like a studio built it.*