slides-grab 1.3.0 → 1.4.0

package/skills/slides-grab-design/references/design-system-full.md

@@ -105,7 +105,7 @@ All color palettes are now bundled as design styles accessible via `slides-grab
 - **corporate-blue** — Traditional business (white + blue accent)
 - **warm-neutral** — Warm and approachable (cream + terracotta)
 
-Run `slides-grab list-styles` to browse all 35 bundled styles, or design a fully custom palette when none fit.
+Run `slides-grab list-styles` to browse all 95 bundled styles, or design a fully custom palette when none fit.
 
 ---
 
@@ -538,7 +538,7 @@ This skill is **Stage 2**. It works from the `slide-outline.md` approved by the
 4. **Auto-fix validation issues**: If validation fails, fix the source HTML/CSS and re-run validation until it passes
 5. **Auto-build viewer**: After validation passes, automatically run:
    ```bash
-   node scripts/build-viewer.js --slides-dir <path>
+   slides-grab build-viewer --slides-dir <path>
    ```
 6. **Guide user to review**: Tell the user to check slides in the browser:
    ```
@@ -547,7 +547,7 @@ This skill is **Stage 2**. It works from the `slide-outline.md` approved by the
 7. **Revision loop**: When the user requests changes to specific slides:
    - Edit only the relevant HTML file
    - Re-run `slides-grab validate --slides-dir <path>` and fix any failures
-   - Re-run `node scripts/build-viewer.js --slides-dir <path>` to rebuild the viewer
+   - Re-run `slides-grab build-viewer --slides-dir <path>` to rebuild the viewer
    - Guide user to review again
 8. **Completion**: Repeat the revision loop until the user signals approval for PPTX conversion
 
@@ -555,7 +555,7 @@ This skill is **Stage 2**. It works from the `slide-outline.md` approved by the
 - **Never start PPTX conversion without approval** — PPTX conversion is the responsibility of `pptx-skill` and requires explicit user approval.
 - **Prefer tldraw for complex diagrams** — Use `slides-grab tldraw` when the slide needs a non-trivial diagram instead of forcing dense diagram geometry into HTML/CSS.
 - **Never skip validation** — Run `slides-grab validate --slides-dir <path>` after generation or edits and fix failures before review.
-- **Never forget to build the viewer** — Run `node scripts/build-viewer.js --slides-dir <path>` every time slides are generated or modified.
+- **Never forget to build the viewer** — Run `slides-grab build-viewer --slides-dir <path>` every time slides are generated or modified.
 
 ---
 

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

@@ -1,13 +1,13 @@
 ---
 name: slides-grab-export
-description: Stage 3 conversion skill for Codex. Convert approved HTML slides to PDF or per-slide PNG reliably, and to experimental / unstable PPTX/Figma outputs on a best-effort basis.
+description: Stage 3 conversion skill usable in Codex and Claude Code. Convert approved HTML slides to PDF or per-slide PNG reliably, and to experimental / unstable PPTX/Figma outputs on a best-effort basis.
 metadata:
   short-description: Convert slides and run conversion checks
 ---
 
-# slides-grab Export Skill (Codex)
+# slides-grab Export Skill
 
-Use this only after the user approves design output.
+Use this only after the user approves design output **and the Stage 2 design gate verdict is `Proceed`** (zero unresolved Critical findings — see `../slides-grab-design/references/design-gate.md`). PDF, PPTX, and Figma exports require a fresh `slides-grab design-gate` Proceed receipt for the current slide files.
 
 ## Goal
 Convert reviewed slide HTML into PDF or per-slide PNG reliably, and into experimental / unstable PPTX/Figma outputs on a best-effort basis.
@@ -20,7 +20,7 @@ Convert reviewed slide HTML into PDF or per-slide PNG reliably, and into experim
 - Presentation artifact (`.pdf`, `.png` per slide, or `.pptx`)
 
 ## Workflow
-1. Confirm user approval for conversion.
+1. Confirm user approval for conversion **and that the Stage 2 design gate passed** with verdict `Proceed`. If any **Critical** design-gate finding is still unresolved, refuse to export — return to Stage 2, fix the Critical issue, re-run the gate, record Proceed with `slides-grab design-gate`, and only then convert.
 2. Pick the right primary target:
    - Card-news / Instagram-style decks → `slides-grab png --slides-dir <path> --slide-mode card-news --resolution 2160p` (see `slides-grab-card-news`).
    - Widescreen slide decks → `slides-grab pdf --slides-dir <path> --output <name>.pdf`.
@@ -30,15 +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-export/references/pptx-skill-reference.md

@@ -37,10 +37,7 @@ If prerequisites are not met, guide the user to review slides in `<slides-dir>/v
    ```bash
    slides-grab convert --slides-dir <path> --output presentation.pptx
    ```
-   - Script-level alternative:
-   ```bash
-   node .claude/skills/pptx-skill/scripts/html2pptx.js
-   ```
+   - Use the packaged `slides-grab convert` command rather than runtime-local skill scripts.
 
 3. **Verify results**
    - Check generated PPTX file carefully; expect best-effort fidelity only
@@ -48,51 +45,19 @@ If prerequisites are not met, guide the user to review slides in `<slides-dir>/v
 
 ## Script Usage
 
-### html2pptx.js
-Convert HTML files to PPTX
-
-```javascript
-import { html2pptx } from './.claude/skills/pptx-skill/scripts/html2pptx.js';
-import PptxGenJS from 'pptxgenjs';
-
-const pres = new PptxGenJS();
-pres.layout = 'LAYOUT_WIDE'; // 16:9
-
-// Convert each slide
-await html2pptx('<slides-dir>/slide-01.html', pres);
-await html2pptx('<slides-dir>/slide-02.html', pres);
-
-// Save
-await pres.writeFile({ fileName: 'presentation.pptx' });
-```
-
-### thumbnail.py
-Generate presentation thumbnail grid
+### Programmatic Conversion Note
+The packaged runtime exposes PPTX conversion through `slides-grab convert`. Do not import converter files from runtime-local skill directories in installed-agent workflows.
 
 ```bash
-python .claude/skills/pptx-skill/scripts/thumbnail.py presentation.pptx output-thumbnail
+slides-grab convert --slides-dir <path> --output presentation.pptx
 ```
 
-Options:
-- `--cols N`: Number of columns (default 5, range 3-6)
-- `--outline-placeholders`: Show placeholder regions
-
-### pack.py / unpack.py
-PPTX file packaging/unpackaging
-
-```bash
-# Unpack
-python .claude/skills/pptx-skill/ooxml/scripts/unpack.py presentation.pptx output_dir
-
-# Pack
-python .claude/skills/pptx-skill/ooxml/scripts/pack.py input_dir presentation.pptx
-```
+### Thumbnail / OOXML Inspection
 
-### validate.py
-PPTX structure validation
+Use standard local tools such as LibreOffice, Poppler, or OOXML unzip/zip inspection when you need thumbnails or package-level debugging. These steps are diagnostic aids, not required packaged runtime commands.
 
 ```bash
-python .claude/skills/pptx-skill/ooxml/scripts/validate.py unpacked_dir --original presentation.pptx
+unzip presentation.pptx -d output_dir
 ```
 
 ## Reference Documents

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

@@ -1,11 +1,11 @@
 ---
 name: slides-grab-plan
-description: Stage 1 planning skill for Codex. Build and iterate slide-outline.md until explicit user approval.
+description: Stage 1 planning skill usable in Codex and Claude Code. Build and iterate slide-outline.md until explicit user approval.
 metadata:
   short-description: Create and revise slide outline before design stage
 ---
 
-# slides-grab Plan Skill (Codex)
+# slides-grab Plan Skill
 
 Use this when the user asks to start a new presentation from scratch.
 
@@ -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.
@@ -51,5 +54,5 @@ Produce an approved `slide-outline.md` before any slide HTML generation.
 ## Reference
 If needed, use the bundled outline reference:
 - `references/outline-format.md`
-- `references/plan-workflow-reference.md` — archived detailed planning workflow and organizer-agent guidance
+- `references/plan-workflow-reference.md` — archived detailed planning workflow and runtime-neutral outline-worker guidance
 - `references/design-md-to-slides-conversion.md` — DESIGN.md (web) → DESIGN.slides.md (slide) translation guide, including the structured output template and the web → slide mapping table

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

@@ -2,7 +2,7 @@
 
 A **supervisor skill** that takes a user topic, generates a `slide-outline.md` outline, and manages a revision loop until the user approves.
 
-Does not write the outline directly — delegates the work to `organizer-agent`.
+Keeps the outline process separate from slide design. Use a runtime-native subagent/task for drafting when available, or draft directly from this reference when the current runtime has no subagent mechanism.
 
 ---
 
@@ -11,14 +11,14 @@ Does not write the outline directly — delegates the work to `organizer-agent`.
 | Role | Owner | Responsibility |
 |------|-------|----------------|
 | **Supervisor** | plan-skill (you) | User communication, quality control, revision loop management |
-| **Worker** | organizer-agent | Draft and revise `slide-outline.md` |
+| **Worker** | Outline worker | Draft and revise `slide-outline.md` |
 
 ---
 
 ## Input
 
 - User topic (required)
-- Research results (optional — research-agent output)
+- Research results (optional)
 - Reference materials, tone/mood requests, etc.
 
 ## Output
@@ -29,9 +29,9 @@ Does not write the outline directly — delegates the work to `organizer-agent`.
 
 ## Workflow
 
-### 1. Delegate Draft Creation to organizer-agent
+### 1. Create the Outline Draft
 
-Use the Task tool to call `organizer-agent` and generate a `slide-outline.md` draft.
+Use a runtime-native task/subagent to generate a `slide-outline.md` draft when available. If the runtime has no such mechanism, write the draft directly using the format below.
 
 **Include in the prompt:**
 - User topic and requirements
@@ -52,7 +52,7 @@ Read the generated `slide-outline.md` and present to the user:
 
 When user provides feedback:
 1. Organize the feedback
-2. Call `organizer-agent` again with the existing `slide-outline.md` and feedback
+2. Revise the existing `slide-outline.md` with the feedback, using a runtime-native task/subagent when available
 3. Present the revised outline to the user
 4. Repeat until user approves
 
@@ -65,7 +65,7 @@ Complete the outline stage when the user explicitly approves.
 ## Absolute Rules
 
 1. **Never proceed to the next stage without approval** — Maintain the revision loop until the user explicitly signals approval ("looks good", "approved", "OK", "proceed", etc.).
-2. **Never write the outline directly** — Always delegate to `organizer-agent`.
+2. **Keep the outline stage separate** — Do not generate slide HTML while drafting or revising the outline.
 3. **Never start HTML generation** — This skill's scope ends at `slide-outline.md` approval. HTML generation is the responsibility of `design-skill`.
 
 ---
@@ -109,12 +109,12 @@ Complete the outline stage when the user explicitly approves.
 
 ---
 
-## organizer-agent Call Examples
+## Outline Worker Prompt Examples
 
 ```
-Task tool call:
-- subagent_type: "organizer-agent"
-- prompt: |
+Runtime-native task/subagent prompt:
+
+```text
     Create a presentation outline for the following topic.
 
     Topic: [user topic]
@@ -128,9 +128,9 @@ Task tool call:
 For feedback revisions:
 
 ```
-Task tool call:
-- subagent_type: "organizer-agent"
-- prompt: |
+Runtime-native task/subagent prompt:
+
+```text
     Revise the existing outline.
 
     Current outline: [slide-outline.md content]