slides-grab 1.1.2 → 1.1.4

package/README.md

@@ -31,16 +31,16 @@ Paste one of these into your coding agent:
 **Claude Code:**
 
 ```
-Read https://raw.githubusercontent.com/vkehfdl1/slides-grab/main/docs/prompts/setup-claude.md and follow every step.
+Read https://raw.githubusercontent.com/vkehfdl1/slides-grab/main/docs/installation/claude.md and follow every step.
 ```
 
 **Codex:**
 
 ```
-Read https://raw.githubusercontent.com/vkehfdl1/slides-grab/main/docs/prompts/setup-codex.md and follow every step.
+Read https://raw.githubusercontent.com/vkehfdl1/slides-grab/main/docs/installation/codex.md and follow every step.
 ```
 
-Or clone manually:
+Or use the repo directly if you want to develop on slides-grab itself:
 
 ```bash
 git clone https://github.com/vkehfdl1/slides-grab.git && cd slides-grab
@@ -49,6 +49,14 @@ npm ci && npx playwright install chromium
 
 > Requires **Node.js >= 18**.
 
+### No-clone install
+
+```bash
+npm install slides-grab
+npx playwright install chromium
+npx skills add ./node_modules/slides-grab -g -a codex -a claude-code --yes --copy
+```
+
 ## Why This Project?
 
 There are many AI tools that generate slide HTML. Almost none let you **visually point at what you want changed** and iterate in-place. slides-grab fills that gap:
@@ -69,8 +77,10 @@ slides-grab edit              # Launch visual slide editor
 slides-grab build-viewer      # Build single-file viewer.html
 slides-grab validate          # Validate slide HTML (Playwright-based)
 slides-grab convert           # Export to experimental / unstable PPTX
+slides-grab convert --resolution 2160p  # Higher-resolution raster PPTX export
 slides-grab figma             # Export an experimental / unstable Figma Slides importable PPTX
 slides-grab pdf               # Export PDF in capture mode (default)
+slides-grab pdf --resolution 2160p  # Higher-resolution image-backed PDF export
 slides-grab pdf --mode print  # Export searchable/selectable text PDF
 slides-grab list-templates    # Show available slide templates
 slides-grab list-themes       # Show available color themes
@@ -89,6 +99,8 @@ Run `slides-grab validate --slides-dir <path>` before export to catch missing lo
 
 `slides-grab pdf` now defaults to `--mode capture`, which rasterizes each rendered slide into the PDF for better visual fidelity. Use `--mode print` when searchable/selectable browser text matters more than pixel-perfect parity.
 
+`slides-grab pdf` and `slides-grab convert` now default to `2160p` / `4k` raster output for sharper exports. You can still override with `--resolution <preset>` using `720p`, `1080p`, `1440p`, `2160p`, or `4k` when you want smaller or faster artifacts.
+
 ### Multi-Deck Workflow
 
 Prerequisite: create or generate a deck in `decks/my-deck/` first.
@@ -114,19 +126,25 @@ This command reuses the HTML to PPTX pipeline and emits a `.pptx` deck intended
 
 ## Installation Guides
 
-- [Claude Code setup](docs/prompts/setup-claude.md)
-- [Codex setup](docs/prompts/setup-codex.md)
 - [Claude detailed guide](docs/installation/claude.md)
 - [Codex detailed guide](docs/installation/codex.md)
 
 ## npm Package
 
-Also available as an npm package for standalone CLI usage:
+Also available as an npm package for standalone CLI + skill usage:
 
 ```bash
 npm install slides-grab
 ```
 
+Install shared agent skills with Vercel Agent Skills:
+
+```bash
+npx skills add ./node_modules/slides-grab -g -a codex -a claude-code --yes --copy
+```
+
+This npm-install path is enough for normal usage. Clone the repo only when you want to modify or contribute to `slides-grab` itself.
+
 ## Project Structure
 
 ```
@@ -135,8 +153,7 @@ src/editor/       Visual editor (HTML + JS client modules)
 scripts/          Build, validate, convert, editor server
 templates/        Slide HTML templates (cover, content, chart, ...)
 themes/           Color themes (modern-dark, executive, sage, ...)
-.claude/skills/   Claude Code skill definitions
-skills/           Codex skill definitions
+skills/           Shared Vercel-installable agent skills + references
 docs/             Installation & usage guides
 ```
 

package/bin/ppt-agent.js

@@ -106,11 +106,15 @@ program
   .description('Convert slide HTML files to experimental / unstable PPTX')
   .option('--slides-dir <path>', 'Slide directory', 'slides')
   .option('--output <path>', 'Output PPTX file')
+  .option('--resolution <preset>', 'Raster size preset: 720p, 1080p, 1440p, 2160p, or 4k (default: 2160p)')
   .action(async (options = {}) => {
     const args = ['--slides-dir', options.slidesDir];
     if (options.output) {
       args.push('--output', String(options.output));
     }
+    if (options.resolution) {
+      args.push('--resolution', String(options.resolution));
+    }
     await runCommand('convert.cjs', args);
   });
 
@@ -120,6 +124,7 @@ program
   .option('--slides-dir <path>', 'Slide directory', 'slides')
   .option('--output <path>', 'Output PDF file')
   .option('--mode <mode>', 'PDF export mode: capture for visual fidelity, print for searchable text', 'capture')
+  .option('--resolution <preset>', 'Capture raster size preset: 720p, 1080p, 1440p, 2160p, or 4k (default: 2160p in capture mode)')
   .action(async (options = {}) => {
     const args = ['--slides-dir', options.slidesDir];
     if (options.output) {
@@ -128,6 +133,9 @@ program
     if (options.mode) {
       args.push('--mode', String(options.mode));
     }
+    if (options.resolution) {
+      args.push('--resolution', String(options.resolution));
+    }
     await runCommand('scripts/html2pdf.js', args);
   });
 
@@ -159,18 +167,6 @@ program
     await runCommand('scripts/editor-server.js', args);
   });
 
-program
-  .command('install-codex-skills')
-  .description('Install project Codex skills into $CODEX_HOME/skills (default: ~/.codex/skills)')
-  .option('--force', 'Overwrite existing skill directories')
-  .option('--dry-run', 'Preview what would be installed')
-  .action(async (options = {}) => {
-    const args = [];
-    if (options.force) args.push('--force');
-    if (options.dryRun) args.push('--dry-run');
-    await runCommand('scripts/install-codex-skills.js', args);
-  });
-
 // --- Template/theme discovery commands ---
 
 program

package/convert.cjs

@@ -1,211 +1,12 @@
-const PptxGenJS = require('pptxgenjs');
-const { chromium } = require('playwright');
-const path = require('path');
-const fs = require('fs');
-const sharp = require('sharp');
-
-// Inline a simplified version that uses Playwright Chromium (not Chrome)
-const DEFAULT_SLIDES_DIR = 'slides';
-const DEFAULT_OUTPUT = 'output.pptx';
-const DEFAULT_CAPTURE_VIEWPORT = { width: 960, height: 540 };
-const DEFAULT_CAPTURE_DEVICE_SCALE_FACTOR = 2;
-const TARGET_RASTER_DPI = 150;
-const TARGET_SLIDE_SIZE_IN = { width: 13.33, height: 7.5 };
-
-function normalizeDimension(value, fallback) {
-  if (!Number.isFinite(value) || value <= 0) {
-    return fallback;
-  }
-  return Math.max(1, Math.round(value));
-}
-
-function buildPageOptions() {
-  return {
-    viewport: {
-      width: DEFAULT_CAPTURE_VIEWPORT.width,
-      height: DEFAULT_CAPTURE_VIEWPORT.height,
-    },
-    deviceScaleFactor: DEFAULT_CAPTURE_DEVICE_SCALE_FACTOR,
-  };
-}
-
-function getTargetRasterSize() {
-  return {
-    width: Math.round(TARGET_SLIDE_SIZE_IN.width * TARGET_RASTER_DPI),
-    height: Math.round(TARGET_SLIDE_SIZE_IN.height * TARGET_RASTER_DPI),
-  };
-}
-
-function printUsage() {
-  process.stdout.write(
-    [
-      'Usage: node convert.cjs [options]',
-      '',
-      'Options:',
-      `  --slides-dir <path>  Slide directory (default: ${DEFAULT_SLIDES_DIR})`,
-      `  --output <path>      Output pptx path (default: ${DEFAULT_OUTPUT})`,
-      '  -h, --help           Show this help message',
-    ].join('\n'),
-  );
-  process.stdout.write('\n');
-}
-
-function readOptionValue(args, index, optionName) {
-  const next = args[index + 1];
-  if (!next || next.startsWith('-')) {
-    throw new Error(`Missing value for ${optionName}.`);
-  }
-  return next;
-}
-
-function parseArgs(args) {
-  const options = {
-    slidesDir: DEFAULT_SLIDES_DIR,
-    output: DEFAULT_OUTPUT,
-    help: false,
-  };
-
-  for (let i = 0; i < args.length; i += 1) {
-    const arg = args[i];
-    if (arg === '-h' || arg === '--help') {
-      options.help = true;
-      continue;
-    }
-
-    if (arg === '--slides-dir') {
-      options.slidesDir = readOptionValue(args, i, '--slides-dir');
-      i += 1;
-      continue;
-    }
-
-    if (arg.startsWith('--slides-dir=')) {
-      options.slidesDir = arg.slice('--slides-dir='.length);
-      continue;
-    }
-
-    if (arg === '--output') {
-      options.output = readOptionValue(args, i, '--output');
-      i += 1;
-      continue;
-    }
-
-    if (arg.startsWith('--output=')) {
-      options.output = arg.slice('--output='.length);
-      continue;
-    }
-
-    throw new Error(`Unknown option: ${arg}`);
-  }
-
-  if (typeof options.slidesDir !== 'string' || options.slidesDir.trim() === '') {
-    throw new Error('--slides-dir must be a non-empty string.');
-  }
-
-  if (typeof options.output !== 'string' || options.output.trim() === '') {
-    throw new Error('--output must be a non-empty string.');
-  }
-
-  options.slidesDir = options.slidesDir.trim();
-  options.output = options.output.trim();
-  return options;
-}
-
-async function convertSlide(htmlFile, pres, browser) {
-  const filePath = path.isAbsolute(htmlFile) ? htmlFile : path.join(process.cwd(), htmlFile);
-
-  const page = await browser.newPage(buildPageOptions());
-  await page.goto(`file://${filePath}`);
-
-  const bodyDimensions = await page.evaluate(() => {
-    const body = document.body;
-    const style = window.getComputedStyle(body);
-    return {
-      width: parseFloat(style.width),
-      height: parseFloat(style.height),
-    };
-  });
-
-  await page.setViewportSize({
-    width: normalizeDimension(bodyDimensions.width, DEFAULT_CAPTURE_VIEWPORT.width),
-    height: normalizeDimension(bodyDimensions.height, DEFAULT_CAPTURE_VIEWPORT.height)
-  });
-
-  // Take screenshot and add as full-slide image
-  const screenshot = await page.screenshot({ type: 'png' });
-  await page.close();
-
-  // Resize to exact slide dimensions (13.33" x 7.5" at 150 DPI)
-  const targetSize = getTargetRasterSize();
-
-  const resized = await sharp(screenshot)
-    .resize(targetSize.width, targetSize.height, { fit: 'fill' })
-    .png()
-    .toBuffer();
-
-  const tmpPath = path.join(process.env.TMPDIR || '/tmp', `slide-${Date.now()}-${Math.random().toString(36).slice(2)}.png`);
-  fs.writeFileSync(tmpPath, resized);
-
-  const slide = pres.addSlide();
-  slide.addImage({
-    path: tmpPath,
-    x: 0,
-    y: 0,
-    w: '100%',
-    h: '100%'
-  });
-
-  return tmpPath;
-}
-
-async function main() {
-  const options = parseArgs(process.argv.slice(2));
-  if (options.help) {
-    printUsage();
-    return;
-  }
-
-  const pres = new PptxGenJS();
-  pres.layout = 'LAYOUT_WIDE'; // 16:9
-
-  const slidesDir = path.resolve(process.cwd(), options.slidesDir);
-  const { ensureSlidesPassValidation } = await import('./scripts/validate-slides.js');
-  await ensureSlidesPassValidation(slidesDir, { exportLabel: 'PPTX export' });
-  const files = fs.readdirSync(slidesDir)
-    .filter(f => f.endsWith('.html'))
-    .sort();
-
-  console.log(`Converting ${files.length} slides...`);
-
-  // Launch Chromium (not Chrome)
-  const browser = await chromium.launch();
-  const tmpFiles = [];
-
-  for (const file of files) {
-    const filePath = path.join(slidesDir, file);
-    console.log(`  Processing: ${file}`);
-    try {
-      const tmpPath = await convertSlide(filePath, pres, browser);
-      tmpFiles.push(tmpPath);
-      console.log(`    ✓ ${file} done`);
-    } catch (err) {
-      console.error(`    ✗ ${file} error: ${err.message}`);
-    }
-  }
-
-  await browser.close();
-
-  const outputFile = path.resolve(process.cwd(), options.output);
-  await pres.writeFile({ fileName: outputFile });
-  console.log(`\nSaved: ${outputFile}`);
-
-  // Cleanup tmp files
-  for (const f of tmpFiles) {
-    try { fs.unlinkSync(f); } catch {}
-  }
-}
+const {
+  buildPageOptions,
+  getTargetRasterSize,
+  main,
+  parseArgs,
+} = require('./src/pptx-raster-export.cjs');
 
 if (require.main === module) {
-  main().catch(err => {
+  main().catch((err) => {
     console.error('Fatal error:', err);
     process.exit(1);
   });
@@ -214,5 +15,6 @@ if (require.main === module) {
 module.exports = {
   buildPageOptions,
   getTargetRasterSize,
+  main,
   parseArgs,
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "slides-grab",
-  "version": "1.1.2",
+  "version": "1.1.4",
   "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",
@@ -38,7 +38,6 @@
     "scripts/figma-export.js",
     "scripts/html2pdf.js",
     "scripts/html2pptx.js",
-    "scripts/install-codex-skills.js",
     "scripts/validate-slides.js",
     "skills/",
     "src/",
@@ -52,8 +51,7 @@
     "build-viewer": "node scripts/build-viewer.js",
     "validate": "node scripts/validate-slides.js",
     "convert": "node convert.cjs",
-    "codex:install-skills": "node scripts/install-codex-skills.js --force",
-    "test": "node --test tests/editor/editor-codex-edit.test.js tests/pdf/html2pdf.test.js tests/pdf/html2pdf.e2e.test.js tests/figma/figma-export.test.js tests/image-contract/image-contract.test.js tests/validation/validate-slides.test.js",
+    "test": "node --test tests/editor/editor-codex-edit.test.js tests/pdf/html2pdf.test.js tests/pdf/html2pdf.e2e.test.js tests/figma/figma-export.test.js tests/image-contract/image-contract.test.js tests/validation/validate-slides.test.js tests/skills/installable-skills.test.js",
     "test:e2e": "node --test tests/editor/editor-ui.e2e.test.js tests/editor/editor-concurrency.e2e.test.js"
   },
   "dependencies": {

package/scripts/html2pdf.js

@@ -1,16 +1,26 @@
 #!/usr/bin/env node
 
 import { readdir, writeFile } from 'node:fs/promises';
+import { createRequire } from 'node:module';
 import { basename, join, resolve } from 'node:path';
 import { pathToFileURL } from 'node:url';
 import { chromium } from 'playwright';
 import { PDFDocument } from 'pdf-lib';
+import sharp from 'sharp';
 
 import { ensureSlidesPassValidation } from './validate-slides.js';
 
+const require = createRequire(import.meta.url);
+const {
+  getResolutionChoices,
+  getResolutionSize,
+  normalizeResolutionPreset,
+} = require('../src/export-resolution.cjs');
+
 const DEFAULT_OUTPUT = 'slides.pdf';
 const DEFAULT_SLIDES_DIR = 'slides';
 const DEFAULT_MODE = 'capture';
+const DEFAULT_CAPTURE_RESOLUTION = '2160p';
 const PDF_MODES = new Set(['capture', 'print']);
 const SLIDE_FILE_PATTERN = /^slide-.*\.html$/i;
 const FALLBACK_SLIDE_SIZE = { width: 960, height: 540 };
@@ -29,12 +39,14 @@ function printUsage() {
       `  --output <path>      Output PDF path (default: ${DEFAULT_OUTPUT})`,
       `  --slides-dir <path>  Slide directory (default: ${DEFAULT_SLIDES_DIR})`,
       `  --mode <mode>        PDF export mode: capture|print (default: ${DEFAULT_MODE})`,
+      `  --resolution <preset> Capture raster size preset: ${getResolutionChoices().join('|')}|4k (default: ${DEFAULT_CAPTURE_RESOLUTION}; ignored in print mode)`,
       '  -h, --help           Show this help message',
       '',
       'Examples:',
       '  node scripts/html2pdf.js',
       '  node scripts/html2pdf.js --output dist/deck.pdf',
       '  node scripts/html2pdf.js --mode print --output dist/searchable.pdf',
+      '  node scripts/html2pdf.js --resolution 2160p --output dist/deck-4k.pdf',
     ].join('\n'),
   );
   process.stdout.write('\n');
@@ -76,6 +88,25 @@ function cssPixelsToPdfPoints(value) {
   return Math.round((normalizeDimension(value, 0) * PDF_POINTS_PER_INCH) / CSS_PIXELS_PER_INCH);
 }
 
+async function normalizeCaptureRasterSize(pngBytes, resolution = '') {
+  const targetSize = getResolutionSize(resolution);
+  if (!targetSize) {
+    return pngBytes;
+  }
+
+  const metadata = await sharp(pngBytes).metadata();
+  const currentWidth = normalizeDimension(metadata.width, targetSize.width);
+  const currentHeight = normalizeDimension(metadata.height, targetSize.height);
+  if (currentWidth === targetSize.width && currentHeight === targetSize.height) {
+    return pngBytes;
+  }
+
+  return sharp(pngBytes)
+    .resize(targetSize.width, targetSize.height, { fit: 'fill' })
+    .png()
+    .toBuffer();
+}
+
 function formatDiagnosticEntry(entry) {
   const prefix = entry.slideFile ? `${entry.slideFile}: ` : '';
   return `${prefix}${entry.message}`;
@@ -108,6 +139,7 @@ export function parseCliArgs(args) {
     output: DEFAULT_OUTPUT,
     slidesDir: DEFAULT_SLIDES_DIR,
     mode: DEFAULT_MODE,
+    resolution: DEFAULT_CAPTURE_RESOLUTION,
     help: false,
   };
 
@@ -152,6 +184,17 @@ export function parseCliArgs(args) {
       continue;
     }
 
+    if (arg === '--resolution') {
+      options.resolution = normalizeResolutionPreset(readOptionValue(args, i, '--resolution'));
+      i += 1;
+      continue;
+    }
+
+    if (arg.startsWith('--resolution=')) {
+      options.resolution = normalizeResolutionPreset(arg.slice('--resolution='.length));
+      continue;
+    }
+
     throw new Error(`Unknown option: ${arg}`);
   }
 
@@ -165,6 +208,10 @@ export function parseCliArgs(args) {
   options.output = options.output.trim();
   options.slidesDir = options.slidesDir.trim();
   options.mode = normalizeMode(options.mode);
+  options.resolution = normalizeResolutionPreset(options.resolution);
+  if (options.mode === 'print') {
+    options.resolution = '';
+  }
 
   return options;
 }
@@ -188,13 +235,18 @@ export function buildPdfOptions(widthPx, heightPx) {
   };
 }
 
-export function buildPageOptions(mode = DEFAULT_MODE) {
+export function buildPageOptions(mode = DEFAULT_MODE, resolution = '') {
+  const targetResolution = normalizeMode(mode) === 'capture' ? getResolutionSize(resolution) : null;
   return {
     viewport: {
       width: FALLBACK_SLIDE_SIZE.width,
       height: FALLBACK_SLIDE_SIZE.height,
     },
-    deviceScaleFactor: normalizeMode(mode) === 'capture' ? DEFAULT_CAPTURE_DEVICE_SCALE_FACTOR : 1,
+    deviceScaleFactor: normalizeMode(mode) === 'capture'
+      ? targetResolution
+        ? targetResolution.height / FALLBACK_SLIDE_SIZE.height
+        : DEFAULT_CAPTURE_DEVICE_SCALE_FACTOR
+      : 1,
   };
 }
 
@@ -470,6 +522,7 @@ export async function renderSlideToPdf(page, slideFile, slidesDir, options = {})
   const slidePath = join(slidesDir, slideFile);
   const slideUrl = pathToFileURL(slidePath).href;
   const mode = normalizeMode(options.mode ?? DEFAULT_MODE);
+  const captureResolution = mode === 'capture' ? normalizeResolutionPreset(options.resolution ?? '') : '';
 
   await page.goto(slideUrl, { waitUntil: 'load' });
   await waitForSlideRenderReady(page, options);
@@ -495,11 +548,12 @@ export async function renderSlideToPdf(page, slideFile, slidesDir, options = {})
         height: viewportSize.height,
       },
     });
+    const normalizedPngBytes = await normalizeCaptureRasterSize(pngBytes, captureResolution);
     return {
       mode,
       width: normalizedSlideFrame.width,
       height: normalizedSlideFrame.height,
-      pngBytes,
+      pngBytes: normalizedPngBytes,
     };
   }
 
@@ -560,7 +614,7 @@ async function main() {
   }
 
   const browser = await chromium.launch({ headless: true });
-  const page = await browser.newPage(buildPageOptions(options.mode));
+  const page = await browser.newPage(buildPageOptions(options.mode, options.resolution));
   const diagnostics = createSlideDiagnostics();
   diagnostics.attach(page);
   const renderedSlides = [];
@@ -569,7 +623,10 @@ async function main() {
     for (const slideFile of slideFiles) {
       diagnostics.beginSlide(slideFile);
       try {
-        const slideResult = await renderSlideToPdf(page, slideFile, slidesDir, { mode: options.mode });
+        const slideResult = await renderSlideToPdf(page, slideFile, slidesDir, {
+          mode: options.mode,
+          resolution: options.resolution,
+        });
         renderedSlides.push(slideResult);
       } catch (error) {
         throw decorateError(error, slideFile, diagnostics.getSlideDiagnostics(slideFile));

package/skills/slides-grab/SKILL.md

@@ -15,7 +15,7 @@ Guides you through the complete presentation pipeline from topic to exported fil
 
 ### Stage 1 — Plan
 
-Use **slides-grab-plan** (`skills/slides-grab-plan/SKILL.md`).
+Use the installed **slides-grab-plan** skill.
 
 1. Take user's topic, audience, and tone.
 2. Create `slide-outline.md`.
@@ -26,13 +26,13 @@ Use **slides-grab-plan** (`skills/slides-grab-plan/SKILL.md`).
 
 ### Stage 2 — Design
 
-Use **slides-grab-design** (`skills/slides-grab-design/SKILL.md`).
+Use the installed **slides-grab-design** skill.
 
 1. Read approved `slide-outline.md`.
 2. Generate `slide-*.html` files in the slides workspace (default: `slides/`).
 3. Run validation: `slides-grab validate --slides-dir <path>`
 4. If validation fails, automatically fix the slide HTML/CSS until validation passes.
-5. Build the viewer: `node scripts/build-viewer.js --slides-dir <path>`
+5. Build the viewer: `slides-grab build-viewer --slides-dir <path>`
 6. Present viewer to user for review.
 7. Revise individual slides based on feedback, then re-run validation and rebuild the viewer.
 8. Optionally launch the visual editor: `slides-grab edit --slides-dir <path>`
@@ -41,7 +41,7 @@ Use **slides-grab-design** (`skills/slides-grab-design/SKILL.md`).
 
 ### Stage 3 — Export
 
-Use **slides-grab-export** (`skills/slides-grab-export/SKILL.md`).
+Use the installed **slides-grab-export** skill.
 
 1. Confirm user wants conversion.
 2. Export to PPTX: `slides-grab convert --slides-dir <path> --output <name>.pptx` (**experimental / unstable**)
@@ -57,4 +57,7 @@ Use **slides-grab-export** (`skills/slides-grab-export/SKILL.md`).
 3. **Read each stage's SKILL.md** for detailed rules — this skill only orchestrates.
 4. **Use `decks/<deck-name>/`** as the slides workspace for multi-deck projects.
 5. **Call out export risk clearly**: PPTX and Figma export are experimental / unstable and must be described as best-effort output.
-6. For full design constraints, refer to `.claude/skills/design-skill/SKILL.md`.
+6. Use the stage skills as the source of truth for plan, design, and export rules.
+
+## 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

@@ -0,0 +1,52 @@
+# Presentation Skill - Full Workflow Orchestrator
+
+Guides you through the complete presentation pipeline from topic to exported file.
+
+---
+
+## Workflow
+
+### Stage 1 — Plan
+
+Use **plan-skill** (`.claude/skills/plan-skill/SKILL.md`).
+
+1. Take user's topic, audience, and tone.
+2. Delegate outline creation to `organizer-agent`.
+3. Present `slide-outline.md` to user.
+4. Revise until user explicitly approves.
+
+**Do not proceed to Stage 2 without approval.**
+
+### Stage 2 — Design
+
+Use **design-skill** (`.claude/skills/design-skill/SKILL.md`).
+
+1. Read approved `slide-outline.md`.
+2. Generate `slide-*.html` files in the slides workspace (default: `slides/`).
+3. Run validation: `slides-grab validate --slides-dir <path>`
+4. If validation fails, automatically fix the slide HTML/CSS until validation passes.
+5. Build the viewer: `node scripts/build-viewer.js --slides-dir <path>`
+6. Present viewer to user for review.
+7. Revise individual slides based on feedback, then re-run validation and rebuild the viewer.
+8. Optionally launch the visual editor: `slides-grab edit --slides-dir <path>`
+
+**Do not proceed to Stage 3 without approval.**
+
+### Stage 3 — Export
+
+Use **pptx-skill** (`.claude/skills/pptx-skill/SKILL.md`).
+
+1. Confirm user wants conversion.
+2. Export to PPTX: `slides-grab convert --slides-dir <path> --output <name>.pptx` (**experimental / unstable**)
+3. Export to PDF (if requested): `slides-grab pdf --slides-dir <path> --output <name>.pdf`
+4. Report results.
+
+---
+
+## Rules
+
+1. **Always follow the stage order**: Plan → Design → Export.
+2. **Get explicit user approval** before advancing to the next stage.
+3. **Read each stage's SKILL.md** for detailed rules — this skill only orchestrates.
+4. **Use `decks/<deck-name>/`** as the slides workspace for multi-deck projects.
+5. **Call out export risk clearly**: PPTX and Figma export are experimental / unstable and should be described as best-effort output.

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

@@ -26,7 +26,7 @@ Generate high-quality `slide-XX.html` files in the selected slides workspace (`s
 2. Generate slide HTML files with 2-digit numbering in selected `--slides-dir`.
 3. Run `slides-grab validate --slides-dir <path>` after generation or edits.
 4. If validation fails, automatically fix the source slide HTML/CSS and re-run validation until it passes.
-5. Run `node scripts/build-viewer.js --slides-dir <path>` only after validation passes.
+5. Run `slides-grab build-viewer --slides-dir <path>` only after validation passes.
 6. Iterate on user feedback by editing only requested slide files, then re-run validation and rebuild the viewer.
 7. Keep revising until user approves conversion stage.
 
@@ -39,7 +39,10 @@ Generate high-quality `slide-XX.html` files in the selected slides workspace (`s
 - Prefer `<img>` for slide imagery and `data-image-placeholder` when no final asset exists.
 - Do not present slides for review until `slides-grab validate --slides-dir <path>` passes.
 - Do not start conversion before approval.
+- Use the packaged CLI and bundled references only; do not depend on unpublished agent-specific files.
 
 ## Reference
 For full constraints and style system, follow:
-- `.claude/skills/design-skill/SKILL.md`
+- `references/design-rules.md`
+- `references/detailed-design-rules.md`
+- `references/design-system-full.md` — archived full design system, templates, and advanced pattern guidance