slides-grab 1.3.1 → 1.4.0

package/README-ko.md

@@ -92,13 +92,13 @@ slides-grab image --prompt "..."    # 로컬 슬라이드 이미지 생성
 slides-grab fetch-video --url <youtube-url> --slides-dir decks/my-deck  # yt-dlp로 동영상 에셋 다운로드
 slides-grab tldraw            # .tldr 다이어그램을 슬라이드 크기의 로컬 SVG로 렌더링
 slides-grab list-templates    # 사용 가능한 슬라이드 템플릿 표시
-slides-grab list-styles       # 번들된 95개 디자인 스타일 표시
+slides-grab list-styles       # 기본으로 선택 가능한 92개 디자인 스타일 표시 (3개 소스-앨리어스를 포함해 95개 해석 가능; --all로 전체 표시)
 slides-grab preview-styles    # 95개 스타일 미리보기 갤러리를 브라우저에서 열기
 ```
 
 ## 디자인 스타일 모음
 
-slides-grab은 [corazzon/pptx-design-styles](https://github.com/corazzon/pptx-design-styles)에서 파생된 30개 스타일, slides-grab 고유 스타일 5개, [epoko77-ai/design-diversity](https://github.com/epoko77-ai/design-diversity)에서 파생된 PPT 팩 60개를 포함해 총 95개 디자인 스타일을 제공합니다. 에이전트에게 특정 스타일을 요청하거나 완전히 커스텀 디자인을 요청할 수 있습니다.
+slides-grab은 [corazzon/pptx-design-styles](https://github.com/corazzon/pptx-design-styles)에서 파생된 30개 스타일, slides-grab 고유 스타일 5개, [epoko77-ai/design-diversity](https://github.com/epoko77-ai/design-diversity)에서 파생된 PPT 팩 60개를 포함해 총 95개 디자인 스타일을 제공합니다. 60개 design-diversity PPT 팩은 분류됩니다 — 직접 중복은 빌트인에 앨리어스 처리(기본 숨김)되고, 유사 중복은 `relatedStyleIds`로 연결되며, 완전히 새 팩은 추가됩니다. 따라서 92개만 기본으로 선택 가능하며 95개 모두 해석 가능합니다(`list-styles --all`로 앨리어스 확인). 에이전트에게 특정 스타일을 요청하거나 완전히 커스텀 디자인을 요청할 수 있습니다.
 
 ```bash
 slides-grab list-styles

package/README.md

@@ -100,13 +100,13 @@ slides-grab image --prompt "..."    # Generate a local slide image with god-tibo
 slides-grab fetch-video --url <youtube-url> --slides-dir decks/my-deck  # Download a local video asset with yt-dlp
 slides-grab tldraw           # Render a .tldr diagram into a slide-sized local SVG asset
 slides-grab list-templates    # Show available slide templates
-slides-grab list-styles       # Show 95 bundled design styles (browse, preview, select)
+slides-grab list-styles       # Show 92 selectable design styles by default (95 resolvable incl. 3 source-aliases; --all shows all)
 slides-grab preview-styles                        # Open the 95-style visual gallery in browser
 ```
 
 ## Design Style Collections
 
-slides-grab bundles 95 design styles: 30 derived from [corazzon/pptx-design-styles](https://github.com/corazzon/pptx-design-styles), 5 slides-grab originals, and 60 PPT packs derived from [epoko77-ai/design-diversity](https://github.com/epoko77-ai/design-diversity). Agents can also create fully custom designs beyond the bundled collection.
+slides-grab bundles 95 design styles: 30 derived from [corazzon/pptx-design-styles](https://github.com/corazzon/pptx-design-styles), 5 slides-grab originals, and 60 PPT packs derived from [epoko77-ai/design-diversity](https://github.com/epoko77-ai/design-diversity). The 60 design-diversity PPT packs are classified — direct duplicates are aliased to builtins (hidden by default), near-duplicates are linked via `relatedStyleIds`, and net-new packs are added — so 92 are selectable by default while all 95 remain resolvable (use `list-styles --all` to see aliases). Agents can also create fully custom designs beyond the bundled collection.
 
 ```bash
 slides-grab list-styles                           # Browse the catalog

package/bin/ppt-agent.js

@@ -370,10 +370,12 @@ program
 program
   .command('list-styles')
   .description('List bundled design styles agents and users can reference during slide generation')
-  .action(async () => {
+  .option('--all', 'Include source-alias styles that resolve to a builtin (hidden by default)')
+  .action(async (options = {}) => {
     try {
-      const { listDesignStyles } = await import('../src/design-styles.js');
-      const styles = listDesignStyles();
+      const { listDesignStyles, listSelectableDesignStyles } = await import('../src/design-styles.js');
+      const showAll = Boolean(options.all);
+      const styles = showAll ? listDesignStyles() : listSelectableDesignStyles();
 
       if (styles.length === 0) {
         console.log('No bundled design styles found.');
@@ -382,11 +384,33 @@ program
 
       console.log('Available design styles:\n');
       for (const style of styles) {
-        console.log(`  ${style.id.padEnd(22)} ${style.title}`);
+        let tag;
+        if (style.classification === 'builtin') {
+          tag = '[builtin]';
+        } else if (style.classification === 'source-variant') {
+          tag = '[variant]';
+        } else if (style.classification === 'source-alias') {
+          tag = `[alias -> ${style.aliasOf}]`;
+        } else {
+          tag = '[new]';
+        }
+        console.log(`  ${style.id.padEnd(38)} ${tag} ${style.title}`);
         console.log(`    ${style.mood} · ${style.bestFor}`);
+        if (style.classification === 'source-variant' && Array.isArray(style.relatedStyleIds) && style.relatedStyleIds.length) {
+          console.log(`    related: ${style.relatedStyleIds.join(', ')}`);
+        }
       }
 
-      console.log(`\nTotal: ${styles.length} styles`);
+      const totalResolvable = listDesignStyles().length;
+      if (!showAll) {
+        const hiddenCount = totalResolvable - styles.length;
+        console.log(`\nTotal: ${styles.length} selectable styles`);
+        console.log(`${hiddenCount} source-alias slug(s) hidden (resolve to a builtin); use --all to show all ${totalResolvable} resolvable styles`);
+      } else {
+        const selectableCount = listSelectableDesignStyles().length;
+        const aliasCount = totalResolvable - selectableCount;
+        console.log(`\nTotal: ${styles.length} resolvable styles (${selectableCount} selectable, ${aliasCount} aliases)`);
+      }
       console.log('Preview: slides-grab preview-styles [--style <id>]');
     } catch (error) {
       reportCliError(error);
@@ -495,6 +519,10 @@ program
         console.log(`Best for: ${style.bestFor}`);
         if (style.source?.repo) console.log(`Source: ${style.source.repo}`);
         if (style.source?.url) console.log(`Source URL: ${style.source.url}`);
+        if (style.classification) console.log(`Classification: ${style.classification}`);
+        if (style.aliasOf) console.log(`Alias of: ${style.aliasOf}`);
+        if (Array.isArray(style.aliases) && style.aliases.length) console.log(`Aliases: ${style.aliases.join(', ')}`);
+        if (Array.isArray(style.relatedStyleIds) && style.relatedStyleIds.length) console.log(`Related styles: ${style.relatedStyleIds.join(', ')}`);
         if (Array.isArray(style.background)) {
           console.log('\n## Background');
           for (const b of style.background) console.log(`- ${b}`);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "slides-grab",
-  "version": "1.3.1",
+  "version": "1.4.0",
   "description": "Agent-first presentation framework — plan, design, and visually edit HTML slides with Claude Code or Codex, then export to PDF or experimental/unstable PPTX/Figma formats",
   "license": "MIT",
   "author": "vkehfdl1",

package/scripts/build-viewer.js

@@ -10,8 +10,8 @@
 
 import { readFileSync, writeFileSync, readdirSync } from 'fs';
 import { createRequire } from 'node:module';
-import { join, resolve } from 'path';
-import { fileURLToPath } from 'url';
+import { dirname, extname, join, resolve } from 'path';
+import { fileURLToPath, pathToFileURL } from 'url';
 
 import { buildSlideRuntimeHtml } from '../src/image-contract.js';
 
@@ -24,6 +24,25 @@ const {
 } = require('../src/slide-mode.cjs');
 
 const DEFAULT_SLIDES_DIR = 'slides';
+const LOCAL_ASSET_PREFIX = './assets/';
+
+// Deliberate sandbox decision: allow-scripts (so Chart.js and other in-slide JS
+// render in the viewer) WITHOUT allow-same-origin. Omitting allow-same-origin gives
+// each iframe an opaque origin so first-party slide content cannot reach the parent
+// viewer document. Because relative URLs break under an opaque origin, local
+// ./assets/ references are inlined as data: URLs in loadSlides()/inlineLocalAssetsForSrcdoc.
+const SLIDE_FRAME_SANDBOX = 'allow-scripts';
+
+const MIME_BY_EXTENSION = new Map([
+  ['.avif', 'image/avif'],
+  ['.gif', 'image/gif'],
+  ['.jpg', 'image/jpeg'],
+  ['.jpeg', 'image/jpeg'],
+  ['.mp4', 'video/mp4'],
+  ['.png', 'image/png'],
+  ['.svg', 'image/svg+xml'],
+  ['.webp', 'image/webp'],
+]);
 
 function printUsage() {
   process.stdout.write(
@@ -127,18 +146,61 @@ export function escapeForSrcdoc(html) {
 }
 
 export function loadSlides(slidesDir) {
+  const slideBaseHref = pathToFileURL(`${resolve(slidesDir)}/`).href;
   return findSlideFiles(slidesDir).map((file) => {
-    const html = readFileSync(join(slidesDir, file), 'utf-8');
+    const slidePath = join(slidesDir, file);
+    const html = inlineLocalAssetsForSrcdoc(readFileSync(slidePath, 'utf-8'), slidePath);
     return {
       file,
       html: buildSlideRuntimeHtml(html, {
-        baseHref: './',
+        baseHref: slideBaseHref,
         slideFile: file,
       }),
     };
   });
 }
 
+function getMimeType(filePath) {
+  return MIME_BY_EXTENSION.get(extname(filePath).toLowerCase()) || 'application/octet-stream';
+}
+
+function toDataUrl(filePath) {
+  const bytes = readFileSync(filePath);
+  return `data:${getMimeType(filePath)};base64,${bytes.toString('base64')}`;
+}
+
+export function inlineLocalAssetsForSrcdoc(html, slidePath) {
+  const resolveAsset = (source) => {
+    if (!source.startsWith(LOCAL_ASSET_PREFIX)) {
+      return source;
+    }
+
+    try {
+      return toDataUrl(resolve(dirname(slidePath), source));
+    } catch {
+      return source;
+    }
+  };
+
+  return html
+    .replace(/\b(src|poster)=("([^"]*)"|'([^']*)')/gi, (match, attribute, quoted, doubleValue, singleValue) => {
+      const value = doubleValue ?? singleValue ?? '';
+      const nextValue = resolveAsset(value);
+      if (nextValue === value) {
+        return match;
+      }
+      const quote = quoted.startsWith("'") ? "'" : '"';
+      return `${attribute}=${quote}${nextValue}${quote}`;
+    })
+    .replace(/url\(\s*(['"]?)(\.\/assets\/[^'")]+)\1\s*\)/gi, (match, quote, source) => {
+      const nextValue = resolveAsset(source);
+      if (nextValue === source) {
+        return match;
+      }
+      return `url("${nextValue}")`;
+    });
+}
+
 export function buildViewerHtml(slides, { slideMode = DEFAULT_SLIDE_MODE } = {}) {
   const { framePt } = getSlideModeConfig(slideMode);
 
@@ -261,7 +323,7 @@ export function buildViewerHtml(slides, { slideMode = DEFAULT_SLIDE_MODE } = {})
 
     <div class="slide-viewport" id="viewport">
       <div class="slide-scaler" id="scaler">
-${slides.map((s, i) => `        <iframe class="slide-frame${i === 0 ? ' active' : ''}" data-slide="${i + 1}" srcdoc="${escapeForSrcdoc(s.html)}" sandbox="allow-same-origin"></iframe>`).join('\n')}
+${slides.map((s, i) => `        <iframe class="slide-frame${i === 0 ? ' active' : ''}" data-slide="${i + 1}" srcdoc="${escapeForSrcdoc(s.html)}" sandbox="${SLIDE_FRAME_SANDBOX}"></iframe>`).join('\n')}
       </div>
     </div>
   </div>

package/skills/slides-grab/SKILL.md

@@ -35,12 +35,14 @@ Use the installed **slides-grab-design** skill.
 5. If validation fails, automatically fix the slide HTML/CSS until validation passes.
 6. For bespoke slide imagery, use `slides-grab image --prompt "<prompt>" --slides-dir <path>` so the default god-tibo-imagen provider (reuses local Codex ChatGPT login — no API key required) saves a local asset under `<slides-dir>/assets/`.
 7. For complex diagrams (architecture, workflows, relationship maps, multi-node concepts), prefer `tldraw` over hand-built HTML/CSS diagrams. Render the asset with `slides-grab tldraw`, store it under `<slides-dir>/assets/`, and place it in the slide with a normal `<img>`.
-8. Keep local videos under `<slides-dir>/assets/`, prefer `poster="./assets/<file>"` thumbnails, and use `slides-grab fetch-video --url <youtube-url> --slides-dir <path>` (or `yt-dlp` directly) when the source starts on a supported web page.
-9. The default provider, god-tibo-imagen, reuses the local Codex ChatGPT login (`~/.codex/auth.json`) — run `codex login` once; no API key required. ⚠️ god-tibo-imagen uses an unsupported private Codex backend that may break without notice. Optional alternatives: `--provider codex` (Codex/OpenAI gpt-image-2 via `OPENAI_API_KEY`; maps `--aspect-ratio` to the nearest supported OpenAI image size; `--image-size 2K|4K` is Nano Banana-only) or `--provider nano-banana` (Google `gemini-3-pro-image-preview` via `GOOGLE_API_KEY` or `GEMINI_API_KEY`; supports `--image-size 2K|4K`). If credentials are unavailable, fall back to web search/download into `<slides-dir>/assets/`.
-10. **Run the design gate as an adversarial quality loop** before presenting the deck (`skills/slides-grab-design/references/design-gate.md`): capture render evidence (`slides-grab png … --output-dir <path>/gate-preview`), dispatch two parallel read-only reviewer passes when the current runtime supports subagents/tasks (A: System Contract / Constraint Integrity, B: Audience Impact / Expressive Readability), and synthesize contract coherence against audience impact into one Design Gate Report with a verdict. If subagents are unavailable, run the same two passes sequentially from the bundled reference. Review Litmus is the shared audience-success tie-breaker, not a third pass. **Resolve every Critical finding** (unreadable text, palette violation, AI slop trope as a slide's primary treatment, key slide with no visual anchor, invented data), re-run validate, capture fresh PNGs, and re-run both adversarial passes until the latest rendered state reaches `Proceed` or requires `Rethink approach`. For `Proceed`, the Pass A/B reports must follow the CLI-enforced structure in `slides-grab-design/references/design-gate.md` (role title, `VERDICT: PASS`, confidence, rendered PNG evidence filenames, current `slide-*.html: <sha256>` fingerprints, `Unresolved Critical: 0`, `Blocking findings: None`, findings table, and required checks marked `PASS`). When the verdict is `Proceed`, record the export-unlocking receipt with `slides-grab design-gate --slides-dir <path> --verdict proceed --pass-a-report <pass-a.md> --pass-b-report <pass-b.md>`. If the CLI rejects the reports, continue the fix → validate → render → A/B review loop. Track deferred Minor/Note in `<slides-dir>/design-debt.md`.
-11. Launch the interactive editor for review: `slides-grab edit --slides-dir <path>`
-12. Revise slides based on user feedback via the editor, then re-run validation and the design gate after each edit round that changes layout, color, typography, imagery, or content density.
-13. When the user confirms editing is complete, suggest next steps: build the viewer (`slides-grab build-viewer --slides-dir <path>`) for a final preview, or proceed directly to Stage 3 for PDF/PPTX export.
+8. For quantitative slides, use Chart.js as the default charting library. Start from `templates/chart.html` when useful, keep chart scripts inside each `slide-*.html`, set `animation: false`, `responsive: true`, and `maintainAspectRatio: false`, and size every `<canvas>` with a stable wrapper so validation can inspect real painted pixels.
+9. Keep local videos under `<slides-dir>/assets/`, prefer `poster="./assets/<file>"` thumbnails, and use `slides-grab fetch-video --url <youtube-url> --slides-dir <path>` (or `yt-dlp` directly) when the source starts on a supported web page.
+10. The default provider, god-tibo-imagen, reuses the local Codex ChatGPT login (`~/.codex/auth.json`) — run `codex login` once; no API key required. ⚠️ god-tibo-imagen uses an unsupported private Codex backend that may break without notice. Optional alternatives: `--provider codex` (Codex/OpenAI gpt-image-2 via `OPENAI_API_KEY`; maps `--aspect-ratio` to the nearest supported OpenAI image size; `--image-size 2K|4K` is Nano Banana-only) or `--provider nano-banana` (Google `gemini-3-pro-image-preview` via `GOOGLE_API_KEY` or `GEMINI_API_KEY`; supports `--image-size 2K|4K`). If credentials are unavailable, fall back to web search/download into `<slides-dir>/assets/`.
+11. **Run the design gate as an adversarial quality loop** before presenting the deck (`skills/slides-grab-design/references/design-gate.md`): capture render evidence (`slides-grab png … --output-dir <path>/gate-preview`), dispatch two parallel read-only reviewer passes when the current runtime supports subagents/tasks (A: System Contract / Constraint Integrity, B: Audience Impact / Expressive Readability), and synthesize contract coherence against audience impact into one Design Gate Report with a verdict. If subagents are unavailable, run the same two passes sequentially from the bundled reference. Review Litmus is the shared audience-success tie-breaker, not a third pass. **Resolve every Critical finding** (unreadable text, palette violation, AI slop trope as a slide's primary treatment, key slide with no visual anchor, invented data), re-run validate, capture fresh PNGs, and re-run both adversarial passes until the latest rendered state reaches `Proceed` or requires `Rethink approach`. For `Proceed`, the Pass A/B reports must follow the CLI-enforced structure in `slides-grab-design/references/design-gate.md` (role title, `VERDICT: PASS`, confidence, rendered PNG evidence filenames, current `slide-*.html: <sha256>` fingerprints, `Unresolved Critical: 0`, `Blocking findings: None`, findings table, and required checks marked `PASS`). When the verdict is `Proceed`, record the export-unlocking receipt with `slides-grab design-gate --slides-dir <path> --verdict proceed --pass-a-report <pass-a.md> --pass-b-report <pass-b.md>`. If the CLI rejects the reports, continue the fix → validate → render → A/B review loop. Track deferred Minor/Note in `<slides-dir>/design-debt.md`.
+12. Launch the interactive editor for review: `slides-grab edit --slides-dir <path>`
+13. For decks with Chart.js or other `<canvas>` charts, also build the viewer (`slides-grab build-viewer --slides-dir <path>`) and visually confirm the charts render in `viewer.html`; validation reports `empty-canvas` when a visible canvas has no painted pixels.
+14. Revise slides based on user feedback via the editor, then re-run validation and the design gate after each edit round that changes layout, color, typography, imagery, or content density.
+15. When the user confirms editing is complete, suggest next steps: build the viewer (`slides-grab build-viewer --slides-dir <path>`) for a final preview, or proceed directly to Stage 3 for PDF/PPTX export.
 
 **Do not proceed to Stage 3 without approval, and never while any Critical design-gate finding is unresolved.**
 
@@ -70,6 +72,7 @@ Use the installed **slides-grab-export** skill.
 7. Use the stage skills as the source of truth for plan, design, and export rules.
 8. When a slide needs a complex diagram, default to a `tldraw`-generated asset unless the user explicitly asks for a different approach.
 9. When a slide needs bespoke imagery, prefer the default god-tibo-imagen provider via `slides-grab image` (reuses local Codex ChatGPT login — no API key required) and keep the saved asset local under `<slides-dir>/assets/`.
+10. When a slide needs a chart, default to Chart.js in-slide canvas rendering and require `slides-grab validate` plus `slides-grab build-viewer` review so blank canvases are caught before export.
 
 ## Reference
 - `references/presentation-workflow-reference.md` — archived end-to-end workflow guidance from the legacy skill set

package/skills/slides-grab/references/presentation-workflow-reference.md

@@ -29,11 +29,12 @@ Use the installed **slides-grab-design** skill.
 6. Build the viewer: `slides-grab build-viewer --slides-dir <path>`
 7. When a slide calls for bespoke imagery, prefer `slides-grab image --prompt "<prompt>" --slides-dir <path>` so the default god-tibo-imagen provider (reuses local Codex ChatGPT login — no API key required) saves a local asset under `<slides-dir>/assets/`.
 8. For complex diagrams (architecture, workflows, relationship maps, multi-node concepts), prefer `tldraw`. Render a local diagram asset with `slides-grab tldraw`, store it under `<slides-dir>/assets/`, and place it into the slide with a normal `<img>`.
-9. Keep local videos under `<slides-dir>/assets/`, prefer `poster="./assets/<file>"` thumbnails, and use `slides-grab fetch-video --url <youtube-url> --slides-dir <path>` (or `yt-dlp` directly) when the source starts on a supported web page.
-10. The default provider, god-tibo-imagen, reuses the local Codex ChatGPT login (`~/.codex/auth.json`) — run `codex login` once; no API key required. ⚠️ god-tibo-imagen uses an unsupported private Codex backend that may break without notice. Optional alternatives: `--provider codex` (Codex/OpenAI gpt-image-2 via `OPENAI_API_KEY`; maps `--aspect-ratio` to the nearest supported OpenAI image size; `--image-size 2K|4K` is Nano Banana-only) or `--provider nano-banana` (Google `gemini-3-pro-image-preview` via `GOOGLE_API_KEY` or `GEMINI_API_KEY`; supports `--image-size 2K|4K`). If credentials are unavailable, fall back to web search + download into `<slides-dir>/assets/`.
-11. Present viewer to user for review.
-12. Revise individual slides based on feedback, then re-run validation and rebuild the viewer.
-13. Optionally launch the visual editor: `slides-grab edit --slides-dir <path>`
+9. For quantitative slides, use Chart.js as the default charting library, preferably starting from `templates/chart.html`. Keep scripts in `slide-*.html`, disable animation, use stable canvas wrappers, and fix any `empty-canvas` validation error before review.
+10. Keep local videos under `<slides-dir>/assets/`, prefer `poster="./assets/<file>"` thumbnails, and use `slides-grab fetch-video --url <youtube-url> --slides-dir <path>` (or `yt-dlp` directly) when the source starts on a supported web page.
+11. The default provider, god-tibo-imagen, reuses the local Codex ChatGPT login (`~/.codex/auth.json`) — run `codex login` once; no API key required. ⚠️ god-tibo-imagen uses an unsupported private Codex backend that may break without notice. Optional alternatives: `--provider codex` (Codex/OpenAI gpt-image-2 via `OPENAI_API_KEY`; maps `--aspect-ratio` to the nearest supported OpenAI image size; `--image-size 2K|4K` is Nano Banana-only) or `--provider nano-banana` (Google `gemini-3-pro-image-preview` via `GOOGLE_API_KEY` or `GEMINI_API_KEY`; supports `--image-size 2K|4K`). If credentials are unavailable, fall back to web search + download into `<slides-dir>/assets/`.
+12. Present viewer to user for review. For Chart.js decks, specifically confirm charts render inside `viewer.html`.
+13. Revise individual slides based on feedback, then re-run validation and rebuild the viewer.
+14. Optionally launch the visual editor: `slides-grab edit --slides-dir <path>`
 
 **Do not proceed to Stage 3 without approval.**
 
@@ -57,3 +58,4 @@ Use the installed **slides-grab-export** skill.
 5. **Call out export risk clearly**: PPTX and Figma export are experimental / unstable and should be described as best-effort output.
 6. **Prefer tldraw for complex diagrams**: Use `slides-grab tldraw` for diagram-heavy slides unless the user explicitly wants another rendering path.
 7. **Prefer Codex/OpenAI for bespoke imagery**: Use `slides-grab image` when a slide benefits from generated imagery, and keep the result as a local asset under `<slides-dir>/assets/`.
+8. **Prefer Chart.js for charts**: Use real canvas charts for quantitative claims and require validation plus viewer review before export.

package/skills/slides-grab-design/SKILL.md

@@ -33,17 +33,19 @@ Generate high-quality `slide-XX.html` files in the selected slides workspace (`s
 6. When a slide needs iconography, prefer Lucide as the default icon library. Use clean Lucide icons before falling back to emoji, and only use emoji when the brief explicitly calls for them.
 7. When a slide explicitly needs bespoke imagery, when the user asks for an image, or when stronger imagery would materially improve the slide, prefer `slides-grab image --prompt "<prompt>" --slides-dir <path>` to generate a local asset with the default god-tibo-imagen provider (which reuses the local Codex ChatGPT login — no API key required) and save it under `<slides-dir>/assets/`.
 8. If the deck needs a complex diagram (architecture, workflows, relationship maps, multi-node concepts), create the diagram in `tldraw`, export it with `slides-grab tldraw`, and treat the result as a local slide asset under `<slides-dir>/assets/`.
-9. If the slide needs a local video, store the video under `<slides-dir>/assets/`, reference it as `./assets/<file>`, and prefer a `poster="./assets/<file>"` thumbnail so PDF export uses a stable still image.
-10. If the source video starts on YouTube or another supported page, use `slides-grab fetch-video --url <youtube-url> --slides-dir <path>` (or `yt-dlp` directly if needed) to download it into `<slides-dir>/assets/` before saving the slide HTML.
-11. Run `slides-grab validate --slides-dir <path>` after generation or edits.
-12. If validation fails, automatically fix the source slide HTML/CSS and re-run validation until it passes.
-13. Run the slide litmus check from `references/beautiful-slide-defaults.md` before presenting the deck for review.
-14. **Run the design gate as an adversarial quality loop** (`references/design-gate.md`) before showing the deck: (a) capture render evidence with `slides-grab png --slides-dir <path> --output-dir <path>/gate-preview --resolution 1080p`; (b) run two read-only reviewer passes — Pass A (System Contract / Constraint Integrity) and Pass B (Audience Impact / Expressive Readability) — that open the rendered PNGs directly, using runtime-native subagents/tasks in parallel when available or sequential passes when not; (c) synthesize contract coherence against audience impact into a single Design Gate Report ending in a verdict (`Proceed` / `Revise and re-review` / `Rethink approach`). Review Litmus is the shared audience-success tie-breaker, not a third pass. Keep the two reviewer passes distinct from the slide-building pass. The render evidence aims the reviewers; it is not the verdict. For `Proceed`, each pass report must satisfy the CLI-enforced structure in `references/design-gate.md`: role title, `VERDICT: PASS`, confidence, rendered PNG evidence filenames, current `slide-*.html: <sha256>` fingerprints, `Unresolved Critical: 0`, `Blocking findings: None`, a findings table, and all required checks marked `PASS`.
-15. **Repeat until the latest rendered state survives the gate.** Critical findings (unreadable text, palette violation, an AI slop trope used as a slide's primary treatment, a key slide with no real visual anchor, invented data shown as real) hard-block progress. Fix the source HTML/CSS, re-run `slides-grab validate`, capture fresh PNGs, then re-run both adversarial passes until the verdict is `Proceed` (zero unresolved Critical) or `Rethink approach` requires redesigning the visual thesis/system. When the verdict is `Proceed`, write the export-unlocking receipt with `slides-grab design-gate --slides-dir <path> --verdict proceed --pass-a-report <pass-a.md> --pass-b-report <pass-b.md>`. If the CLI rejects the reports, treat that as the loop still failing: fix the missing evidence/checks or unresolved findings, re-render, re-review, and retry. Record deferred Minor/Note findings in `<slides-dir>/design-debt.md`; never silently drop a finding.
-16. Launch the interactive editor for visual review: `slides-grab edit --slides-dir <path>`
-17. Iterate on user feedback by editing only requested slide files, then re-run validation and the design gate after each edit round that changes layout, color, typography, imagery, or content density.
-18. When the user confirms editing is complete, suggest: build the viewer (`slides-grab build-viewer --slides-dir <path>`) for a final read-only preview, or proceed to export (PDF/PPTX).
-19. Keep revising until user approves conversion stage.
+9. If a slide needs a chart, default to Chart.js (`<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>`) and start from `templates/chart.html` when helpful. Keep the script in the slide HTML, use real data from the outline/research, set `animation: false`, `responsive: true`, and `maintainAspectRatio: false`, wrap each `<canvas>` in a fixed-size or flex-stable container, and use direct labels or concise legends that match the approved style tokens.
+10. If the slide needs a local video, store the video under `<slides-dir>/assets/`, reference it as `./assets/<file>`, and prefer a `poster="./assets/<file>"` thumbnail so PDF export uses a stable still image.
+11. If the source video starts on YouTube or another supported page, use `slides-grab fetch-video --url <youtube-url> --slides-dir <path>` (or `yt-dlp` directly if needed) to download it into `<slides-dir>/assets/` before saving the slide HTML.
+12. Run `slides-grab validate --slides-dir <path>` after generation or edits. Treat `empty-canvas` as a chart-rendering failure: fix the Chart.js target id, script loading, canvas sizing, or chart initialization until the canvas paints.
+13. If validation fails, automatically fix the source slide HTML/CSS and re-run validation until it passes.
+14. Run the slide litmus check from `references/beautiful-slide-defaults.md` before presenting the deck for review.
+15. **Run the design gate as an adversarial quality loop** (`references/design-gate.md`) before showing the deck: (a) capture render evidence with `slides-grab png --slides-dir <path> --output-dir <path>/gate-preview --resolution 1080p`; (b) run two read-only reviewer passes — Pass A (System Contract / Constraint Integrity) and Pass B (Audience Impact / Expressive Readability) — that open the rendered PNGs directly, using runtime-native subagents/tasks in parallel when available or sequential passes when not; (c) synthesize contract coherence against audience impact into a single Design Gate Report ending in a verdict (`Proceed` / `Revise and re-review` / `Rethink approach`). Review Litmus is the shared audience-success tie-breaker, not a third pass. Keep the two reviewer passes distinct from the slide-building pass. The render evidence aims the reviewers; it is not the verdict. For `Proceed`, each pass report must satisfy the CLI-enforced structure in `references/design-gate.md`: role title, `VERDICT: PASS`, confidence, rendered PNG evidence filenames, current `slide-*.html: <sha256>` fingerprints, `Unresolved Critical: 0`, `Blocking findings: None`, a findings table, and all required checks marked `PASS`.
+16. **Repeat until the latest rendered state survives the gate.** Critical findings (unreadable text, palette violation, an AI slop trope used as a slide's primary treatment, a key slide with no real visual anchor, invented data shown as real) hard-block progress. Fix the source HTML/CSS, re-run `slides-grab validate`, capture fresh PNGs, then re-run both adversarial passes until the verdict is `Proceed` (zero unresolved Critical) or `Rethink approach` requires redesigning the visual thesis/system. When the verdict is `Proceed`, write the export-unlocking receipt with `slides-grab design-gate --slides-dir <path> --verdict proceed --pass-a-report <pass-a.md> --pass-b-report <pass-b.md>`. If the CLI rejects the reports, treat that as the loop still failing: fix the missing evidence/checks or unresolved findings, re-render, re-review, and retry. Record deferred Minor/Note findings in `<slides-dir>/design-debt.md`; never silently drop a finding.
+17. Launch the interactive editor for visual review: `slides-grab edit --slides-dir <path>`
+18. For decks with Chart.js or other canvas charts, also run `slides-grab build-viewer --slides-dir <path>` and open `viewer.html` to confirm charts render inside the generated iframe viewer, not only as standalone `slide-*.html` files.
+19. Iterate on user feedback by editing only requested slide files, then re-run validation and the design gate after each edit round that changes layout, color, typography, imagery, or content density.
+20. When the user confirms editing is complete, suggest: build the viewer (`slides-grab build-viewer --slides-dir <path>`) for a final read-only preview, or proceed to export (PDF/PPTX).
+21. Keep revising until user approves conversion stage.
 
 ## Rules
 - Keep slide size 720pt x 405pt.
@@ -67,6 +69,8 @@ Generate high-quality `slide-XX.html` files in the selected slides workspace (`s
 - Avoid AI slop tropes — aggressive gradient backgrounds, left-border accent cards, SVG-drawn imagery, generic font stacks (Inter/Roboto/Arial), and generic 3×2 icon-plus-blurb grids. See `references/beautiful-slide-defaults.md` for the full list.
 - Prefer `tldraw` for complex diagrams instead of recreating dense node/edge diagrams directly in HTML/CSS.
 - Use `slides-grab tldraw` plus `templates/diagram-tldraw.html` when that gives a cleaner, more export-friendly result.
+- Prefer Chart.js for charts. Do not fake charts with decorative div bars when the slide is communicating data; real `<canvas>` charts are validated for painted pixels and blank canvases fail as `empty-canvas`.
+- Keep Chart.js chart animation disabled for deterministic validation/export, and keep canvas dimensions stable with CSS so the drawing buffer and layout box are both non-zero.
 - Do not present slides for review until `slides-grab validate --slides-dir <path>` passes.
 - Do not present slides for review, and do not advance toward export, while any **Critical** design-gate finding is unresolved (`references/design-gate.md`). Critical hard-blocks; Major findings are listed for user acceptance; Minor/Note findings may be tracked. `slides-grab pdf`, `slides-grab convert`, and `slides-grab figma` require a fresh `slides-grab design-gate` Proceed receipt.
 - Do not start conversion before approval.

package/skills/slides-grab-design/references/design-rules.md

@@ -24,6 +24,14 @@ These are the packaged design rules for installable `slides-grab` skills.
 - Avoid emoji as the default icon treatment; only use emoji when the brief explicitly calls for them.
 - Keep icons visually consistent within a deck (stroke weight, size, and color should follow the slide's design tokens).
 
+## Chart guidance
+- Use Chart.js as the default charting library for quantitative slides; `templates/chart.html` is the packaged starting point.
+- Keep chart scripts inside the relevant `slide-*.html` file and initialize charts after the target `<canvas>` exists.
+- Use `animation: false`, `responsive: true`, and `maintainAspectRatio: false` for deterministic validation, viewer preview, and export.
+- Put each `<canvas>` inside a stable fixed-size or flex-stable wrapper so the layout box and drawing buffer are non-zero.
+- Use real data from the outline/research notes, label sample data as sample/synthetic, and avoid decorative pseudo-charts for data claims.
+- Run `slides-grab validate --slides-dir <path>` and fix any `empty-canvas` error before building the viewer or exporting.
+
 ## Asset rules
 - Store deck-local assets in `<slides-dir>/assets/`
 - Reference deck-local assets as `./assets/<file>`
@@ -61,6 +69,7 @@ These are the packaged design rules for installable `slides-grab` skills.
 - Generate or edit only the needed slide files.
 - Prefer `slides-grab image` before remote image sourcing when the slide needs bespoke imagery.
 - Prefer `tldraw` for complex diagrams instead of hand-building dense diagram geometry in HTML/CSS.
+- Prefer Chart.js for charts and verify the generated `viewer.html` when a deck contains `<canvas>` charts.
 - Re-run validation after every generation/edit pass.
 - Rebuild the viewer only after validation passes.
 - Do not move to export until the user approves the reviewed deck.

package/skills/slides-grab-design/references/detailed-design-rules.md

@@ -42,12 +42,21 @@
 - Do not default to emoji for iconography; reserve emoji for cases where the brief explicitly wants a playful or native-emoji tone.
 - Keep icon sizing, stroke weight, and color aligned with the deck's approved design tokens.
 
+## Chart Usage Rules
+- Prefer Chart.js for bar, line, pie, doughnut, and mixed quantitative slides.
+- Start from `templates/chart.html` when a chart slide needs a proven structure.
+- Keep the `<canvas>` in a stable wrapper and set Chart.js options to `animation: false`, `responsive: true`, and `maintainAspectRatio: false`.
+- Match chart colors to the approved style tokens; avoid rainbow palettes unless the data categories require distinct hues.
+- Direct-label the key data point or keep legends short. Do not let chart legends compete with the slide headline.
+- `slides-grab validate` treats a visible unpainted canvas as `empty-canvas`; fix script loading, target ids, sizing, or data before review/export.
+
 ## Workflow (Stage 2: Design + Human Review)
 - After slide generation or edits, run `slides-grab validate --slides-dir <path>`.
 - After validation passes, run `slides-grab build-viewer --slides-dir <path>`.
 - Edit only the relevant HTML file during revision loops.
 - When the brief explicitly calls for an image, the user requests one, or the slide clearly benefits from it, prefer `slides-grab image` before falling back to remote image sourcing.
 - Prefer `slides-grab tldraw` + local exported assets for architecture, workflow, relationship, and other complex diagrams.
+- For Chart.js decks, open the generated viewer and confirm charts render inside `viewer.html`, not only as standalone slide files.
 - Keep local videos and their poster thumbnails together under `<slides-dir>/assets/`.
 - Never start PPTX conversion without explicit approval.
 - Never forget to build the viewer after slide changes.

package/skills/slides-grab-export/SKILL.md

@@ -30,16 +30,18 @@ Convert reviewed slide HTML into PDF or per-slide PNG reliably, and into experim
 4. If the user also wants a PDF deck:
    - `slides-grab pdf --slides-dir <path> --output <name>.pdf`
    - Add `--slide-mode card-news` when the deck is square.
-5. If the user wants PPTX (experimental / unstable):
+5. For decks with Chart.js or other `<canvas>` charts, confirm `slides-grab validate --slides-dir <path>` passes without `empty-canvas`, then build/open `viewer.html` once before export. Chart.js charts should use disabled animation so PDF/PNG capture sees the final painted state.
+6. If the user wants PPTX (experimental / unstable):
    - `slides-grab convert --slides-dir <path> --output <name>.pptx`
-6. If the user wants Figma-importable PPTX (experimental / unstable):
+7. If the user wants Figma-importable PPTX (experimental / unstable):
    - `slides-grab figma --slides-dir <path> --output <name>-figma.pptx`
-7. Report success/failure with actionable errors.
+8. Report success/failure with actionable errors.
 
 ## Rules
 - Do not export while any **Critical** design-gate finding is unresolved (`../slides-grab-design/references/design-gate.md`). The design gate is a hard precondition for this stage, and `slides-grab pdf`, `slides-grab convert`, and `slides-grab figma` block if the latest receipt is missing or stale.
 - Do not modify slide content during conversion stage unless explicitly requested.
 - If conversion fails, diagnose and fix root causes in source HTML/CSS.
+- For chart-heavy decks, treat a blank exported chart as a source rendering bug first: re-run validation, inspect `empty-canvas`, and verify the same slide in `viewer.html` before retrying PDF/PNG/PPTX export.
 - Always tell the user that PPTX and Figma export are experimental / unstable and may require manual cleanup.
 - Use the packaged CLI and bundled references only; do not depend on unpublished agent-specific files.
 

package/skills/slides-grab-export/references/export-rules.md

@@ -11,6 +11,9 @@ These are the packaged export rules for installable `slides-grab` skills.
 - Only export after the user approves the reviewed HTML slides.
 - Do not modify slide content during export unless explicitly requested.
 - If export fails, fix the root cause in the source HTML/CSS or packaged runtime path.
+- For decks with Chart.js or other `<canvas>` charts, run `slides-grab validate --slides-dir <path>` first and fix any `empty-canvas` error before exporting.
+- Build and open `viewer.html` once for chart-heavy decks so the same charts are confirmed in the generated review surface.
+- Keep Chart.js animation disabled in source slides so PDF/PNG capture sees the final painted chart.
 
 ## User-facing caveats
 - PPTX export is experimental / unstable.

package/skills/slides-grab-plan/SKILL.md

@@ -20,6 +20,7 @@ Produce an approved `slide-outline.md` before any slide HTML generation.
 
 ## Output
 - `slide-outline.md` (must include `style: <id>` in meta section)
+- For chart-heavy decks, explicit chart slide notes: chart type, data source, key comparison, and whether the design stage should use the default Chart.js canvas template.
 
 ## Workflow
 1. Analyze user goal and audience.
@@ -37,6 +38,7 @@ Produce an approved `slide-outline.md` before any slide HTML generation.
    - bundled style → `style: <id>`
    - converted DESIGN.slides.md → `style: ./DESIGN.slides.md`
    - free-form custom direction → leave a one-paragraph `style:` block describing it
+   - for chart slides, name the intended chart type and data payload in the slide notes so Stage 2 can build a real Chart.js canvas instead of placeholder bars or decorative pseudo-charts
 5. Present a concise summary to user.
 6. Repeat revisions until explicit approval.
 
@@ -44,6 +46,7 @@ Produce an approved `slide-outline.md` before any slide HTML generation.
 - **Do not write the outline before the user approves a style.** Style selection comes first.
 - Do not generate slide HTML (`<slides-dir>/slide-*.html`) in this stage.
 - Keep scope to structure, narrative, and style selection.
+- For quantitative stories, plan charts as evidence: identify the source values, comparison axis, baseline, and intended takeaway. Do not invent filler metrics just to fill a chart.
 - Ask for approval before moving to design.
 - Assume later stages run through the packaged `slides-grab` CLI.
 - Use the packaged CLI and bundled references only; do not depend on unpublished agent-specific files.

package/src/design-styles.js

@@ -38,9 +38,68 @@ function getStyleSource(style) {
   return DESIGN_STYLES_SOURCE;
 }
 
+const DESIGN_DIVERSITY_ALIAS_MAP = {
+  'ppt-glassmorphism': 'glassmorphism',
+  'ppt-neo-brutalism': 'neo-brutalism',
+  'ppt-editorial-magazine': 'editorial-magazine',
+};
+
+const DESIGN_DIVERSITY_RELATED_MAP = {
+  'ppt-consulting-precision-grid': ['swiss-international-style', 'executive-minimal', 'corporate-blue'],
+  'ppt-mckinsey-ghost-deck': ['swiss-international-style', 'executive-minimal'],
+  'ppt-bcg-exhibit-deck': ['swiss-international-style', 'corporate-blue'],
+  'ppt-bain-results-deck': ['executive-minimal', 'corporate-blue'],
+  'ppt-keynote-minimal-fullbleed': ['monochrome-minimal', 'executive-minimal'],
+  'ppt-minimal-mono-note': ['monochrome-minimal'],
+  'ppt-monochrome-risk': ['monochrome-minimal', 'executive-minimal'],
+  'ppt-monochrome-infrastructure-deck': ['monochrome-minimal', 'executive-minimal'],
+  'ppt-dark-tech': ['modern-dark', 'cyberpunk-outline'],
+  'ppt-engineered-dark-deck': ['modern-dark'],
+  'ppt-prismatic-dark-deck': ['modern-dark', 'scifi-holographic-data'],
+  'ppt-dark-luxury-keynote': ['modern-dark', 'dark-neon-miami'],
+  'ppt-vivid-gradient-future': ['gradient-mesh', 'aurora-neon-glow'],
+  'ppt-vivid-gradient-infographic-deck': ['gradient-mesh', 'aurora-neon-glow'],
+};
+
+// reverse map: builtin id -> [dd slug] for enrichment
+const BUILTIN_ALIAS_SLUGS = Object.entries(DESIGN_DIVERSITY_ALIAS_MAP).reduce((acc, [slug, builtinId]) => {
+  (acc[builtinId] = acc[builtinId] || []).push(slug);
+  return acc;
+}, {});
+
+function classifyStyle(style) {
+  if (style.collection === 'design-diversity') {
+    const slug = style.id;
+    if (DESIGN_DIVERSITY_ALIAS_MAP[slug]) {
+      return {
+        classification: 'source-alias',
+        sourceSlug: slug,
+        aliasOf: DESIGN_DIVERSITY_ALIAS_MAP[slug],
+        relatedStyleIds: [],
+      };
+    }
+    if (DESIGN_DIVERSITY_RELATED_MAP[slug]) {
+      return {
+        classification: 'source-variant',
+        sourceSlug: slug,
+        relatedStyleIds: [...DESIGN_DIVERSITY_RELATED_MAP[slug]],
+      };
+    }
+    return {
+      classification: 'source-new',
+      sourceSlug: slug,
+      relatedStyleIds: [],
+    };
+  }
+  const extra = { classification: 'builtin', relatedStyleIds: [] };
+  if (BUILTIN_ALIAS_SLUGS[style.id]) extra.aliases = [...BUILTIN_ALIAS_SLUGS[style.id]];
+  return extra;
+}
+
 const DESIGN_STYLES = [...RAW_DESIGN_STYLES, ...RAW_DESIGN_DIVERSITY_STYLES].map((style) => Object.freeze({
   ...style,
   source: getStyleSource(style),
+  ...classifyStyle(style),
 }));
 
 const DESIGN_STYLES_BY_ID = new Map(DESIGN_STYLES.map((style) => [style.id, style]));
@@ -49,6 +108,10 @@ export function listDesignStyles() {
   return DESIGN_STYLES;
 }
 
+export function listSelectableDesignStyles() {
+  return DESIGN_STYLES.filter((style) => style.classification !== 'source-alias');
+}
+
 export function getDesignStyle(styleId) {
   if (!styleId) {
     return null;

package/src/validation/core.js

@@ -362,6 +362,10 @@ export async function inspectSlide(page, fileName, slidesDir, slideMode = DEFAUL
     if (document.fonts?.ready) {
       await document.fonts.ready;
     }
+
+    await new Promise((resolve) => {
+      requestAnimationFrame(() => requestAnimationFrame(resolve));
+    });
   });
 
   const inspection = await page.evaluate(
@@ -406,6 +410,61 @@ export async function inspectSlide(page, fileName, slidesDir, slideMode = DEFAUL
         };
       };
 
+      const inspectCanvasPaint = (canvas) => {
+        const rect = canvas.getBoundingClientRect();
+        const context = canvas.getContext('2d');
+        const metrics = {
+          layoutWidth: round(rect.width),
+          layoutHeight: round(rect.height),
+          bufferWidth: canvas.width,
+          bufferHeight: canvas.height,
+          sampledPixels: 0,
+          paintedSamples: 0,
+        };
+
+        if (!context || canvas.width <= 0 || canvas.height <= 0) {
+          return {
+            empty: true,
+            reason: !context ? '2d-context-unavailable' : 'zero-size-drawing-buffer',
+            metrics,
+          };
+        }
+
+        try {
+          const imageData = context.getImageData(0, 0, canvas.width, canvas.height).data;
+          const totalPixels = canvas.width * canvas.height;
+          const stride = Math.max(1, Math.ceil(totalPixels / 50000));
+          let sampledPixels = 0;
+          let paintedSamples = 0;
+
+          for (let pixel = 0; pixel < totalPixels; pixel += stride) {
+            sampledPixels += 1;
+            if (imageData[(pixel * 4) + 3] !== 0) {
+              paintedSamples += 1;
+              break;
+            }
+          }
+
+          metrics.sampledPixels = sampledPixels;
+          metrics.paintedSamples = paintedSamples;
+
+          return {
+            empty: paintedSamples === 0,
+            reason: paintedSamples === 0 ? 'transparent-drawing-buffer' : '',
+            metrics,
+          };
+        } catch (error) {
+          return {
+            empty: true,
+            reason: 'drawing-buffer-unreadable',
+            metrics: {
+              ...metrics,
+              detail: error instanceof Error ? error.message : String(error),
+            },
+          };
+        }
+      };
+
       const elementPath = (element) => {
         if (!element || element.nodeType !== Node.ELEMENT_NODE) return '';
         if (element === document.body) return 'body';
@@ -587,6 +646,23 @@ export async function inspectSlide(page, fileName, slidesDir, slideMode = DEFAUL
         });
       }
 
+      const canvases = Array.from(document.querySelectorAll('canvas'));
+      for (const canvas of canvases) {
+        if (!isVisible(canvas)) continue;
+
+        const result = inspectCanvasPaint(canvas);
+        if (!result.empty) continue;
+
+        critical.push({
+          code: 'empty-canvas',
+          message: 'Canvas has visible layout size but no painted pixels. Chart.js and other canvas charts must render before validation.',
+          element: elementPath(canvas),
+          detail: result.reason,
+          metrics: result.metrics,
+          bbox: normalizeRect(canvas.getBoundingClientRect()),
+        });
+      }
+
       const parents = [document.body, ...allVisibleElements];
       for (const parent of parents) {
         const children = Array.from(parent.children).filter((child) => visibleSet.has(child));