overwatch-slidedeck

# Overwatch Slide Deck Designer Build interactive, presentation-grade slide decks as live SPAs—not static PDFs. Vite + React 19 + TanStack Router, 1920x1080 native resolution, WebGPU shader backgrounds, Framer Motion orchestration, collapsible sidebar navigation, keyboard controls, an optional access gate, and deploy to Cloudflare Workers / Vercel / Netlify. ## When to Use This Skill - Live presentations (investor pitches, product demos, conference talks) - Interaction-rich decks with hover states, content swaps, tooltips - WebGPU shader backgrounds for dramatic cover slides - Decks that need an access gate (client-side; see Access Gate section for its limits) - Keyboard-navigated presentations with sidebar navigation ## Domains Supported | Domain | Use Cases | |--------|-----------| | **Business & Finance** | KPI dashboards, revenue charts, growth trends, pricing | | **Healthcare** | Patient metrics, clinical outcomes, treatment timelines | | **Wellness & Coaching** | Transformation journeys, milestone celebrations, quotes | | **AI/ML Research** | Model architecture, training metrics, STT/TTS pipelines | --- ## Quick Start Workflow ### 1. Audit Reference Screenshots Review existing example screenshots for aesthetic consistency before designing. ```bash open ~/.claude/skills/overwatch-slidedeck/assets/examples/ ``` 15 reference screenshots demonstrate the canonical aesthetic: dark backgrounds, orange accent (#ff6e41), Playfair Display headings, interactive hover states, WebGPU shader covers. ### 2. Scaffold New Project ```bash cp -r ~/.claude/skills/overwatch-slidedeck/assets/scaffold/ ./my-deck cd my-deck npm install npm run dev # Opens at http://localhost:5173 # Navigate to /deck/1 ``` ### 3. Review Iconography Options | Domain | Key Icons | |--------|-----------| | **AI/ML** | Brain, Cpu, Database, Layers, Network, Waveform | | **Business** | TrendingUp, DollarSign, PieChart, Target, Users | | **Healthcare** | Heart, Activity, Stethoscope, ShieldCheck | | **Parenting** | Baby, Users, HandHeart, Shield, Brain, Puzzle | | **Spirituality** | Compass, Flame, Mountain, Sunrise, Lightbulb | **Icon libraries (not included in scaffold—install as needed):** - **Lucide** (1,500+): `lucide-react` — https://lucide.dev/icons - **Tabler** (5,900+): `@tabler/icons-react` — https://tabler.io/icons - **Phosphor** (7,000+): `@phosphor-icons/react` — https://phosphoricons.com ### 4. Plan Content Structure 1. **Define sections** — Group content into 4-8 logical sections 2. **Outline slides** — 3-5 slides per section 3. **Identify slide types** — Cover, social proof, split text, feature grid, timeline, quote, CLI demo, etc. (14 types available—see `references/slide-templates.md`) 4. **Gather assets** — Screenshots, diagrams, logos, expert photos 5. **Select icons** — Map icons to sections/concepts **What separates a hand-crafted deck from AI slop.** VCs and executives now read dozens of generated decks a week and can spot them instantly — same stock layouts, same buzzword density, same fabricated polish. The failure modes to design against: - **No unsourced numbers.** "47% growth" with no traceable source is the signature tell of a generated deck. Every statistic on a slide comes from the research phase (step 6) with a source the presenter can name. If the number can't be sourced, cut the slide, not the sourcing. - **Headlines carry the insight.** Title the data slide "Churn dropped 31% after the onboarding fix," never "Churn Data." A slide whose headline could sit on any company's deck says nothing. - **Specificity over vocabulary.** "Reviews 1,324 documents in 40 seconds" beats "leverages cutting-edge AI to transform document workflows." When a sentence would survive on a competitor's deck unchanged, rewrite it. - **One motion grammar per deck.** Pick one entrance vocabulary (which AnimatedItem variants, one duration scale, one easing) and hold it across every slide — motion consistency is what makes 20 slides read as one designed object rather than a template assembly. - **Decks travel without the presenter.** Boards forward slides; executives read them on phones at night. Every slide must be self-explanatory — hover-revealed content needs its key point visible before the hover. ### 5. Brand Color Extraction Extract and map brand colors from the client/company site before building slides. ```bash # Scrape the client/company site for brand identity python3 ~/.claude/skills/firecrawl/scripts/firecrawl_api.py scrape "https://client-site.com" --formats branding # Or take a screenshot for visual reference agent-browser open https://client-site.com agent-browser screenshot /tmp/brand-reference.png ``` Override the primary accent in `src/styles/globals.css`: ```css :root { --color-orange: #your-brand-color; --color-orange-muted: #your-darker-variant; } ``` **Anti-patterns:** - Never use bright reds (`#DC2626`, `#E11D48`)—they read as error/danger - Never use saturated yellows (`#fbbf24`) on light backgrounds—they disappear - Darken to amber-800/900 range (`#92400E`, `#B45309`) for readability ### 6. Research & Content Gathering **Available research tools (separate skills/CLIs):** | Tool | Skill/CLI | Purpose | |------|-----------|---------| | **Firecrawl** | `firecrawl` CLI or Firecrawl skill | Web scraping, convert URLs to markdown | | **Exa Search** | `exa-search` skill | AI-powered neural search, code examples | | **Reddit JSON** | Native curl (no auth) | User feedback, pain points, discussions | ```bash # Reddit JSON API (no auth required) curl "https://www.reddit.com/r/{SUBREDDIT}/search.json?q={QUERY}&limit=25&sort=relevance" # Exa Search (AI-powered) exa-search "{domain} best practices" --type article # Firecrawl - competitor decks, methodology pages firecrawl scrape https://example.com/methodology ``` ### 7. Build Slides Each slide lives in `src/slides/` and uses the `SlideWrapper`: ```tsx import { SlideWrapper } from "../components/layout/SlideWrapper"; import { Headline } from "../components/layout/Headline"; import { BodyText } from "../components/layout/BodyText"; export default function ProblemSlide() { return ( <SlideWrapper mode="dark"> <Headline>The Problem</Headline> <BodyText className="mt-8">Your content here</BodyText> </SlideWrapper> ); } ``` Register each slide in `src/config.ts`: ```typescript export const slides: SlideEntry[] = [ { id: "cover", fileKey: "01-cover", title: "Cover", shortTitle: "Cover" }, { id: "problem", fileKey: "02-problem", title: "The Problem", shortTitle: "Problem" }, ]; const slideModules = { "01-cover": () => import("./slides/01-cover"), "02-problem": () => import("./slides/02-problem"), }; ``` **Slide modes:** `dark` (deep charcoal, default), `white` (off-white, text-heavy analytical), `orange` (accent background, emphasis/quotes). Most slides use dark; white for analytical content; orange sparingly. **Slide transitions:** the shell animates between slides via AnimatePresence, direction-aware (forward enters from the right, backward from the left). Deck-level default in `config.transition` (`none | fade | slide | scale`, default `fade`) with `config.transitionDuration` in ms; per-slide overrides via the same fields on a `SlideEntry`. One transition type per deck is the rule — per-slide overrides exist for section dividers and the closing slide, not variety. `prefers-reduced-motion` and `?static=1` both force `none`. **Speaker notes:** `notes?: string` on any `SlideEntry` (or `notes:` in the YAML spec). Notes render only in presenter mode — the audience window never shows them. ### 8. Design QA Checklist Before deploying, verify with agent-browser screenshots at `http://localhost:5173`: | Check | Requirement | |-------|-------------| | ✅ **Slide modes** | SlideWrapper `mode` matches content type (dark/white/orange) | | ✅ **Sidebar** | Auto-collapses after 3s, hover expands, nav indicator tracks | | ✅ **Shader fallback** | WebGPU cover degrades to animated CSS gradient | | ✅ **Keyboard nav** | ArrowRight/Space (next), ArrowLeft (prev), Home/End | | ✅ **Access gate** | If configured, blocks without correct password | | ✅ **Typography** | Playfair Display for headlines, Inter for body, IBM Plex Mono for labels | | ✅ **Hover states** | HoverLift, GlowBorder, ExpandableCard respond correctly | | ✅ **Animations** | StaggeredAnimation entrance on each slide, no layout thrash | | ✅ **Mobile block** | Shows "Desktop Required" below 375px viewport | | ✅ **Slide counter** | Bottom-right counter shows correct `01/NN` | | ✅ **Transitions** | Forward/backward navigation animates in opposite directions; one grammar deck-wide | | ✅ **Reduced motion** | With `prefers-reduced-motion`, transitions and auto-cycling stop, content renders final-state | | ✅ **Presenter sync** | `/presenter/1` shows notes + next slide; navigation syncs both windows | | ✅ **Deep links** | Invalid `/deck/N` clamps to a valid slide; deployed deep links don't 404 | ```bash # Visual verification workflow — slides change by URL, not scroll npm run dev & agent-browser open http://localhost:5173/deck/1 agent-browser screenshot /tmp/slide-01.png agent-browser open http://localhost:5173/deck/2 agent-browser screenshot /tmp/slide-02.png ``` ### 9. Present Open `/presenter/1` in a second window (or second screen) alongside the audience deck: - Current slide, next-slide preview, speaker notes, elapsed timer, slide counter - Keyboard navigation works in either window; a `BroadcastChannel('overwatch-deck')` keeps both in sync — navigate in the presenter, the audience follows, and vice versa - Same-origin windows only (two tabs/windows of the same deployment); for remote presenting, share the audience window over the call and drive from the presenter ### 10. Export (PNG / PDF) The deck stays live-first; export is derived output for board packets and email: ```bash cd ~/.claude/skills/overwatch-slidedeck/scripts && npm install # once: playwright, pdf-lib, yaml npm run dev & # deck must be serving node ~/.claude/skills/overwatch-slidedeck/scripts/export-deck.mjs --url http://localhost:5173 --out ./export --pdf ``` Each slide renders at 1920x1080 with `?static=1` and reduced-motion emulation so entrances land in their final state — no mid-animation frames. `--pdf` merges the PNGs into `deck.pdf`. Shader covers export as their current frame; expect the live deck to look better than its export, by design. ### 11. Deploy ```bash # Build static SPA npm run build # Output: dist/ # Deploy to Cloudflare Workers (wrangler.jsonc included in scaffold) npx wrangler deploy # Deploy to Vercel (vercel.json included) npx vercel # Deploy to Netlify (public/_redirects included) npx netlify deploy --prod ``` SPA rewrites for all three hosts ship in the scaffold, so `/deck/7` opened directly on a deployed URL resolves instead of 404ing. --- ## Component Library ### Layout Components (10) | Component | Import | Purpose | |-----------|--------|---------| | `SlideWrapper` | `layout/SlideWrapper` | Full-slide container with `mode` prop (dark/white/orange) | | `Headline` | `layout/Headline` | 140px display title | | `SubHeadline` | `layout/SubHeadline` | 72px secondary title | | `Eyebrow` | `layout/Eyebrow` | Small caps category label | | `BodyText` | `layout/BodyText` | Body copy (sm/md/lg) | | `MonoLabel` | `layout/MonoLabel` | Monospace label (sm/md/lg) | | `Divider` | `layout/Divider` | Configurable hr (thin/medium/thick) | | `SplitLayout` | `layout/SplitLayout` | Two-column with ratio (1:1, 2:1, 1:2, 3:2, 2:3) | | `CenterLayout` | `layout/CenterLayout` | Centered flex container | | `GridLayout` | `layout/GridLayout` | 2/3/4 column grid | ### Interaction Components (18) | Component | Import | Purpose | |-----------|--------|---------| | `AnimatedItem` | `interactions/AnimatedItem` | Entrance variants: fade/slideUp/slideLeft/scale | | `StaggeredAnimation` | `interactions/StaggeredAnimation` | Parent container with stagger timing | | `HoverLift` | `interactions/HoverLift` | Hover elevation (sm/md/lg) | | `GlowBorder` | `interactions/GlowBorder` | Mouse-tracking gradient border | | `ExpandableCard` | `interactions/ExpandableCard` | Click-to-expand with layout animation | | `Accordion` | `interactions/Accordion` | Collapsible sections | | `TabGroup` | `interactions/TabGroup` | Tabbed content panels | | `QuoteRotator` | `interactions/QuoteRotator` | Auto-cycling quotes with dot indicators | | `ContentRotator` | `interactions/ContentRotator` | Auto-cycling arbitrary ReactNode children with dots | | `SocialProofCard` | `interactions/SocialProofCard` | Platform-styled testimonial (twitter/linkedin/testimonial) | | `TerminalTyper` | `interactions/TerminalTyper` | Typewriter CLI demo with macOS terminal chrome | | `TimelineConnector` | `interactions/TimelineConnector` | Horizontal roadmap with animated SVG connectors | | `InfiniteScrollTicker` | `interactions/InfiniteScrollTicker` | Vertical marquee with gradient masks | | `ProgressBar` | `interactions/ProgressBar` | Animated horizontal fill bar with label | | `RevealCaption` | `interactions/RevealCaption` | Hover caption overlay | | `Tooltip` | `interactions/Tooltip` | Position-aware tooltip | | `PulseIndicator` | `interactions/PulseIndicator` | Pulsing dot + expanding ring | | `Skeleton` | `interactions/Skeleton` | Loading placeholder | ### Graphics Components (4) | Component | Import | Purpose |