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

Quick Start Workflow

1. Audit Reference Screenshots

Review existing example screenshots for aesthetic consistency before designing.

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

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

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.

# 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:

: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):

# 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:

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:

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:

# 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:

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

# 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)

Interaction Components (18)

Graphics Components (4)

Utility Hooks (3)

Every auto-cycling and entrance component honors prefers-reduced-motion (final state, no cycling) and interactive components (TabGroup, Accordion, Tooltip) carry ARIA roles and keyboard navigation. Global keyboard shortcuts ignore keypresses on interactive targets.

Navigation

• Sidebar: Auto-collapses after 3s, hover to expand, spring-animated (stiffness: 400, damping: 30)
• Keyboard: ArrowRight/Space (next), ArrowLeft (prev), Home/End
• URL-based: /deck/1, /deck/2, etc. via TanStack Router
• Preloading: Adjacent slides (n-1, n+1, n+2) are preloaded for instant navigation

Access Gate

Set config.auth.password in src/config.ts:

auth: { password: "your-password" }  // Empty string = no gate

Supports ?pw=your-password URL param for direct access. State persists via sessionStorage.

This is an access gate, not security: it's client-side, so the password and all slide content ship in the JavaScript bundle to anyone who requests the URL. It keeps casual link-forwards from opening the deck — the right tool for "don't let this circulate ahead of the meeting." For a deck that genuinely cannot leak (unannounced financials, M&A), put real authorization in front of the assets — Cloudflare Access or Vercel deployment protection — and keep the gate for UX.

Data-Driven Authoring

For faster deck creation, provide a YAML spec file describing each slide's type, content, and mode:

node ~/.claude/skills/overwatch-slidedeck/scripts/init-deck-from-spec.mjs deck-spec.yaml ./my-deck

The script copies the scaffold, generates config.ts, and creates empty slide files. Fill in each slide using the spec + references/slide-templates.md.

See references/deck-schema.md for the full YAML schema covering all 14 slide types.

Custom Asset Generation

Generate custom icons and graphics matching the Overwatch aesthetic:

Pipeline: Nano Banana Pro → ImageMagick → Potrace → SVG Cleanup

# Generate an icon matching the dark/orange aesthetic
nano-banana-pro "Minimalist neural network icon, flat design,
  3 solid colors, orange #ff6e41 on dark #0c0c0e, geometric"

# Vectorize
magick output.png -posterize 4 -colors 4 processed.png
potrace processed.pbm -s -o icon.svg

# Optimize
svgo icon.svg -o icon-optimized.svg

Required tools:

• nano-banana-pro skill (Gemini 3 Pro image generation)
• ImageMagick (brew install imagemagick)
• Potrace (brew install potrace)
• SVGO (npm install -g svgo)

Reference Documentation

Tips

• One idea per slide — keep content density low; Overwatch decks are visual, not textual
• Slide modes matter — dark for most content, white for analytical/text-heavy, orange for emphasis moments
• Import from "motion/react" — not "framer-motion" (the package is motion v12+)
• Shader fallback — always test with WebGPU disabled; the CSS gradient fallback must look intentional
• Test keyboard nav — ArrowRight/Space/ArrowLeft/Home/End should work on every slide
• Preload wisely — the scaffold preloads n-1, n+1, n+2; adjust in routes/deck.$slide.tsx if needed
• Deploy early — test on Cloudflare/Vercel before the presentation; local dev can mask font loading issues

Related Skills

• aldea-slidedeck — static single-file HTML decks (Blueprint Mode). If the deck ships as a file rather than a URL, use aldea.
• conductor-motion — self-contained behavioral animation demos (typewriter, progress, streaming text). Borrow its timing constants for in-slide motion; don't rebuild its patterns as React components.
• component-gallery — pattern research for slide content (real product UI, tool-call displays, dashboards). Query it before inventing an interface mock.
• minoan-frontend-design — creative direction and typography once the deck structure is set.