slides-grab 1.2.1 → 1.2.2

package/README.md

@@ -70,9 +70,9 @@ There are many AI tools that generate slide HTML. Almost none let you **visually
 
 ## CLI Commands
 
-All commands support `--slides-dir <path>` (default: `slides`).
+Workflow commands support `--slides-dir <path>` (default: `slides`).
 
-On a fresh clone, only `--help`, `list-templates`, and `list-themes` work without a deck. `edit`, `build-viewer`, `validate`, `convert`, and `pdf` require an existing slides workspace containing `slide-*.html`.
+On a fresh clone, the discovery commands (`--help`, `list-templates`, `list-styles`, and `preview-styles`) work without a deck. `edit`, `build-viewer`, `validate`, `convert`, and `pdf` require an existing slides workspace containing `slide-*.html`.
 
 ```bash
 slides-grab edit              # Launch visual slide editor
@@ -88,9 +88,21 @@ slides-grab image --prompt "..."    # Generate a local slide image with Nano Ban
 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-themes       # Show available color themes
+slides-grab list-styles       # Show 35 bundled design styles (browse, preview, select)
+slides-grab preview-styles                        # Open the 35-style visual gallery in browser
 ```
 
+## Design Style Collections
+
+slides-grab bundles 35 design styles: 30 derived from [corazzon/pptx-design-styles](https://github.com/corazzon/pptx-design-styles) plus 5 slides-grab originals. Agents can also create fully custom designs beyond the bundled collection.
+
+```bash
+slides-grab list-styles                           # Browse the catalog
+slides-grab preview-styles  # Local HTML preview
+```
+
+Tell the agent which style to use (or ask for something custom) — no config files needed.
+
 ## Asset Contract
 
 Slides should store local image and video files in `<slides-dir>/assets/` and reference them as `./assets/<file>` from each `slide-XX.html`.
@@ -204,7 +216,7 @@ bin/              CLI entry point
 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, ...)
+src/              Design styles data, style config, path resolution
 skills/           Shared Vercel-installable agent skills + references
 docs/             Installation & usage guides
 ```

package/bin/ppt-agent.js

@@ -27,7 +27,7 @@ const figmaHelpText = [
 
 /**
  * Run a Node.js script from the package, with CWD set to the user's directory.
- * Scripts resolve slide paths via --slides-dir and templates/themes via src/resolve.js.
+ * Scripts resolve slide paths via --slides-dir and templates via src/resolve.js.
  */
 function runNodeScript(relativePath, args = []) {
   return new Promise((resolvePromise, rejectPromise) => {
@@ -68,6 +68,12 @@ function collectRepeatedOption(value, previous = []) {
   return [...previous, value];
 }
 
+function reportCliError(error) {
+  console.error(`[slides-grab] ${error.message}`);
+  process.exitCode = 1;
+}
+
+
 const program = new Command();
 
 program
@@ -224,7 +230,7 @@ program
     await runCommand('scripts/editor-server.js', args);
   });
 
-// --- Template/theme discovery commands ---
+// --- Template/style discovery commands ---
 
 program
   .command('list-templates')
@@ -245,21 +251,42 @@ program
   });
 
 program
-  .command('list-themes')
-  .description('List all available color themes (local overrides + package built-ins)')
+  .command('list-styles')
+  .description('List bundled design styles agents and users can reference during slide generation')
   .action(async () => {
-    const { listThemes } = await import('../src/resolve.js');
-    const themes = listThemes();
-    if (themes.length === 0) {
-      console.log('No themes found.');
-      return;
+    try {
+      const { listDesignStyles } = await import('../src/design-styles.js');
+      const styles = listDesignStyles();
+
+      if (styles.length === 0) {
+        console.log('No bundled design styles found.');
+        return;
+      }
+
+      console.log('Available design styles:\n');
+      for (const style of styles) {
+        console.log(`  ${style.id.padEnd(22)} ${style.title}`);
+        console.log(`    ${style.mood} · ${style.bestFor}`);
+      }
+
+      console.log(`\nTotal: ${styles.length} styles`);
+      console.log('Preview: slides-grab preview-styles [--style <id>]');
+    } catch (error) {
+      reportCliError(error);
     }
-    console.log('Available themes:\n');
-    for (const t of themes) {
-      const tag = t.source === 'local' ? '(local)' : '(built-in)';
-      console.log(`  ${t.name.padEnd(20)} ${tag}`);
+  });
+
+program
+  .command('preview-styles')
+  .description('Print the path to the bundled 35-style visual preview gallery')
+  .action(async () => {
+    try {
+      const { getPreviewHtmlPath } = await import('../src/design-styles.js');
+      const previewPath = getPreviewHtmlPath();
+      console.log(previewPath);
+    } catch (error) {
+      reportCliError(error);
     }
-    console.log(`\nTotal: ${themes.length} themes`);
   });
 
 program
@@ -280,22 +307,5 @@ program
     console.log(content);
   });
 
-program
-  .command('show-theme')
-  .description('Print the contents of a theme file')
-  .argument('<name>', 'Theme name (e.g. "modern-dark", "executive")')
-  .action(async (name) => {
-    const { resolveTheme } = await import('../src/resolve.js');
-    const result = resolveTheme(name);
-    if (!result) {
-      console.error(`Theme "${name}" not found.`);
-      process.exitCode = 1;
-      return;
-    }
-    const content = readFileSync(result.path, 'utf-8');
-    console.log(`/* Theme: ${name} (${result.source}) */`);
-    console.log(`/* Path: ${result.path} */\n`);
-    console.log(content);
-  });
 
 await program.parseAsync(process.argv);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "slides-grab",
-  "version": "1.2.1",
+  "version": "1.2.2",
   "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",
@@ -45,7 +45,6 @@
     "skills/",
     "src/",
     "templates/",
-    "themes/",
     "LICENSE",
     "README.md"
   ],
@@ -54,7 +53,7 @@
     "build-viewer": "node scripts/build-viewer.js",
     "validate": "node scripts/validate-slides.js",
     "convert": "node convert.cjs",
-    "test": "node --test --test-concurrency=1 tests/editor/editor-codex-edit.test.js tests/nano-banana/nano-banana.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/tldraw/render-tldraw.test.js tests/validation/validate-slides.test.js tests/skills/installable-skills.test.js tests/video/download-video.test.js",
+    "test": "node --test --test-concurrency=1 tests/design/design-styles.test.js tests/editor/editor-codex-edit.test.js tests/editor/editor-server.test.js tests/nano-banana/nano-banana.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/tldraw/render-tldraw.test.js tests/validation/validate-slides.test.js tests/skills/installable-skills.test.js tests/video/download-video.test.js",
     "test:e2e": "node --test tests/editor/editor-ui.e2e.test.js tests/editor/editor-concurrency.e2e.test.js"
   },
   "dependencies": {

package/scripts/editor-server.js

@@ -2,6 +2,7 @@
 
 import { readdir, readFile, writeFile, mkdtemp, rm, mkdir } from 'node:fs/promises';
 import { watch as fsWatch } from 'node:fs';
+import net from 'node:net';
 import { basename, dirname, join, resolve, relative, sep } from 'node:path';
 import { fileURLToPath } from 'node:url';
 import { tmpdir } from 'node:os';
@@ -45,6 +46,8 @@ const CODEX_MODELS = ['gpt-5.4', 'gpt-5.3-codex', 'gpt-5.3-codex-spark'];
 const ALL_MODELS = [...CODEX_MODELS, ...CLAUDE_MODELS];
 const DEFAULT_CODEX_MODEL = CODEX_MODELS[0];
 const SLIDE_FILE_PATTERN = /^slide-.*\.html$/i;
+const PORT_PROBE_HOSTS = ['::', '127.0.0.1'];
+const PORT_PROBE_IGNORED_CODES = new Set(['EAFNOSUPPORT', 'EADDRNOTAVAIL']);
 
 const MAX_RUNS = 200;
 const MAX_LOG_CHARS = 800_000;
@@ -117,6 +120,62 @@ function parseArgs(argv) {
   return opts;
 }
 
+function buildPortInUseError(port) {
+  return new Error(`Editor port ${port} is already in use. Choose another port with \`--port <number>\` and try again.`);
+}
+
+async function assertHostPortAvailable(port, host) {
+  const probe = net.createServer();
+  try {
+    await new Promise((resolve, reject) => {
+      probe.once('error', reject);
+      probe.listen({ port, host, exclusive: true }, resolve);
+    });
+  } catch (error) {
+    if (error?.code === 'EADDRINUSE') {
+      throw buildPortInUseError(port);
+    }
+
+    if (PORT_PROBE_IGNORED_CODES.has(error?.code)) {
+      return;
+    }
+
+    throw error;
+  } finally {
+    if (probe.listening) {
+      await new Promise((resolve, reject) => {
+        probe.close((error) => {
+          if (error) {
+            reject(error);
+            return;
+          }
+          resolve();
+        });
+      });
+    }
+  }
+}
+
+async function assertPortUsable(port) {
+  for (const host of PORT_PROBE_HOSTS) {
+    await assertHostPortAvailable(port, host);
+  }
+}
+
+async function listenOnPort(app, port) {
+  return new Promise((resolve, reject) => {
+    const server = app.listen(port, () => resolve(server));
+    server.once('error', (error) => {
+      if (error?.code === 'EADDRINUSE') {
+        reject(buildPortInUseError(port));
+        return;
+      }
+
+      reject(error);
+    });
+  });
+}
+
 const sseClients = new Set();
 
 function broadcastSSE(event, data) {
@@ -392,6 +451,7 @@ function createRunStore() {
 }
 
 async function startServer(opts) {
+  await assertPortUsable(opts.port);
   await loadDeps();
   const slidesDirectory = resolve(process.cwd(), opts.slidesDir);
   await mkdir(slidesDirectory, { recursive: true });
@@ -708,14 +768,14 @@ async function startServer(opts) {
     }, 300);
   });
 
-  const server = app.listen(opts.port, () => {
-    process.stdout.write('\n  slides-grab editor\n');
-    process.stdout.write('  ─────────────────────────────────────\n');
-    process.stdout.write(`  Local:       http://localhost:${opts.port}\n`);
-    process.stdout.write(`  Models:      ${ALL_MODELS.join(', ')}\n`);
-    process.stdout.write(`  Slides:      ${slidesDirectory}\n`);
-    process.stdout.write('  ─────────────────────────────────────\n\n');
-  });
+  const server = await listenOnPort(app, opts.port);
+
+  process.stdout.write('\n  slides-grab editor\n');
+  process.stdout.write('  ─────────────────────────────────────\n');
+  process.stdout.write(`  Local:       http://localhost:${opts.port}\n`);
+  process.stdout.write(`  Models:      ${ALL_MODELS.join(', ')}\n`);
+  process.stdout.write(`  Slides:      ${slidesDirectory}\n`);
+  process.stdout.write('  ─────────────────────────────────────\n\n');
 
   async function shutdown() {
     process.stdout.write('\n[editor] Shutting down...\n');

package/skills/slides-grab/SKILL.md

@@ -18,27 +18,28 @@ Guides you through the complete presentation pipeline from topic to exported fil
 Use the installed **slides-grab-plan** skill.
 
 1. Take user's topic, audience, and tone.
-2. Create `slide-outline.md`.
-3. Present outline to user.
-4. Revise until user explicitly approves.
+2. **Style selection (mandatory before outline):** Run `slides-grab list-styles`, analyze the topic/tone, and shortlist 2–3 bundled styles that fit. Present the shortlist with reasons. Optionally offer `slides-grab preview-styles` for visual preview. If none of the 35 bundled styles fit, propose a fully custom visual direction. **Get explicit style approval before writing the outline.**
+3. Create `slide-outline.md` with the chosen style ID in the meta section (`style: <id>`).
+4. Present outline to user.
+5. Revise until user explicitly approves.
 
-**Do not proceed to Stage 2 without approval.**
+**Do not proceed to Stage 2 without approval of both style and outline.**
 
 ### Stage 2 — Design
 
 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. For bespoke slide imagery, use `slides-grab image --prompt "<prompt>" --slides-dir <path>` so Nano Banana Pro saves a local asset under `<slides-dir>/assets/`.
-6. 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>`.
-7. 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.
-8. If `GOOGLE_API_KEY` (or `GEMINI_API_KEY`) is unavailable or Nano Banana is down, ask the user for a Google API key or fall back to web search/download into `<slides-dir>/assets/`.
-9. Launch the interactive editor for review: `slides-grab edit --slides-dir <path>`
-10. Revise slides based on user feedback via the editor, then re-run validation after each edit round.
-11. 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.
+1. Read approved `slide-outline.md` and apply the style specified in its meta section (`style: <id>`). Do not re-open style selection — the style was already approved in Stage 1.
+3. Generate `slide-*.html` files in the slides workspace (default: `slides/`).
+4. Run validation: `slides-grab validate --slides-dir <path>`
+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 Nano Banana Pro 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. If `GOOGLE_API_KEY` (or `GEMINI_API_KEY`) is unavailable or Nano Banana is down, ask the user for a Google API key or fall back to web search/download into `<slides-dir>/assets/`.
+10. Launch the interactive editor for review: `slides-grab edit --slides-dir <path>`
+11. Revise slides based on user feedback via the editor, then re-run validation after each edit round.
+12. 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.**
 

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

@@ -22,17 +22,18 @@ Use the installed **slides-grab-plan** skill.
 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: `slides-grab build-viewer --slides-dir <path>`
-6. When a slide calls for bespoke imagery, prefer `slides-grab image --prompt "<prompt>" --slides-dir <path>` so Nano Banana Pro saves a local asset under `<slides-dir>/assets/`.
-7. 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>`.
-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. If `GOOGLE_API_KEY` or `GEMINI_API_KEY` is unavailable, or the Nano Banana API fails, ask the user for a Google API key or fall back to web search + download into `<slides-dir>/assets/`.
-10. Present viewer to user for review.
-11. Revise individual slides based on feedback, then re-run validation and rebuild the viewer.
-12. Optionally launch the visual editor: `slides-grab edit --slides-dir <path>`
+2. If the user has not approved a visual direction yet, use `slides-grab list-styles` to shortlist bundled styles, optionally `slides-grab preview-styles` to open the visual gallery in browser, and agree on a direction with the user. If none of the 35 bundled styles fit, design a fully custom visual direction.
+3. Generate `slide-*.html` files in the slides workspace (default: `slides/`).
+4. Run validation: `slides-grab validate --slides-dir <path>`
+5. If validation fails, automatically fix the slide HTML/CSS until validation passes.
+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 Nano Banana Pro 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. If `GOOGLE_API_KEY` or `GEMINI_API_KEY` is unavailable, or the Nano Banana API fails, ask the user for a Google API key or 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>`
 
 **Do not proceed to Stage 3 without approval.**
 

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

@@ -13,8 +13,7 @@ Use this after `slide-outline.md` is approved.
 Generate high-quality `slide-XX.html` files in the selected slides workspace (`slides/` by default) and support revision loops.
 
 ## Inputs
-- Approved `slide-outline.md`
-- Theme/layout preferences
+- Approved `slide-outline.md` (must contain `style: <id>` in meta section — style was approved in Stage 1)
 - Requested edits per slide
 
 ## Outputs
@@ -22,20 +21,22 @@ Generate high-quality `slide-XX.html` files in the selected slides workspace (`s
 - Updated `<slides-dir>/viewer.html` via build script
 
 ## Workflow
-1. Read approved `slide-outline.md`.
-2. Before generating slides, write a quick **visual thesis** (mood/material/energy), a **content plan** (opener → support/proof → detail/story → close/CTA), and the core design tokens (background, surface, text, muted, accent + display/headline/body/caption roles).
-3. Generate slide HTML files with 2-digit numbering in selected `--slides-dir`.
-4. 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 Nano Banana Pro and save it under `<slides-dir>/assets/`.
-5. 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/`.
-6. 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.
-7. 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.
-8. Run `slides-grab validate --slides-dir <path>` after generation or edits.
-9. If validation fails, automatically fix the source slide HTML/CSS and re-run validation until it passes.
-10. Run the slide litmus check from `references/beautiful-slide-defaults.md` before presenting the deck for review.
-11. Launch the interactive editor for visual review: `slides-grab edit --slides-dir <path>`
-12. Iterate on user feedback by editing only requested slide files, then re-run validation after each edit round.
-13. 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).
-14. Keep revising until user approves conversion stage.
+1. Read approved `slide-outline.md` and extract the `style` field from its meta section.
+2. Load the chosen style's full spec from `src/design-styles-data.js` — colors, fonts, layout, signature elements, and things to avoid. If the meta specifies a custom direction instead of a bundled ID, use that custom direction as the design basis.
+3. Before generating slides, write a quick **visual thesis** (mood/material/energy), a **content plan** (opener → support/proof → detail/story → close/CTA), and the core design tokens (background, surface, text, muted, accent + display/headline/body/caption roles). Ground these tokens in the chosen style's spec.
+4. If you need to confirm or revisit the approved bundled style before designing, re-run `slides-grab list-styles` and open the gallery from `slides-grab preview-styles` so the Stage 2 deck stays aligned with the Stage 1 direction.
+5. Generate slide HTML files with 2-digit numbering in selected `--slides-dir`.
+6. 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 Nano Banana Pro and save it under `<slides-dir>/assets/`.
+7. 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/`.
+8. 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.
+9. 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.
+10. Run `slides-grab validate --slides-dir <path>` after generation or edits.
+11. If validation fails, automatically fix the source slide HTML/CSS and re-run validation until it passes.
+12. Run the slide litmus check from `references/beautiful-slide-defaults.md` before presenting the deck for review.
+13. Launch the interactive editor for visual review: `slides-grab edit --slides-dir <path>`
+14. Iterate on user feedback by editing only requested slide files, then re-run validation after each edit round.
+15. 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).
+16. Keep revising until user approves conversion stage.
 
 ## Rules
 - Keep slide size 720pt x 405pt.

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

@@ -9,6 +9,8 @@ These are the packaged design rules for installable `slides-grab` skills.
 - Generate a bespoke image asset: `slides-grab image --prompt "<prompt>" --slides-dir <path>`
 - Download a web video into slide assets: `slides-grab fetch-video --url <youtube-url> --slides-dir <path>`
 - Render `tldraw` diagrams: `slides-grab tldraw --input <path> --output <path>`
+- List bundled design collections: `slides-grab list-styles`
+- Open the visual style gallery in browser: `slides-grab preview-styles`
 
 ## Slide spec
 - Slide size: `720pt x 405pt` (16:9)
@@ -30,13 +32,6 @@ These are the packaged design rules for installable `slides-grab` skills.
 - Do not leave remote `http(s)://` image URLs in saved slide HTML
 - Never use absolute filesystem paths
 
-## Package-published theme references
-- `themes/executive.css`
-- `themes/sage.css`
-- `themes/modern-dark.css`
-- `themes/corporate.css`
-- `themes/warm.css`
-
 ## Package-published template references
 - `templates/cover.html`
 - `templates/contents.html`
@@ -52,8 +47,12 @@ These are the packaged design rules for installable `slides-grab` skills.
 - `templates/diagram.html`
 - `templates/diagram-tldraw.html`
 - `templates/custom/`
+- `templates/design-styles/README.md` — bundled design collection reference derived from `corazzon/pptx-design-styles`
+- `templates/design-styles/preview.html` — visual gallery of all 35 styles (open with `slides-grab preview-styles`)
+- `src/design-styles-data.js` — full style specs (colors, fonts, layout, signature elements, things to avoid) for all 35 bundled styles; read this after the user picks a style to ground your design tokens
 
 ## Review loop
+- The design style is chosen in Stage 1 (Plan) and recorded in `slide-outline.md`'s meta section (`style: <id>`). Do not re-open style selection in Stage 2 — read and apply the already-approved style.
 - 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.

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

@@ -97,27 +97,15 @@ line-height: 1;
 
 ## Color Palette System
 
-### 1. Executive Minimal (Recommended Default)
-Refined business presentation look
-- File: `themes/executive.css`
+All color palettes are now bundled as design styles accessible via `slides-grab list-styles`. The five original palettes are styles 31–35:
 
-### 2. Sage Professional
-Calm and trustworthy tone
-- File: `themes/sage.css`
+- **executive-minimal** — Refined business (warm white + black accent)
+- **sage-professional** — Calm and trustworthy (sage green tones)
+- **modern-dark** — High-impact dark (pure dark + white text)
+- **corporate-blue** — Traditional business (white + blue accent)
+- **warm-neutral** — Warm and approachable (cream + terracotta)
 
-### 3. Modern Dark
-High-impact dark theme
-- File: `themes/modern-dark.css`
-
-### 4. Corporate Blue
-Traditional business tone
-- File: `themes/corporate.css`
-
-### 5. Warm Neutral
-Warm and approachable tone
-- File: `themes/warm.css`
-
-Theme files use shared CSS variables (`:root`). Copy a theme file to create a custom theme.
+Run `slides-grab list-styles` to browse all 35 bundled styles, or design a fully custom palette when none fit.
 
 ---
 

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

@@ -36,7 +36,7 @@
 - Do not persist runtime-only editor/viewer injections in saved slide HTML.
 
 ## Important Notes
-- CSS gradients are not supported in PowerPoint conversion; replace them with background images.
+- CSS gradients may not export cleanly to all formats; prefer solid colors or background images when possible.
 - Always include the Pretendard CDN link.
 - Use `./assets/<file>` from each `slide-XX.html` for local images and videos, and avoid absolute filesystem paths.
 - Always include `#` prefix in CSS colors.

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

@@ -19,17 +19,19 @@ Produce an approved `slide-outline.md` before any slide HTML generation.
 - Optional research findings
 
 ## Output
-- `slide-outline.md`
+- `slide-outline.md` (must include `style: <id>` in meta section)
 
 ## Workflow
 1. Analyze user goal and audience.
-2. Create or revise `slide-outline.md` with ordered slides and key messages.
-3. Present a concise summary to user.
-4. Repeat revisions until explicit approval.
+2. **Style selection (mandatory, before outline):** Run `slides-grab list-styles`, shortlist 2–3 styles that match the topic/tone, present the shortlist with reasons, and get explicit user approval. Optionally offer `slides-grab preview-styles` for visual preview. If no bundled style fits, propose a custom direction and get approval.
+3. Create or revise `slide-outline.md` with ordered slides and key messages. Record the approved style ID in the meta section (`style: <id>`).
+4. Present a concise summary to user.
+5. Repeat revisions until explicit approval.
 
 ## Rules
+- **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 and narrative.
+- Keep scope to structure, narrative, and style selection.
 - 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.