@deckio/deck-engine 1.7.6 → 1.7.8

package/skills/deck-generate-image/SKILL.md

@@ -1,85 +1,85 @@
----
-name: deck-generate-image
-description: Generate images (icons, illustrations, diagrams) using chatgpt-image-latest for use in slide components. Use this when a slide needs a visual element too complex for pure HTML/CSS.
----
-
-# Generate Images for Slides
-
-Generate images via the OpenAI **Image API** with `chatgpt-image-latest` for specific visual elements within slides.
-
-> If `chatgpt-image-latest` returns a 403, pass `--model gpt-image-1.5` as a fallback.
-
-## When to use
-
-- A slide needs an **icon or illustration** that doesn't exist in the codebase.
-- A sketch element is too detailed to reproduce with CSS.
-- The user explicitly asks for a generated graphic.
-
-## When NOT to use
-
-- For entire slides — use **deck-add-slide** instead.
-- For simple shapes — use CSS or inline SVG.
-- For logos or photos — source them directly.
-
-## Prerequisites
-
-The `OPENAI_API_KEY` must be set. Create/edit `.env` in the project root:
-
-```
-OPENAI_API_KEY=sk-proj-...
-```
-
-## Workflow
-
-### Step 1 — Craft the prompt
-
-Write a detailed prompt including:
-
-- **Subject** — what the image depicts.
-- **Style** — flat icon, line art, illustration, isometric, etc.
-- **Colors** — match the design system: `#0d1117` (bg-deep), `#58a6ff` (accent), `#3fb950` (green), `#bc8cff` (purple).
-- **Background** — almost always "transparent background".
-- **Aspect ratio** — square (1024x1024) for icons, wide (1536x1024) for banners.
-
-### Step 2 — Generate
-
-Run from the project root:
-
-```bash
-node node_modules/@deckio/deck-engine/scripts/generate-image.mjs --prompt "your prompt" --name my-icon
-node node_modules/@deckio/deck-engine/scripts/generate-image.mjs --prompt "..." --name hero --size 1536x1024
-```
-
-| Flag | Description | Default |
-|---|---|---|
-| `--prompt` | Image description (required) | — |
-| `--name` | Filename without extension (required) | — |
-| `--size` | `1024x1024`, `1536x1024`, `1024x1536`, `auto` | `1024x1024` |
-| `--quality` | `low`, `medium`, `high`, `auto` | `auto` |
-| `--model` | OpenAI model | `chatgpt-image-latest` |
-
-Images are saved to `src/data/generated/`.
-
-### Step 3 — Use in a slide
-
-```jsx
-import myIcon from '../data/generated/my-icon.png'
-
-<img src={myIcon} alt="Bridge icon" style={{ width: 120, height: 120 }} />
-```
-
-### Step 4 — Iterate
-
-If the image doesn't match expectations, refine the prompt and re-run with the same `--name` to overwrite. Use **deck-eyes** to verify how it looks in the slide.
-
-## SVG alternative
-
-For simple icons, write SVG markup directly in JSX:
-
-```jsx
-<svg width="48" height="48" viewBox="0 0 48 48" fill="none">
-  <circle cx="24" cy="24" r="20" stroke="#58a6ff" strokeWidth="2" />
-</svg>
-```
-
-Prefer inline SVG for geometric shapes. Use image generation for complex illustrations.
+---
+name: deck-generate-image
+description: Generate images (icons, illustrations, diagrams) using chatgpt-image-latest for use in slide components. Use this when a slide needs a visual element too complex for pure HTML/CSS.
+---
+
+# Generate Images for Slides
+
+Generate images via the OpenAI **Image API** with `chatgpt-image-latest` for specific visual elements within slides.
+
+> If `chatgpt-image-latest` returns a 403, pass `--model gpt-image-1.5` as a fallback.
+
+## When to use
+
+- A slide needs an **icon or illustration** that doesn't exist in the codebase.
+- A sketch element is too detailed to reproduce with CSS.
+- The user explicitly asks for a generated graphic.
+
+## When NOT to use
+
+- For entire slides — use **deck-add-slide** instead.
+- For simple shapes — use CSS or inline SVG.
+- For logos or photos — source them directly.
+
+## Prerequisites
+
+The `OPENAI_API_KEY` must be set. Create/edit `.env` in the project root:
+
+```
+OPENAI_API_KEY=sk-proj-...
+```
+
+## Workflow
+
+### Step 1 — Craft the prompt
+
+Write a detailed prompt including:
+
+- **Subject** — what the image depicts.
+- **Style** — flat icon, line art, illustration, isometric, etc.
+- **Colors** — match the design system: `#0d1117` (bg-deep), `#58a6ff` (accent), `#3fb950` (green), `#bc8cff` (purple).
+- **Background** — almost always "transparent background".
+- **Aspect ratio** — square (1024x1024) for icons, wide (1536x1024) for banners.
+
+### Step 2 — Generate
+
+Run from the project root:
+
+```bash
+node node_modules/@deckio/deck-engine/scripts/generate-image.mjs --prompt "your prompt" --name my-icon
+node node_modules/@deckio/deck-engine/scripts/generate-image.mjs --prompt "..." --name hero --size 1536x1024
+```
+
+| Flag | Description | Default |
+|---|---|---|
+| `--prompt` | Image description (required) | — |
+| `--name` | Filename without extension (required) | — |
+| `--size` | `1024x1024`, `1536x1024`, `1024x1536`, `auto` | `1024x1024` |
+| `--quality` | `low`, `medium`, `high`, `auto` | `auto` |
+| `--model` | OpenAI model | `chatgpt-image-latest` |
+
+Images are saved to `src/data/generated/`.
+
+### Step 3 — Use in a slide
+
+```jsx
+import myIcon from '../data/generated/my-icon.png'
+
+<img src={myIcon} alt="Bridge icon" style={{ width: 120, height: 120 }} />
+```
+
+### Step 4 — Iterate
+
+If the image doesn't match expectations, refine the prompt and re-run with the same `--name` to overwrite. Use **deck-eyes** to verify how it looks in the slide.
+
+## SVG alternative
+
+For simple icons, write SVG markup directly in JSX:
+
+```jsx
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none">
+  <circle cx="24" cy="24" r="20" stroke="#58a6ff" strokeWidth="2" />
+</svg>
+```
+
+Prefer inline SVG for geometric shapes. Use image generation for complex illustrations.

package/skills/deck-inspect/SKILL.md

@@ -1,60 +1,60 @@
----
-name: deck-inspect
-description: Capture a screenshot of the deck app to visually inspect slides. Use this when asked to look at, see, view, inspect, check visually, or preview a slide.
----
-
-# Visual Inspection — Capture a Slide Screenshot
-
-Captures a screenshot of the running deck using VS Code browser tools (Edge "Sharing with Agent").
-
-## Deciding what to capture
-
-1. **Slide** — resolve in this order:
-   - If the user said "slide 3" or "the cover slide" → map to a 1-based number.
-   - If you just created or edited a specific slide → use that slide's array position + 1.
-   - If not specified → capture slide 1.
-
-## Prerequisites
-
-The dev server must be running. Check `.github/memory/state.md` for the port. Default is `5173`.
-
-## Workflow
-
-### Step 1 — Open or reuse a browser page
-
-Check the attached browser pages for an existing deck tab. If none exists, open one:
-
-```
-open_browser_page → http://localhost:<port>/#/<project-id>
-```
-
-Read `project` and `port` from `.github/memory/state.md` if not known.
-
-### Step 2 — Navigate to the target slide
-
-The deck opens on slide 1. To reach slide N, press `ArrowRight` (N − 1) times:
-
-```js
-// run_playwright_code on the page
-for (let i = 0; i < N - 1; i++) {
-  await page.keyboard.press('ArrowRight');
-  await page.waitForTimeout(300);
-}
-```
-
-If the page is already on a different slide, navigate to slide 1 first by pressing `Home`, then advance forward.
-
-### Step 3 — Take a screenshot
-
-Use `screenshot_page` with the page ID to capture the current view. The screenshot is returned inline — no file path needed.
-
-### Step 4 — Inspect and report
-
-Study the screenshot and check for:
-- Layout alignment and spacing
-- Typography (size, weight, color)
-- Missing or broken elements
-- Color and contrast issues
-- Overflow or clipping
-
-Report any issues found to the user.
+---
+name: deck-inspect
+description: Capture a screenshot of the deck app to visually inspect slides. Use this when asked to look at, see, view, inspect, check visually, or preview a slide.
+---
+
+# Visual Inspection — Capture a Slide Screenshot
+
+Captures a screenshot of the running deck using VS Code browser tools (Edge "Sharing with Agent").
+
+## Deciding what to capture
+
+1. **Slide** — resolve in this order:
+   - If the user said "slide 3" or "the cover slide" → map to a 1-based number.
+   - If you just created or edited a specific slide → use that slide's array position + 1.
+   - If not specified → capture slide 1.
+
+## Prerequisites
+
+The dev server must be running. Check `.github/memory/state.md` for the port. Default is `5173`.
+
+## Workflow
+
+### Step 1 — Open or reuse a browser page
+
+Check the attached browser pages for an existing deck tab. If none exists, open one:
+
+```
+open_browser_page → http://localhost:<port>/#/<project-id>
+```
+
+Read `project` and `port` from `.github/memory/state.md` if not known.
+
+### Step 2 — Navigate to the target slide
+
+The deck opens on slide 1. To reach slide N, press `ArrowRight` (N − 1) times:
+
+```js
+// run_playwright_code on the page
+for (let i = 0; i < N - 1; i++) {
+  await page.keyboard.press('ArrowRight');
+  await page.waitForTimeout(300);
+}
+```
+
+If the page is already on a different slide, navigate to slide 1 first by pressing `Home`, then advance forward.
+
+### Step 3 — Take a screenshot
+
+Use `screenshot_page` with the page ID to capture the current view. The screenshot is returned inline — no file path needed.
+
+### Step 4 — Inspect and report
+
+Study the screenshot and check for:
+- Layout alignment and spacing
+- Typography (size, weight, color)
+- Missing or broken elements
+- Color and contrast issues
+- Overflow or clipping
+
+Report any issues found to the user.

package/skills/deck-sketch/SKILL.md

@@ -1,91 +1,91 @@
----
-name: deck-sketch
-description: Sketch a slide on Whiteboard, capture the sketch, and use it as inspiration to create a new slide. Use this when the user wants to draw, sketch, or wireframe a slide before building it.
----
-
-# Sketch a Slide
-
-Use Whiteboard to sketch a slide layout, capture the result, and translate it into a real slide component.
-
-## Workflow
-
-### Step 1 — Open Whiteboard
-
-```powershell
-Start-Process "ms-whiteboard-cmd:"
-```
-
-Tell the user:
-
-> **Whiteboard is open. Sketch your slide layout. When you're done, use "Fit to screen" (Ctrl+Shift+F) so the entire sketch is visible, then tell me you're ready.**
-
-**STOP here.** Do NOT proceed until the user explicitly says the sketch is ready.
-
-### Step 2 — Capture the sketch
-
-When the user says the sketch is ready:
-
-```powershell
-Add-Type @"
-using System;
-using System.Runtime.InteropServices;
-using System.Drawing;
-public class WinCapture {
-    [DllImport("user32.dll")] public static extern bool SetForegroundWindow(IntPtr h);
-    [DllImport("user32.dll")] public static extern bool GetWindowRect(IntPtr h, out RECT r);
-    [DllImport("user32.dll")] public static extern bool SetProcessDPIAware();
-    [StructLayout(LayoutKind.Sequential)] public struct RECT { public int L, T, R, B; }
-}
-"@
-[WinCapture]::SetProcessDPIAware() | Out-Null
-Add-Type -AssemblyName System.Drawing
-$h = (Get-Process | Where-Object { $_.MainWindowTitle -like '*Whiteboard*' } | Select-Object -First 1).MainWindowHandle
-if (!$h -or $h -eq [IntPtr]::Zero) { Write-Error "Whiteboard window not found"; return }
-[WinCapture]::SetForegroundWindow($h) | Out-Null
-Start-Sleep -Milliseconds 500
-$r = New-Object WinCapture+RECT
-[WinCapture]::GetWindowRect($h, [ref]$r) | Out-Null
-$w = $r.R - $r.L; $ht = $r.B - $r.T
-$bmp = New-Object Drawing.Bitmap $w, $ht
-$g = [Drawing.Graphics]::FromImage($bmp)
-$g.CopyFromScreen($r.L, $r.T, 0, 0, (New-Object Drawing.Size $w, $ht))
-$dir = ".github\eyes"
-if (!(Test-Path $dir)) { New-Item -ItemType Directory -Path $dir -Force | Out-Null }
-$file = Join-Path $dir "sketch-$(Get-Date -Format 'yyyy-MM-ddTHH-mm-ss').png"
-$bmp.Save($file)
-$g.Dispose(); $bmp.Dispose()
-Write-Host "Sketch saved: $file"
-```
-
-### Step 3 — Analyze the sketch
-
-Reference the saved screenshot image. Study it carefully and identify:
-
-- **Layout structure** — columns/rows, content zones, header/footer areas.
-- **Text elements** — headings, labels, bullet points, callouts.
-- **Visual elements** — boxes, icons, images, dividers, backgrounds.
-- **Data patterns** — tables, grids, lists, charts, metrics.
-
-Describe what you see back to the user and confirm your interpretation.
-
-### Step 4 — Create the slide
-
-Use the **deck-add-slide** skill to build the slide, guided by the sketch:
-
-1. Map sketch regions to CSS Grid or Flexbox layout.
-2. Translate hand-drawn text into real content with proper typography.
-3. Replace rough shapes with styled `<div>` containers using CSS Modules.
-4. Follow all deck-add-slide conventions (accent-bar, content-frame, BottomBar, imports from `@deckio/deck-engine`).
-5. Register the slide in `deck.config.js`.
-
-### Step 5 — Visual verification
-
-After creating the slide, use **deck-eyes** to capture a screenshot of the rendered result.
-
-Compare the rendered slide against the original sketch. If the user is present, show both and ask if adjustments are needed.
-
-## Notes
-
-- Whiteboard sketches are rough — interpret intent, not exact pixels.
-- If text is hard to read, ask the user to clarify.
-- Screenshots are saved under `.github/eyes/` (gitignored) with a `sketch-` prefix.
+---
+name: deck-sketch
+description: Sketch a slide on Whiteboard, capture the sketch, and use it as inspiration to create a new slide. Use this when the user wants to draw, sketch, or wireframe a slide before building it.
+---
+
+# Sketch a Slide
+
+Use Whiteboard to sketch a slide layout, capture the result, and translate it into a real slide component.
+
+## Workflow
+
+### Step 1 — Open Whiteboard
+
+```powershell
+Start-Process "ms-whiteboard-cmd:"
+```
+
+Tell the user:
+
+> **Whiteboard is open. Sketch your slide layout. When you're done, use "Fit to screen" (Ctrl+Shift+F) so the entire sketch is visible, then tell me you're ready.**
+
+**STOP here.** Do NOT proceed until the user explicitly says the sketch is ready.
+
+### Step 2 — Capture the sketch
+
+When the user says the sketch is ready:
+
+```powershell
+Add-Type @"
+using System;
+using System.Runtime.InteropServices;
+using System.Drawing;
+public class WinCapture {
+    [DllImport("user32.dll")] public static extern bool SetForegroundWindow(IntPtr h);
+    [DllImport("user32.dll")] public static extern bool GetWindowRect(IntPtr h, out RECT r);
+    [DllImport("user32.dll")] public static extern bool SetProcessDPIAware();
+    [StructLayout(LayoutKind.Sequential)] public struct RECT { public int L, T, R, B; }
+}
+"@
+[WinCapture]::SetProcessDPIAware() | Out-Null
+Add-Type -AssemblyName System.Drawing
+$h = (Get-Process | Where-Object { $_.MainWindowTitle -like '*Whiteboard*' } | Select-Object -First 1).MainWindowHandle
+if (!$h -or $h -eq [IntPtr]::Zero) { Write-Error "Whiteboard window not found"; return }
+[WinCapture]::SetForegroundWindow($h) | Out-Null
+Start-Sleep -Milliseconds 500
+$r = New-Object WinCapture+RECT
+[WinCapture]::GetWindowRect($h, [ref]$r) | Out-Null
+$w = $r.R - $r.L; $ht = $r.B - $r.T
+$bmp = New-Object Drawing.Bitmap $w, $ht
+$g = [Drawing.Graphics]::FromImage($bmp)
+$g.CopyFromScreen($r.L, $r.T, 0, 0, (New-Object Drawing.Size $w, $ht))
+$dir = ".github\eyes"
+if (!(Test-Path $dir)) { New-Item -ItemType Directory -Path $dir -Force | Out-Null }
+$file = Join-Path $dir "sketch-$(Get-Date -Format 'yyyy-MM-ddTHH-mm-ss').png"
+$bmp.Save($file)
+$g.Dispose(); $bmp.Dispose()
+Write-Host "Sketch saved: $file"
+```
+
+### Step 3 — Analyze the sketch
+
+Reference the saved screenshot image. Study it carefully and identify:
+
+- **Layout structure** — columns/rows, content zones, header/footer areas.
+- **Text elements** — headings, labels, bullet points, callouts.
+- **Visual elements** — boxes, icons, images, dividers, backgrounds.
+- **Data patterns** — tables, grids, lists, charts, metrics.
+
+Describe what you see back to the user and confirm your interpretation.
+
+### Step 4 — Create the slide
+
+Use the **deck-add-slide** skill to build the slide, guided by the sketch:
+
+1. Map sketch regions to CSS Grid or Flexbox layout.
+2. Translate hand-drawn text into real content with proper typography.
+3. Replace rough shapes with styled `<div>` containers using CSS Modules.
+4. Follow all deck-add-slide conventions (accent-bar, content-frame, BottomBar, imports from `@deckio/deck-engine`).
+5. Register the slide in `deck.config.js`.
+
+### Step 5 — Visual verification
+
+After creating the slide, use **deck-eyes** to capture a screenshot of the rendered result.
+
+Compare the rendered slide against the original sketch. If the user is present, show both and ask if adjustments are needed.
+
+## Notes
+
+- Whiteboard sketches are rough — interpret intent, not exact pixels.
+- If text is hard to read, ask the user to clarify.
+- Screenshots are saved under `.github/eyes/` (gitignored) with a `sketch-` prefix.

package/skills/deck-validate-project/SKILL.md

@@ -1,80 +1,80 @@
----
-name: deck-validate-project
-description: Validate and audit a deck project for correctness. Use this when asked to validate, audit, polish, review, check, or verify slides.
----
-
-# Validate & Audit a Deck Project
-
-## Step 1: Audit deck.config.js
-
-Open `deck.config.js` and verify:
-
-### 1a. All imports resolve
-
-For each slide import at the top of the file, verify the target file exists in `src/slides/`.
-
-### 1b. slides array matches imports
-
-- Every imported slide should appear in the `slides` array.
-- No unused imports (imported but not in the array).
-- No undefined entries in the array (in array but not imported).
-
----
-
-## Step 2: Verify slide structure
-
-For each slide `.jsx` file in `src/slides/`, verify:
-
-- [ ] Imports `{ Slide }` and `{ BottomBar }` from `'@deckio/deck-engine'`
-- [ ] Wrapped in `<Slide index={index} className={styles.xxx}>` (accepts `index` as prop)
-- [ ] Contains `<div className="accent-bar" />` as first child
-- [ ] Contains at least one decorative orb
-- [ ] Content is inside `<div className="content-frame content-gutter">`
-- [ ] `<BottomBar />` is the **last child** inside `<Slide>`
-- [ ] `BottomBar text` is consistent across all slides in the project
-
-For each `.module.css` file, verify the root class has:
-- [ ] `background: var(--bg-deep)`
-- [ ] `flex-direction: column`
-- [ ] `padding: 0 0 44px 0`
-
----
-
-## Step 3: Check companion files
-
-- Every `.jsx` slide in `src/slides/` should have a matching `.module.css` file
-- No orphaned `.module.css` files without a matching `.jsx`
-
----
-
-## Step 4: Verify metadata
-
-Check `deck.config.js` exports these fields:
-- [ ] `id` — string, matches the project folder name convention
-- [ ] `title` — display name
-- [ ] `subtitle` — tagline
-- [ ] `icon` — emoji
-- [ ] `accent` — CSS color value
-- [ ] `slides` — non-empty array
-
----
-
-## Step 5: Report results
-
-Summarize findings:
-
-- Number of slides validated
-- Any issues found and fixed (missing files, broken imports, structural issues)
-- Overall project health: **pass** or **issues found**
-
----
-
-## Quick checklist
-
-- [ ] All imports in `deck.config.js` resolve to existing files
-- [ ] `slides` array matches imports (no unused, no missing)
-- [ ] Every `.jsx` slide has a companion `.module.css`
-- [ ] All slides have accent-bar, content-frame, BottomBar
-- [ ] BottomBar text is consistent across the project
-- [ ] CSS root classes have required properties
-- [ ] Project metadata (id, title, subtitle, icon, accent) is present
+---
+name: deck-validate-project
+description: Validate and audit a deck project for correctness. Use this when asked to validate, audit, polish, review, check, or verify slides.
+---
+
+# Validate & Audit a Deck Project
+
+## Step 1: Audit deck.config.js
+
+Open `deck.config.js` and verify:
+
+### 1a. All imports resolve
+
+For each slide import at the top of the file, verify the target file exists in `src/slides/`.
+
+### 1b. slides array matches imports
+
+- Every imported slide should appear in the `slides` array.
+- No unused imports (imported but not in the array).
+- No undefined entries in the array (in array but not imported).
+
+---
+
+## Step 2: Verify slide structure
+
+For each slide `.jsx` file in `src/slides/`, verify:
+
+- [ ] Imports `{ Slide }` and `{ BottomBar }` from `'@deckio/deck-engine'`
+- [ ] Wrapped in `<Slide index={index} className={styles.xxx}>` (accepts `index` as prop)
+- [ ] Contains `<div className="accent-bar" />` as first child
+- [ ] Contains at least one decorative orb
+- [ ] Content is inside `<div className="content-frame content-gutter">`
+- [ ] `<BottomBar />` is the **last child** inside `<Slide>`
+- [ ] `BottomBar text` is consistent across all slides in the project
+
+For each `.module.css` file, verify the root class has:
+- [ ] `background: var(--bg-deep)`
+- [ ] `flex-direction: column`
+- [ ] `padding: 0 0 44px 0`
+
+---
+
+## Step 3: Check companion files
+
+- Every `.jsx` slide in `src/slides/` should have a matching `.module.css` file
+- No orphaned `.module.css` files without a matching `.jsx`
+
+---
+
+## Step 4: Verify metadata
+
+Check `deck.config.js` exports these fields:
+- [ ] `id` — string, matches the project folder name convention
+- [ ] `title` — display name
+- [ ] `subtitle` — tagline
+- [ ] `icon` — emoji
+- [ ] `accent` — CSS color value
+- [ ] `slides` — non-empty array
+
+---
+
+## Step 5: Report results
+
+Summarize findings:
+
+- Number of slides validated
+- Any issues found and fixed (missing files, broken imports, structural issues)
+- Overall project health: **pass** or **issues found**
+
+---
+
+## Quick checklist
+
+- [ ] All imports in `deck.config.js` resolve to existing files
+- [ ] `slides` array matches imports (no unused, no missing)
+- [ ] Every `.jsx` slide has a companion `.module.css`
+- [ ] All slides have accent-bar, content-frame, BottomBar
+- [ ] BottomBar text is consistent across the project
+- [ ] CSS root classes have required properties
+- [ ] Project metadata (id, title, subtitle, icon, accent) is present