@deckio/deck-engine 0.1.0

package/skills/deck-sketch/SKILL.md

@@ -0,0 +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.

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

@@ -0,0 +1,81 @@
+---
+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)`
+- [ ] `padding: 0 0 44px 0`
+- [ ] Does NOT use `flex: 1` on the body wrapper (defeats vertical centering)
+- [ ] Does NOT redundantly set `flex-direction: column` (inherited from engine `.slide` class)
+
+---
+
+## 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 (`background`, `padding`) and no `flex: 1` on body wrapper
+- [ ] Project metadata (id, title, subtitle, icon, accent) is present

package/slides/GenericThankYouSlide.jsx

@@ -0,0 +1,31 @@
+import Slide from '../components/Slide.jsx'
+import BottomBar from '../components/BottomBar.jsx'
+
+export default function GenericThankYouSlide({ index = 10, subtitle, tagline, footerText }) {
+  return (
+    <Slide index={index} className="deck-ty">
+      <div className="accent-bar" />
+
+      <div className="deck-ty-glow deck-ty-glow1" />
+      <div className="deck-ty-glow deck-ty-glow2" />
+      <div className="deck-ty-glow deck-ty-glow3" />
+
+      {[1, 2, 3, 4, 5, 6, 7, 8].map(i => (
+        <div key={i} className={`deck-ty-streak deck-ty-streak${i}`} />
+      ))}
+
+      <div className="content-frame content-gutter">
+        <div className="deck-ty-content">
+          <h2 className="deck-ty-title">Thank You</h2>
+          <p className="deck-ty-subtitle">
+            {subtitle || <>Let&rsquo;s build something great &mdash; together.</>}
+          </p>
+          <div className="deck-ty-divider" />
+          {tagline && <p className="deck-ty-tagline">{tagline}</p>}
+        </div>
+      </div>
+
+      <BottomBar text={footerText} />
+    </Slide>
+  )
+}

package/styles/global.css

@@ -0,0 +1,392 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');
+
+/* ═══════════════════════════════════════════════════════════════════════════
+   DECKIO Design Token System
+   ═══════════════════════════════════════════════════════════════════════════
+
+   Token architecture aligned with shadcn/ui naming conventions for
+   multi-theme compatibility, extended with presentation-specific tokens.
+
+   LAYER STRATEGY (Tailwind v4 + shadcn/ui compatibility):
+   ────────────────────────────────────────────────────────
+   Tailwind v4 wraps its output in @layer directives. In the CSS cascade,
+   unlayered styles ALWAYS beat layered styles — regardless of specificity.
+   Without layers, our `* { margin: 0 }` would override every Tailwind
+   utility (`p-4`, `m-2`, etc.), breaking shadcn/ui components entirely.
+
+   We declare the canonical layer order up front (global.css is imported
+   before theme CSS), then place engine styles in the appropriate layers:
+     @layer base        — token defaults, reset, html/body
+     @layer components  — engine component styles (.slide, .deck, etc.)
+   Theme CSS `:root` blocks remain unlayered (highest priority).
+   Tailwind utilities live in @layer utilities and override components.
+
+   CATEGORIES:
+
+   1. Core Semantic Colors  (shadcn-aligned)
+      --background / --foreground         Page-level background & text
+      --card / --card-foreground           Card / panel surfaces
+      --primary / --primary-foreground     Brand / action color
+      --secondary / --secondary-foreground Subtle surfaces (panels, kbd)
+      --muted / --muted-foreground         Muted text & backgrounds
+      --accent / --accent-foreground       Accent highlights (= primary in dark theme)
+      --destructive / --destructive-foreground  Errors & warnings
+      --border                             Default border
+      --input                              Form input borders
+      --ring                               Focus ring color
+      --radius                             Default border radius
+
+   2. Decorative Palette
+      --purple, --purple-deep, --pink, --cyan, --green
+      --blue-glow                          Glow base for interactive elements
+
+   3. Derived Overlays & Glows
+      Translucent surfaces, glow effects, and shadows. Explicit tokens
+      (not computed) so each theme can override independently.
+
+   4. Presentation Layout
+      --slide-bg, --content-max-width, --content-gutter
+
+   5. Typography Scale
+      Font family, sizes (2xs → display), weights, letter-spacing, line-height
+
+   6. Spacing Scale   (4 px base)
+      --space-0 through --space-14
+
+   7. Border Radius Scale
+      --radius-sm through --radius-full
+
+   8. Z-Index Scale
+      Named layers: content → bar → nav → progress → overlay
+
+   9. Transitions
+      Duration + easing presets
+
+   THEMING:
+   Override any token in :root for a global theme, or scope overrides to a
+   class (e.g. .theme-light, .theme-shadcn) for per-section theming.
+   Current values represent the "dark" theme (default).
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+/* Establish canonical layer order — must come before any @layer blocks.
+   Tailwind v4 uses these exact names; declaring them here (global.css is
+   imported first) guarantees the ordering is: theme < base < components < utilities. */
+@layer theme, base, components, utilities;
+
+/* ── Base layer: token defaults + reset ─────────────────────────────────── */
+@layer base {
+
+:root {
+  /* ── 1. Core Semantic Colors (shadcn-aligned) ────────────────────────── */
+  --background:              #080b10;
+  --foreground:              #e6edf3;
+  --card:                    #0d1117;
+  --card-foreground:         #e6edf3;
+  --primary:                 #58a6ff;
+  --primary-foreground:      #ffffff;
+  --secondary:               #161b22;
+  --secondary-foreground:    #e6edf3;
+  --muted:                   #161b22;
+  --muted-foreground:        #8b949e;
+  --accent:                  #58a6ff;
+  --accent-foreground:       #ffffff;
+  --destructive:             #f85149;
+  --destructive-foreground:  #ffffff;
+  --border:                  #30363d;
+  --input:                   #30363d;
+  --ring:                    #58a6ff;
+  --radius:                  10px;
+
+  /* ── 2. Decorative Palette ───────────────────────────────────────────── */
+  --blue-glow:    #1f6feb;
+  --purple:       #bc8cff;
+  --purple-deep:  #6e40c9;
+  --pink:         #f778ba;
+  --cyan:         #56d4dd;
+  --green:        #3fb950;
+
+  /* ── 3. Derived Overlays & Glows ─────────────────────────────────────── */
+  --surface-overlay:         rgba(22, 27, 34, 0.8);
+  --surface-overlay-heavy:   rgba(22, 27, 34, 0.95);
+  --background-overlay:      rgba(13, 17, 23, 0.85);
+  --border-subtle:           rgba(48, 54, 61, 0.6);
+  --glow-primary:            rgba(31, 111, 235, 0.2);
+  --glow-primary-strong:     rgba(31, 111, 235, 0.22);
+  --glow-primary-shadow:     rgba(31, 111, 235, 0.18);
+  --glow-ring:               rgba(121, 192, 255, 0.18);
+  --glow-accent:             rgba(88, 166, 255, 0.10);
+  --glow-purple:             rgba(188, 140, 255, 0.10);
+  --glow-cyan:               rgba(86, 212, 221, 0.08);
+  --dot-color:               rgba(139, 148, 158, 0.25);
+  --destructive-subtle:      rgba(248, 81, 73, 0.04);
+  --shadow-elevated:         0 8px 24px rgba(0, 0, 0, 0.4);
+
+  /* ── 4. Presentation Layout ──────────────────────────────────────────── */
+  --slide-bg:            var(--background);
+  --content-max-width:   1280px;
+  --content-gutter:      72px;
+
+  /* ── 5. Typography Scale ─────────────────────────────────────────────── */
+  --font-family:           'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+  --font-size-2xs:         10px;
+  --font-size-xs:          11px;
+  --font-size-sm:          12px;
+  --font-size-md:          13px;
+  --font-size-base:        16px;
+  --font-size-lg:          20px;
+  --font-size-xl:          24px;
+  --font-size-2xl:         32px;
+  --font-size-display:     clamp(40px, 6vw, 64px);
+
+  --font-weight-light:     300;
+  --font-weight-regular:   400;
+  --font-weight-medium:    500;
+  --font-weight-semibold:  600;
+  --font-weight-bold:      700;
+  --font-weight-extrabold: 800;
+
+  --letter-spacing-tight:   -2px;
+  --letter-spacing-normal:  0;
+  --letter-spacing-wide:    0.5px;
+  --letter-spacing-wider:   2.5px;
+  --letter-spacing-widest:  3px;
+
+  --line-height-tight:     1.2;
+  --line-height-normal:    1.5;
+  --line-height-relaxed:   1.75;
+
+  /* ── 6. Spacing Scale (4 px base) ────────────────────────────────────── */
+  --space-0:    0px;
+  --space-0-5:  2px;
+  --space-1:    4px;
+  --space-1-5:  6px;
+  --space-2:    8px;
+  --space-3:    12px;
+  --space-4:    16px;
+  --space-5:    20px;
+  --space-6:    24px;
+  --space-8:    32px;
+  --space-10:   40px;
+  --space-11:   44px;
+  --space-12:   48px;
+  --space-14:   56px;
+
+  /* ── 7. Border Radius Scale ──────────────────────────────────────────── */
+  --radius-sm:    4px;
+  --radius-md:    6px;
+  --radius-lg:    10px;
+  --radius-xl:    20px;
+  --radius-full:  50%;
+
+  /* ── 8. Z-Index Scale ────────────────────────────────────────────────── */
+  --z-content:   2;
+  --z-bar:       100;
+  --z-nav:       200;
+  --z-progress:  300;
+  --z-overlay:   9999;
+
+  /* ── 9. Transitions ──────────────────────────────────────────────────── */
+  --transition-fast:     0.15s ease;
+  --transition-base:     0.25s ease;
+  --transition-slow:     0.4s ease;
+  --ease-slide:          cubic-bezier(0.4, 0, 0.2, 1);
+  --duration-slide:      0.6s;
+  --duration-progress:   0.5s;
+}
+
+* { margin: 0; padding: 0; box-sizing: border-box; }
+
+html, body, #root {
+  width: 100%; height: 100%;
+  overflow: hidden;
+  font-family: var(--font-family);
+  background: var(--background);
+  color: var(--foreground);
+}
+
+} /* end @layer base */
+
+/* ── Components layer: engine chrome + slide primitives ─────────────────── */
+@layer components {
+
+/* ── Slide Engine ── */
+.deck {
+  width: 100%; height: 100%;
+  position: relative;
+}
+
+.slide {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: stretch;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity var(--duration-slide) var(--ease-slide),
+              transform var(--duration-slide) var(--ease-slide);
+  transform: translateX(60px);
+  overflow: hidden;
+}
+.slide > * {
+  flex-grow: 0;
+}
+.slide.active {
+  opacity: 1;
+  pointer-events: auto;
+  transform: translateX(0);
+}
+.slide.exit-left {
+  opacity: 0;
+  transform: translateX(-60px);
+}
+
+/* ── Dev-mode overflow warning ── */
+.slide-overflow-warn {
+  position: absolute;
+  inset: 0;
+  border: 3px dashed var(--destructive);
+  pointer-events: none;
+  z-index: var(--z-overlay);
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+  padding-bottom: var(--space-14);
+  background: var(--destructive-subtle);
+  font-size: var(--font-size-md);
+  font-weight: var(--font-weight-semibold);
+  color: var(--destructive);
+  letter-spacing: 0.3px;
+}
+
+/* ── Shared Decorations ── */
+.orb {
+  position: absolute;
+  border-radius: var(--radius-full);
+  filter: blur(2px);
+  opacity: 0.7;
+}
+.grid-dots {
+  position: absolute;
+  width: 200px; height: 200px;
+  background-image: radial-gradient(circle, var(--dot-color) 1px, transparent 1px);
+  background-size: 18px 18px;
+  opacity: 0.5;
+}
+
+/* Accent bar left */
+.accent-bar {
+  position: absolute;
+  left: var(--space-12); top: 15%; bottom: 15%;
+  width: 4px;
+  border-radius: 2px;
+  background: linear-gradient(to bottom, var(--purple), var(--accent), var(--cyan));
+}
+
+/* ── Shared Layout ── */
+.content-frame {
+  width: min(100%, var(--content-max-width));
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.content-gutter {
+  padding-left: var(--content-gutter);
+  padding-right: var(--content-gutter);
+}
+
+/* ══════════════════════════════════════════════════
+   Generic Thank-You Slide  (deck-ty-* namespace)
+   ══════════════════════════════════════════════════ */
+.deck-ty {
+  background: var(--background);
+  padding: 0 0 var(--space-11) 0;
+}
+
+/* Ambient glow orbs */
+.deck-ty-glow {
+  position: absolute;
+  border-radius: var(--radius-full);
+  filter: blur(80px);
+  pointer-events: none;
+  animation: deck-ty-pulse 6s ease-in-out infinite;
+}
+.deck-ty-glow1 { width: 300px; height: 300px; background: var(--glow-accent); top: -80px; left: -60px; }
+.deck-ty-glow2 { width: 250px; height: 250px; background: var(--glow-purple); bottom: -40px; right: -40px; animation-delay: -2s; }
+.deck-ty-glow3 { width: 200px; height: 200px; background: var(--glow-cyan); top: 50%; left: 60%; transform: translate(-50%,-50%); animation-delay: -4s; }
+
+@keyframes deck-ty-pulse {
+  0%, 100% { transform: scale(1); opacity: 0.7; }
+  50% { transform: scale(1.15); opacity: 1; }
+}
+
+/* Speed streaks */
+.deck-ty-streak {
+  position: absolute;
+  height: 1px;
+  border-radius: 1px;
+  opacity: 0;
+  animation: deck-ty-streak-move 4s ease-in-out infinite;
+}
+.deck-ty-streak1 { width: 120px; top: 15%; left: -120px; background: linear-gradient(90deg, transparent, var(--accent)); animation-delay: 0s; }
+.deck-ty-streak2 { width: 80px; top: 30%; left: -80px; background: linear-gradient(90deg, transparent, var(--purple)); animation-delay: 0.6s; }
+.deck-ty-streak3 { width: 100px; top: 45%; left: -100px; background: linear-gradient(90deg, transparent, var(--cyan)); animation-delay: 1.2s; }
+.deck-ty-streak4 { width: 60px; top: 60%; left: -60px; background: linear-gradient(90deg, transparent, var(--green)); animation-delay: 1.8s; }
+.deck-ty-streak5 { width: 90px; top: 75%; left: -90px; background: linear-gradient(90deg, transparent, var(--pink)); animation-delay: 2.4s; }
+.deck-ty-streak6 { width: 70px; top: 20%; right: -70px; background: linear-gradient(270deg, transparent, var(--accent)); animation-delay: 0.3s; }
+.deck-ty-streak7 { width: 110px; top: 50%; right: -110px; background: linear-gradient(270deg, transparent, var(--purple)); animation-delay: 1.5s; }
+.deck-ty-streak8 { width: 85px; top: 80%; right: -85px; background: linear-gradient(270deg, transparent, var(--cyan)); animation-delay: 2.1s; }
+
+@keyframes deck-ty-streak-move {
+  0% { transform: translateX(0); opacity: 0; }
+  10% { opacity: 0.6; }
+  50% { opacity: 0.3; }
+  100% { transform: translateX(calc(100vw + 200px)); opacity: 0; }
+}
+
+/* Content */
+.deck-ty-content {
+  text-align: left;
+  position: relative;
+  z-index: var(--z-content);
+}
+.deck-ty-title {
+  font-size: var(--font-size-display);
+  font-weight: var(--font-weight-extrabold);
+  letter-spacing: var(--letter-spacing-tight);
+  background: linear-gradient(135deg, var(--accent), var(--purple), var(--cyan), var(--accent));
+  background-size: 300% 300%;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  animation: deck-ty-grad-shift 6s ease infinite;
+  margin-bottom: var(--space-4);
+}
+@keyframes deck-ty-grad-shift {
+  0% { background-position: 0% 50%; }
+  50% { background-position: 100% 50%; }
+  100% { background-position: 0% 50%; }
+}
+.deck-ty-subtitle {
+  font-size: var(--font-size-lg);
+  font-weight: var(--font-weight-regular);
+  color: var(--muted-foreground);
+  letter-spacing: var(--letter-spacing-wide);
+}
+.deck-ty-divider {
+  width: 60px;
+  height: 2px;
+  background: linear-gradient(90deg, var(--accent), var(--purple));
+  margin: var(--space-6) 0;
+  border-radius: 1px;
+}
+.deck-ty-tagline {
+  font-size: var(--font-size-md);
+  text-transform: uppercase;
+  letter-spacing: var(--letter-spacing-widest);
+  color: var(--muted-foreground);
+  opacity: 0.5;
+}
+
+} /* end @layer components */