--- name: bevy-slides description: Build a Bevy-themed HTML slide deck for an internal Bevy/CMX talk, status update, product reveal, or demo presentation. Bootstraps a self-contained folder with index.html, styles.css, deck.js, Bevy brand colors and wordmark, image+video lightbox, keyboard nav, animated AI-flow gradient bar, and click-to-play video tiles. Use when the user wants slides for any Bevy-internal talk — don't reach for PowerPoint or Keynote. allowed-tools: Read, Write, Edit, Bash, Glob, Grep --- # Bevy Slides Animation-rich, dark-themed HTML slide decks that look unmistakably "Bevy". Templates live alongside this skill and are self-contained — no build step, no dependencies, opens by double-clicking `index.html`. ## When to use - "Make me a deck for my Bevy talk on X" - "I'm presenting Y to the team — let's build slides" - "State-of-X internal update slides" - "Build slides showing what shipped recently" - Any Bevy team / CMX / internal Bevy presentation Skip when: - The user wants Google Slides / Keynote / PowerPoint - The deck is for a customer-facing pitch (use a real design tool) - The user already has a deck and just wants edits to existing slides ## Brand tokens (baked into templates) ``` --bevy-primary: #1686FF --bevy-secondary: #8252FF --bevy-cyan: #10FFEE (wordmark + accents) --bevy-cyan-soft: #14FAF4 (icon) --bevy-dark: #292C39 --bevy-darker: #181A23 (canvas) --bevy-light: #FFFFFF --ai-grad-large: linear-gradient(90deg, #7bedff 0%, #d783ff 25%, #7bedff 50%, #d783ff 75%, #7bedff 100%) ``` Font: **Noto Sans** (200 / 400 / 600). Loaded from Google Fonts. Brand assets live at `~/projects/Platform/platform_project/theme/static/images/`: - `logo_header.svg` — Bevy wordmark (cyan) - `bevy_icon.svg` — small circular glyph - `~/projects/Platform/next/public/static/images/ai-texture-background.png` — AI gradient texture ## How to bootstrap a new deck 1. **Pick a destination** — `~/projects/-deck/` is the convention. Stay outside `~/projects/spiralpegasus/` so deck files don't mix with the codebase. 2. **Copy templates**: ```bash SKILL_DIR="$HOME/.claude/skills/bevy-slides/templates" DECK_DIR="$HOME/projects/-deck" mkdir -p "$DECK_DIR/assets/brand" "$DECK_DIR/assets/videos" "$DECK_DIR/assets/blocks" cp "$SKILL_DIR/index.html" "$SKILL_DIR/styles.css" "$SKILL_DIR/deck.js" "$DECK_DIR/" # Bevy brand assets cp "$HOME/projects/Platform/platform_project/theme/static/images/logo_header.svg" "$DECK_DIR/assets/brand/bevy-wordmark.svg" cp "$HOME/projects/Platform/platform_project/theme/static/images/bevy_icon.svg" "$DECK_DIR/assets/brand/bevy-icon.svg" cp "$HOME/projects/Platform/next/public/static/images/ai-texture-background.png" "$DECK_DIR/assets/brand/ai-texture.png" 2>/dev/null || true ``` 3. **Customize the title and slides** — edit `index.html`. Each slide is a `
`. Update the slide counter total in `deck.js` if you change slide count (it auto-counts, so usually no edit needed). 4. **Open in the browser**: `open /index.html`. Hard-reload after edits. ## Required upfront questions before writing slides Before bootstrapping, ask the user (use AskUserQuestion) — these answers shape every slide: 1. **Audience** — internal Bevy team? CMX members? Execs? (Tone changes drastically.) 2. **Length** — short (~5 min, 6–8 slides), medium (~10 min, 10–14 slides), long (~20 min, 18+ slides)? 3. **Tone** — playful, polished/corporate, engineering deep-dive, or executive update? 4. **Demo videos** — will they record videos? Inline auto-play or click-to-play in lightbox? (Click-to-play is the default, lets the speaker talk over.) ## Standard slide types (templates inside `index.html`) | Slide | Purpose | When to use | |---|---|---| | Title | Project / topic name + subtitle, animated gradient ring + orbs | Always slide 1 | | Capability grid | 3×3 grid of icon + headline + 1-line description cards | "What X can do today" | | Asks list (prompt → result) | 2-column list, italic prompt + arrow + result | "Things you can say" or "Example interactions" | | Demos / video tiles | 2–4 click-to-play video tiles in a grid; opens in lightbox | "Watch it work" | | Magic cards | 2×2 grid of icon + headline + paragraph cards | "What makes it different" or "Why it works" | | Edges list | Bulleted limitations with red ✕ markers | "Sharp edges" / honesty slide | | Q&A | Pre-baked questions + answers in a stacked list | Internal talks where you anticipate audience questions | | End | Thanks + next-steps + Bevy wordmark | Always last slide | ## Hard rules (learned from real internal talks) - **No ship dates on slides.** Don't tag features with "Apr 27" or "shipped May 4". The audience knows it's recent. - **No "NEW" / "STRESS" / "POC" tags** unless the user explicitly asks for them. - **Internal Bevy audience already knows what the product is.** Skip "introducing X" — go straight to "state of X" or "what X can do". - **For "things you can say" slides**, every prompt example must be paired with a one-line *result* describing what changes. A bare prompt list is unreadable at speed. - **Demo prompts shown on slides** must use natural language — no internal tool names ("set_block_style", "promo banner block", "aurora gradient preset"). Users wouldn't know those terms. - **Verify visual placement before reporting "done"** — when wiring videos/images into a slide, name the slide number explicitly so the user knows where to look. Better: extract a frame and show it. ## Built-in features (already in the templates) - Keyboard nav: `← → Space` advance, `F` fullscreen, `?` help, `Esc` close, `Home/End` jump - Touch swipe (mobile) - `#slide-N` deep links via URL hash - Image lightbox (click any `.block-shot` figure) - Video lightbox (click any `.video-slot` — opens at max width with autoplay) - Click-outside / × button to close lightbox - Slide counter HUD in bottom-right - AI-flow animated gradient bar across top of every slide - Slide transition: 280ms slide-and-fade horizontal ## Working with demo videos - Drop `.mp4` files into `assets/videos/`. Reference from a `.video-slot` with `data-src="assets/videos/foo.mp4"`. - If a referenced video is missing, the click handler shows a "drop file" hint inline. - For ffmpeg speed-up: `ffmpeg -i in.mp4 -vf "setpts=PTS/2" -an out.mp4` (2× speed, drop audio). ## Iteration etiquette When the user says "I can't see them in slide N", they're telling you the wiring failed silently. Verify with `Read` on the file or by extracting a screenshot — don't just claim it works. The same applies to "make X bigger" — show what you changed, don't summarize. ## See also - The `everything-claude-code:frontend-slides` skill is the generic slide-builder. Use *this* skill when the audience is Bevy / CMX / internal Bevy. Use the generic one for non-Bevy presentations. - `~/projects/miller-deck/` is a real deck built with this template — reference it for layout patterns when you hit a slide type the templates don't cover.