slides-grab 1.2.1 → 1.2.3

package/skills/slides-grab/SKILL.md

@@ -1,8 +1,8 @@
 ---
 name: slides-grab
-description: End-to-end presentation workflow for Codex. Use when making a full presentation from scratch — planning, designing slides, editing, and exporting. PDF is preferred; PPTX/Figma export is experimental / unstable.
+description: End-to-end presentation workflow for Codex. Use when making a full presentation from scratch — planning, designing slides, editing, and exporting. PDF and per-slide PNG are preferred; PPTX/Figma export is experimental / unstable.
 metadata:
-  short-description: Full pipeline from topic to PDF + experimental / unstable PPTX/Figma export
+  short-description: Full pipeline from topic to PDF/PNG + experimental / unstable PPTX/Figma export
 ---
 
 # slides-grab Skill (Codex) - Full Workflow Orchestrator
@@ -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.**
 
@@ -47,9 +48,13 @@ Use the installed **slides-grab-design** skill.
 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**)
-3. Export to PDF (if requested): `slides-grab pdf --slides-dir <path> --output <name>.pdf`
-4. Report results.
+2. Pick the 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 decks → `slides-grab pdf --slides-dir <path> --output <name>.pdf`.
+3. Per-slide PNG (any mode): `slides-grab png --slides-dir <path> --output-dir <path>/out-png --resolution 2160p`.
+4. PPTX (optional, **experimental / unstable**): `slides-grab convert --slides-dir <path> --output <name>.pptx`.
+5. Figma-importable PPTX (optional, **experimental / unstable**): `slides-grab figma --slides-dir <path> --output <name>-figma.pptx`.
+6. Report results.
 
 ---
 

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-card-news/SKILL.md

@@ -0,0 +1,35 @@
+---
+name: slides-grab-card-news
+description: Generate square Instagram-style card news by reusing the slides-grab workflow with card-news mode enabled. Defaults to per-slide PNG export.
+metadata:
+  short-description: Square card-news workflow on top of slides-grab (PNG by default)
+---
+
+# slides-grab Card News Skill (Codex)
+
+Use this when the user wants card news instead of a widescreen presentation.
+
+## Goal
+Reuse the existing slides-grab plan/design/export workflow, but generate **square** outputs optimized for Instagram posts. Per-slide PNG is the default export since Instagram and most card-news distribution channels consume images, not PDFs.
+
+## Workflow
+1. Reuse the normal outline process from `slides-grab-plan`.
+2. During design and review, keep every card at **720pt x 720pt** and run:
+   - `slides-grab validate --slides-dir <path> --mode card-news`
+   - `slides-grab build-viewer --slides-dir <path> --mode card-news`
+   - `slides-grab edit --slides-dir <path> --mode card-news`
+3. During export, **default to per-slide PNG** for Instagram-ready output:
+   - `slides-grab png --slides-dir <path> --slide-mode card-news --resolution 2160p`
+   - Optional `--output-dir <path>/out-png` to choose the output folder (defaults to `<slides-dir>/out-png`).
+4. Only produce PDF/PPTX/Figma when the user explicitly asks for it:
+   - `slides-grab pdf --slides-dir <path> --slide-mode card-news --output <name>.pdf`
+   - `slides-grab convert --slides-dir <path> --mode card-news --output <name>.pptx` (**experimental / unstable**)
+   - `slides-grab figma --slides-dir <path> --mode card-news --output <name>-figma.pptx` (**experimental / unstable**)
+5. Remind the user that PPTX/Figma exports remain experimental / unstable.
+
+## Rules
+- Optimize layouts for square Instagram-style card news, not 16:9 slides.
+- Default the export to `slides-grab png --slide-mode card-news`; only switch to PDF/PPTX/Figma when the user explicitly requests it.
+- Reuse existing design, viewer, editor, and export policy wherever possible.
+- Do **not** implement SNS/Instagram publishing automation.
+- Use the packaged CLI and bundled skills only.

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,23 @@ 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 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 Nano Banana Pro 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. Launch the interactive editor for visual review: `slides-grab edit --slides-dir <path>`
+15. Iterate on user feedback by editing only requested slide files, then re-run validation after each edit round.
+16. 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).
+17. Keep revising until user approves conversion stage.
 
 ## Rules
 - Keep slide size 720pt x 405pt.
@@ -43,6 +45,7 @@ Generate high-quality `slide-XX.html` files in the selected slides workspace (`s
 - Put local images and videos under `<slides-dir>/assets/` and reference them as `./assets/<file>`.
 - Allow `data:` URLs when the slide must be fully self-contained.
 - Do not leave remote `http(s)://` image URLs in saved slide HTML; download source images into `<slides-dir>/assets/` and reference them as `./assets/<file>`.
+- Prefer Lucide for default slide iconography. Avoid emoji as the default icon treatment unless the brief explicitly asks for emoji.
 - Prefer `slides-grab image` with Nano Banana Pro for bespoke slide imagery before reaching for remote URLs.
 - 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/`.
 - Prefer local videos with a `poster="./assets/<file>"` thumbnail so PDF export uses the still image.

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)
@@ -17,6 +19,11 @@ These are the packaged design rules for installable `slides-grab` skills.
 - CSS colors must include `#`
 - Avoid CSS gradients for PPTX-targeted decks
 
+## Icon guidance
+- Prefer Lucide as the default icon library when a slide needs iconography.
+- 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).
+
 ## Asset rules
 - Store deck-local assets in `<slides-dir>/assets/`
 - Reference deck-local assets as `./assets/<file>`
@@ -30,13 +37,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 +52,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

@@ -24,6 +24,11 @@
 - All text must be inside `<p>`, `<h1>`-`<h6>`, `<ul>`, `<ol>`, or `<li>`.
 - Never place text directly in `<div>` or `<span>`.
 
+## Icon Usage Rules
+- Prefer Lucide as the default icon library for slide UI elements, callouts, and supporting visuals.
+- 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.
+
 ## 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>`.
@@ -36,7 +41,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-export/SKILL.md

@@ -1,6 +1,6 @@
 ---
 name: slides-grab-export
-description: Stage 3 conversion skill for Codex. Convert approved HTML slides to PDF and to experimental / unstable PPTX/Figma outputs, then validate artifacts.
+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.
 metadata:
   short-description: Convert slides and run conversion checks
 ---
@@ -10,24 +10,31 @@ metadata:
 Use this only after the user approves design output.
 
 ## Goal
-Convert reviewed slide HTML into PDF reliably, and into experimental / unstable PPTX/Figma outputs on a best-effort basis.
+Convert reviewed slide HTML into PDF or per-slide PNG reliably, and into experimental / unstable PPTX/Figma outputs on a best-effort basis.
 
 ## Inputs
 - Approved `<slides-dir>/slide-*.html`
 - Optional output path settings
 
 ## Outputs
-- Presentation artifact (`.pptx` or `.pdf`)
+- Presentation artifact (`.pdf`, `.png` per slide, or `.pptx`)
 
 ## Workflow
 1. Confirm user approval for conversion.
-2. Run conversion command:
-   - `slides-grab convert --slides-dir <path> --output <name>.pptx` (**experimental / unstable**)
-3. If requested, run PDF conversion:
+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`.
+3. When per-slide raster output is needed (card news, social posts, thumbnails):
+   - `slides-grab png --slides-dir <path> --output-dir <path>/out-png --resolution 2160p`
+   - Add `--slide-mode card-news` for 1:1 cards.
+4. If the user also wants a PDF deck:
    - `slides-grab pdf --slides-dir <path> --output <name>.pdf`
-4. If requested, run Figma export:
+   - Add `--slide-mode card-news` when the deck is square.
+5. 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):
    - `slides-grab figma --slides-dir <path> --output <name>-figma.pptx`
-5. Report success/failure with actionable errors.
+7. Report success/failure with actionable errors.
 
 ## Rules
 - Do not modify slide content during conversion stage unless explicitly requested.

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

@@ -84,7 +84,7 @@ Every HTML slide must include proper body dimensions:
 - **CRITICAL: Never use CSS gradients (`linear-gradient`, `radial-gradient`)** - They don't convert to PowerPoint
 - **ALWAYS create gradient/icon PNGs FIRST using Sharp, then reference in HTML**
 - For gradients: Rasterize SVG to PNG background images
-- For icons: Rasterize react-icons SVG to PNG images
+- For icons: Rasterize Lucide SVG to PNG images
 - All visual effects must be pre-rendered as raster images before HTML rendering
 
 **Rasterizing Icons with Sharp:**
@@ -93,11 +93,11 @@ Every HTML slide must include proper body dimensions:
 const React = require('react');
 const ReactDOMServer = require('react-dom/server');
 const sharp = require('sharp');
-const { FaHome } = require('react-icons/fa');
+const { House } = require('lucide-react');
 
 async function rasterizeIconPng(IconComponent, color, size = "256", filename) {
   const svgString = ReactDOMServer.renderToStaticMarkup(
-    React.createElement(IconComponent, { color: `#${color}`, size: size })
+    React.createElement(IconComponent, { color: `#${color}`, size: size, strokeWidth: 1.75 })
   );
 
   // Convert SVG to PNG using Sharp
@@ -109,7 +109,7 @@ async function rasterizeIconPng(IconComponent, color, size = "256", filename) {
 }
 
 // Usage: Rasterize icon before using in HTML
-const iconPath = await rasterizeIconPng(FaHome, "4472c4", "256", "home-icon.png");
+const iconPath = await rasterizeIconPng(House, "4472c4", "256", "home-icon.png");
 // Then reference in HTML: <img src="home-icon.png" style="width: 40pt; height: 40pt;">
 ```
 

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.