@deckio/deck-engine 1.7.4

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

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

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/slides/ThankYouSlide.module.css

@@ -0,0 +1,131 @@
+.thankYou {
+  background: var(--bg-deep);
+  flex-direction: column;
+  align-items: stretch;
+  justify-content: center;
+  overflow: hidden;
+  position: relative;
+}
+
+/* ── Ambient glow orbs ── */
+.glow {
+  position: absolute;
+  border-radius: 50%;
+  filter: blur(80px);
+  pointer-events: none;
+  animation: tyPulse 6s ease-in-out infinite;
+}
+.glow1 { width: 300px; height: 300px; background: rgba(88,166,255,0.10); top: -80px; left: -60px; }
+.glow2 { width: 250px; height: 250px; background: rgba(188,140,255,0.10); bottom: -40px; right: -40px; animation-delay: -2s; }
+.glow3 { width: 200px; height: 200px; background: rgba(86,212,221,0.08); top: 50%; left: 60%; transform: translate(-50%,-50%); animation-delay: -4s; }
+
+@keyframes tyPulse {
+  0%, 100% { transform: scale(1); opacity: 0.7; }
+  50% { transform: scale(1.15); opacity: 1; }
+}
+
+/* ── Speed streaks ── */
+.streak {
+  position: absolute;
+  height: 1px;
+  border-radius: 1px;
+  opacity: 0;
+  animation: streakMove 4s ease-in-out infinite;
+}
+.streak1 { width: 120px; top: 15%; left: -120px; background: linear-gradient(90deg, transparent, var(--accent)); animation-delay: 0s; }
+.streak2 { width: 80px; top: 30%; left: -80px; background: linear-gradient(90deg, transparent, var(--purple)); animation-delay: 0.6s; }
+.streak3 { width: 100px; top: 45%; left: -100px; background: linear-gradient(90deg, transparent, var(--cyan)); animation-delay: 1.2s; }
+.streak4 { width: 60px; top: 60%; left: -60px; background: linear-gradient(90deg, transparent, var(--green)); animation-delay: 1.8s; }
+.streak5 { width: 90px; top: 75%; left: -90px; background: linear-gradient(90deg, transparent, var(--pink)); animation-delay: 2.4s; }
+.streak6 { width: 70px; top: 20%; right: -70px; background: linear-gradient(270deg, transparent, var(--accent)); animation-delay: 0.3s; }
+.streak7 { width: 110px; top: 50%; right: -110px; background: linear-gradient(270deg, transparent, var(--purple)); animation-delay: 1.5s; }
+.streak8 { width: 85px; top: 80%; right: -85px; background: linear-gradient(270deg, transparent, var(--cyan)); animation-delay: 2.1s; }
+
+@keyframes streakMove {
+  0% { transform: translateX(0); opacity: 0; }
+  10% { opacity: 0.6; }
+  50% { opacity: 0.3; }
+  100% { transform: translateX(calc(100vw + 200px)); opacity: 0; }
+}
+
+/* ── Logos ── */
+.logos {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 24px;
+  margin-bottom: 40px;
+  position: relative;
+  z-index: 2;
+}
+.logoGithub {
+  width: 80px; height: 80px;
+  background: rgba(255,255,255,0.05);
+  border: 1px solid rgba(255,255,255,0.1);
+  border-radius: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  backdrop-filter: blur(10px);
+}
+.plus {
+  font-size: 28px;
+  color: var(--text-muted);
+  font-weight: 300;
+}
+.logoMs {
+  width: 80px; height: 80px;
+  background: rgba(255,255,255,0.05);
+  border: 1px solid rgba(255,255,255,0.1);
+  border-radius: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  backdrop-filter: blur(10px);
+}
+
+/* ── Content ── */
+.content {
+  text-align: left;
+  position: relative;
+  z-index: 2;
+}
+.title {
+  font-size: clamp(40px, 6vw, 64px);
+  font-weight: 800;
+  letter-spacing: -2px;
+  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: gradShift 6s ease infinite;
+  margin-bottom: 16px;
+}
+
+@keyframes gradShift {
+  0% { background-position: 0% 50%; }
+  50% { background-position: 100% 50%; }
+  100% { background-position: 0% 50%; }
+}
+
+.subtitle {
+  font-size: 20px;
+  font-weight: 400;
+  color: var(--text-muted);
+  letter-spacing: 0.5px;
+}
+.divider {
+  width: 60px;
+  height: 2px;
+  background: linear-gradient(90deg, var(--accent), var(--purple));
+  margin: 24px auto;
+  border-radius: 1px;
+}
+.tagline {
+  font-size: 13px;
+  text-transform: uppercase;
+  letter-spacing: 3px;
+  color: var(--text-muted);
+  opacity: 0.5;
+}

package/styles/global.css

@@ -0,0 +1,191 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');
+
+:root {
+  --bg: #0d1117;
+  --bg-deep: #080b10;
+  --surface: #161b22;
+  --border: #30363d;
+  --text: #e6edf3;
+  --text-muted: #8b949e;
+  --accent: #58a6ff;
+  --blue-bright: #79c0ff;
+  --blue-glow: #1f6feb;
+  --purple: #bc8cff;
+  --purple-deep: #6e40c9;
+  --pink: #f778ba;
+  --cyan: #56d4dd;
+  --green: #3fb950;
+  --orange: #d29922;
+  --content-max-width: 1280px;
+  --content-gutter: 72px;
+}
+
+* { margin: 0; padding: 0; box-sizing: border-box; }
+
+html, body, #root {
+  width: 100%; height: 100%;
+  overflow: hidden;
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+  background: var(--bg-deep);
+  color: var(--text);
+}
+
+/* ── Slide Engine ── */
+.deck {
+  width: 100%; height: 100%;
+  position: relative;
+}
+
+.slide {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),
+              transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
+  transform: translateX(60px);
+  overflow: hidden;
+}
+.slide.active {
+  opacity: 1;
+  pointer-events: auto;
+  transform: translateX(0);
+}
+.slide.exit-left {
+  opacity: 0;
+  transform: translateX(-60px);
+}
+
+/* ── Shared Decorations ── */
+.orb {
+  position: absolute;
+  border-radius: 50%;
+  filter: blur(2px);
+  opacity: 0.7;
+}
+.grid-dots {
+  position: absolute;
+  width: 200px; height: 200px;
+  background-image: radial-gradient(circle, rgba(139,148,158,0.25) 1px, transparent 1px);
+  background-size: 18px 18px;
+  opacity: 0.5;
+}
+
+/* Accent bar left */
+.accent-bar {
+  position: absolute;
+  left: 48px; 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(--bg-deep);
+  flex-direction: column;
+  align-items: stretch;
+  justify-content: center;
+  padding: 0 0 44px 0;
+  overflow: hidden;
+}
+
+/* Ambient glow orbs */
+.deck-ty-glow {
+  position: absolute;
+  border-radius: 50%;
+  filter: blur(80px);
+  pointer-events: none;
+  animation: deck-ty-pulse 6s ease-in-out infinite;
+}
+.deck-ty-glow1 { width: 300px; height: 300px; background: rgba(88,166,255,0.10); top: -80px; left: -60px; }
+.deck-ty-glow2 { width: 250px; height: 250px; background: rgba(188,140,255,0.10); bottom: -40px; right: -40px; animation-delay: -2s; }
+.deck-ty-glow3 { width: 200px; height: 200px; background: rgba(86,212,221,0.08); 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: 2;
+}
+.deck-ty-title {
+  font-size: clamp(40px, 6vw, 64px);
+  font-weight: 800;
+  letter-spacing: -2px;
+  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: 16px;
+}
+@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: 20px;
+  font-weight: 400;
+  color: var(--text-muted);
+  letter-spacing: 0.5px;
+}
+.deck-ty-divider {
+  width: 60px;
+  height: 2px;
+  background: linear-gradient(90deg, var(--accent), var(--purple));
+  margin: 24px 0;
+  border-radius: 1px;
+}
+.deck-ty-tagline {
+  font-size: 13px;
+  text-transform: uppercase;
+  letter-spacing: 3px;
+  color: var(--text-muted);
+  opacity: 0.5;
+}

package/vite.js

@@ -0,0 +1,26 @@
+/**
+ * Vite plugin for deck-engine projects.
+ *
+ * The main entry (@deckio/deck-engine) is pre-bundled by Vite
+ * into a single module so SlideContext, SlideProvider, useSlides, Slide,
+ * Navigation, and BottomBar all share one React context instance.
+ *
+ * Sub-path exports (e.g. slides/GenericThankYouSlide) are served as raw
+ * source and import from the package name (not relative paths) so they
+ * also resolve to the pre-bundled context singleton.
+ */
+export function deckPlugin() {
+  return {
+    name: 'deck-engine',
+    enforce: 'pre',
+    config() {
+      return {
+        resolve: {
+          dedupe: ['react', 'react-dom'],
+        },
+      }
+    },
+  }
+}
+
+export default deckPlugin