/slide-deck
Use when building browser-based presentation slide decks, creating training presentations, generating React+Vite slide decks with animations, or making professional slides. Triggers on slide deck, presentation, training slides, Vite slides, Framer Motion slides, animated
$ npx -y skills add code-on-sunday/slide-deck-generator --skill slide-deck --agent claude-codeHow it fires
How this skill gets triggered: by you, by Claude, or both.
- Fires itselfAuto-invocation. Claude auto-loads it when your prompt matches the work.Auto-invocation is when the right skill fires by itself at the right moment, driven by a FLOW.md router and a hook, instead of you invoking it by name. It is the difference between a skill being installed and a skill actually getting used.Read the full definition →
- You can call itInvoke it directly when you want it.
- Slash command
/slide-deck
Context preview
The summary Claude sees to decide when to auto-load this skill.
Use when building browser-based presentation slide decks, creating training presentations, generating React+Vite slide decks with animations, or making professional slides. Triggers on slide deck, presentation, training slides, Vite slides, Framer Motion slides, animated
SKILL.md
slide-deck.SKILL.mdname: slide-deck
description: Use when building browser-based presentation slide decks, creating training presentations, generating React+Vite slide decks with animations, or making professional slides. Triggers on slide deck, presentation, training slides, Vite slides, Framer Motion slides, animated presentations.
Slide Deck Builder — Technical Instructions
You are building a browser-based presentation slide deck as a React + Vite app. Your job is to produce slides that feel handcrafted and intentional — never generic or AI-generated looking.
**Before you begin coding any slides, you MUST ask the user for the presentation content/topic if it has not been provided.** Do not invent content. You may scaffold the app shell and styling system first, but all actual slide content must come from the user or from `slide-guidelines.md` in this directory.
---
1. Tech Stack
| Layer | Choice | |-------|--------| | Build | Vite | | Framework | React 18+ with TypeScript | | Animation | Framer Motion (motion/react) | | Styling | Tailwind CSS v4 | | Charts | Recharts | | Icons | Lucide React | | Routing | Keyboard/click navigation (no router needed) | | Code highlighting | (only if needed) Prism React Renderer |
Install only what you need. Do not add libraries speculatively.
---
2. Project Structure
slides/
├── index.html
├── package.json
├── vite.config.ts
├── tailwind.config.ts
├── tsconfig.json
├── public/
│ └── images/ # All slide images go here
├── src/
│ ├── main.tsx
│ ├── App.tsx # Slide deck shell, navigation, keyboard controls
│ ├── index.css # Tailwind imports + custom fonts + base styles
│ ├── slides/
│ │ ├── index.ts # Export ordered array of all slides
│ │ ├── 01-intro.tsx
│ │ ├── 02-problem.tsx
│ │ └── ... # One file per slide or small group of related slides
│ ├── components/
│ │ ├── SlideLayout.tsx # Shared slide wrapper (scaling, padding, background)
│ │ ├── AnimatedText.tsx # Reusable text entrance animations
│ │ ├── Chart.tsx # Recharts wrapper
│ │ ├── ImageSlide.tsx # Image display component
│ │ ├── InteractiveBlock.tsx # For custom interactive UI per slide
│ │ └── ...
│ └── lib/
│ ├── animations.ts # Shared Framer Motion variants and transitions
│ ├── theme.ts # Color palette, font sizes, spacing tokens
│ └── useSlideScale.ts # Hook for viewport-fitting scale
---
3. Style Discovery — Mood & Presets
Step 1: Ask the User for Mood
Before choosing colors and fonts, ask the user what feeling the audience should have:
| Mood | Description | |------|-------------| | Impressed / Confident | Professional, trustworthy, bold | | Excited / Energized | Innovative, bold, creative | | Calm / Focused | Clear, thoughtful, minimal | | Inspired / Moved | Emotional, memorable, elegant |
Step 2: Pick a Style Preset
Based on mood, suggest 2-3 presets from the table below. Each preset defines fonts, colors, and signature visual elements. **Do NOT mix and match randomly — commit to one preset fully.**
Dark Presets
| Preset | Mood | Display Font | Body Font | Colors | Signature | |--------|------|-------------|-----------|--------|-----------| | **Bold Signal** | Confident | Archivo Black (900) | Space Grotesk (400) | `#1a1a1a` bg, `#FF5722` accent card, white text | Colored card as focal, large section numbers, grid layout | | **Electric Studio** | Confident | Manrope (800) | Manrope (400) | `#0a0a0a` bg, `#4361ee` accent blue, white text | Two-panel vertical split, accent bar on edge | | **Creative Voltage** | Energized | Syne (700) | Space Mono (400) | `#0066ff` primary, `#1a1a2e` dark, `#d4ff00` neon | Electric blue + neon yellow, halftone textures | | **Dark Botanical** | Inspired | Cormorant (400) serif | IBM Plex Sans (300) | `#0f0f0f` bg, `#d4a574` warm accent, `#e8b4b8` pink | Abstract blurred gradient circles, thin accent lines |
Light Presets
| Preset | Mood | Display Font | Body Font | Colors | Signature | |--------|------|-------------|-----------|--------|-----------| | **Notebook Tabs** | Organized | Bodoni Moda (700) serif | DM Sans (400) | `#f8f6f1` page, `#2d2d2d` outer, colorful tabs | Paper card on dark bg, colored section tabs | | **Pastel Geometry** | Friendly | Plus Jakarta Sans (700) | Plus Jakarta Sans (400) | `#c8d9e6` bg, `#faf9f7` card, pastel pills | Rounded card, vertical pills, soft shadow | | **Vintage Editorial** | Inspired | Fraunces (700) serif | Work Sans (400) | `#f5f3ee` cream, `#1a1a1a` text, `#e8d4c0` warm | Geometric shapes (circle + line + dot), bold borders | | **Swiss Modern** | Focused | Archivo (800) | Nunito (400) | Pure white, pure black, `#ff3300` red accent | Visible grid, asymmetric layouts, geometric shapes |
Specialty Presets
| Preset | Mood | Font | Colors | Signature | |--------|------|------|--------|-----------| | **Neon Cyber** | Techy | Clash Display + Satoshi | `#0a0f1c` navy, `#00ffcc` cyan, `#ff00aa` magenta | Neon glow, grid patterns, particle-like effects | | **Terminal Green** | Hacker | JetBrains Mono | `#0d1117` dark, `#39d353` green | Scan lines, blinking cursor, code aesthetic | | **Paper & Ink** | Editorial | Cormorant Garamond + Source Serif 4 | `#faf9f7` cream, `#1a1a1a` charcoal, `#c41e3a` crimson | Drop caps, pull quotes, elegant horizontal rules |
Step 3: Apply the Preset
Once chosen, define the full theme in `src/lib/theme.ts` and as CSS custom properties in `src/index.css`:
- All colors from the preset
- Font families loaded from Google Fonts or Fontshare
- CSS variables for backgrounds, accents, text colors
- **Use the preset's signature elements** in at least the title slide and section transitions
---
4. Design System — Anti AI-Slop Rules
Typography
- Use the font pairing from your chosen preset. Load from Google Fonts or Fontshare via `@import` in CSS.
- No more than 2 font families.
- Headlines:
Read more
name: slide-deck description: Use when building browser-based presentation slide decks, creating training presentations, generating React+Vite slide decks with animations, or making professional slides. Triggers on slide deck, presentation, training slides, Vite slides, Framer Motion slides, animated presentations.
Slide Deck Builder — Technical Instructions
You are building a browser-based presentation slide deck as a React + Vite app. Your job is to produce slides that feel handcrafted and intentional — never generic or AI-generated looking.
**Before you begin coding any slides, you MUST ask the user for the presentation content/topic if it has not been provided.** Do not invent content. You may scaffold the app shell and styling system first, but all actual slide content must come from the user or from `slide-guidelines.md` in this directory.
---
1. Tech Stack
| Layer | Choice | |-------|--------| | Build | Vite | | Framework | React 18+ with TypeScript | | Animation | Framer Motion (motion/react) | | Styling | Tailwind CSS v4 | | Charts | Recharts | | Icons | Lucide React | | Routing | Keyboard/click navigation (no router needed) | | Code highlighting | (only if needed) Prism React Renderer |
Install only what you need. Do not add libraries speculatively.
---
2. Project Structure
slides/ ├── index.html ├── package.json ├── vite.config.ts ├── tailwind.config.ts ├── tsconfig.json ├── public/ │ └── images/ # All slide images go here ├── src/ │ ├── main.tsx │ ├── App.tsx # Slide deck shell, navigation, keyboard controls │ ├── index.css # Tailwind imports + custom fonts + base styles │ ├── slides/ │ │ ├── index.ts # Export ordered array of all slides │ │ ├── 01-intro.tsx │ │ ├── 02-problem.tsx │ │ └── ... # One file per slide or small group of related slides │ ├── components/ │ │ ├── SlideLayout.tsx # Shared slide wrapper (scaling, padding, background) │ │ ├── AnimatedText.tsx # Reusable text entrance animations │ │ ├── Chart.tsx # Recharts wrapper │ │ ├── ImageSlide.tsx # Image display component │ │ ├── InteractiveBlock.tsx # For custom interactive UI per slide │ │ └── ... │ └── lib/ │ ├── animations.ts # Shared Framer Motion variants and transitions │ ├── theme.ts # Color palette, font sizes, spacing tokens │ └── useSlideScale.ts # Hook for viewport-fitting scale
---
3. Style Discovery — Mood & Presets
Step 1: Ask the User for Mood
Before choosing colors and fonts, ask the user what feeling the audience should have:
| Mood | Description | |------|-------------| | Impressed / Confident | Professional, trustworthy, bold | | Excited / Energized | Innovative, bold, creative | | Calm / Focused | Clear, thoughtful, minimal | | Inspired / Moved | Emotional, memorable, elegant |
Step 2: Pick a Style Preset
Based on mood, suggest 2-3 presets from the table below. Each preset defines fonts, colors, and signature visual elements. **Do NOT mix and match randomly — commit to one preset fully.**
Dark Presets
| Preset | Mood | Display Font | Body Font | Colors | Signature | |--------|------|-------------|-----------|--------|-----------| | **Bold Signal** | Confident | Archivo Black (900) | Space Grotesk (400) | `#1a1a1a` bg, `#FF5722` accent card, white text | Colored card as focal, large section numbers, grid layout | | **Electric Studio** | Confident | Manrope (800) | Manrope (400) | `#0a0a0a` bg, `#4361ee` accent blue, white text | Two-panel vertical split, accent bar on edge | | **Creative Voltage** | Energized | Syne (700) | Space Mono (400) | `#0066ff` primary, `#1a1a2e` dark, `#d4ff00` neon | Electric blue + neon yellow, halftone textures | | **Dark Botanical** | Inspired | Cormorant (400) serif | IBM Plex Sans (300) | `#0f0f0f` bg, `#d4a574` warm accent, `#e8b4b8` pink | Abstract blurred gradient circles, thin accent lines |
Light Presets
| Preset | Mood | Display Font | Body Font | Colors | Signature | |--------|------|-------------|-----------|--------|-----------| | **Notebook Tabs** | Organized | Bodoni Moda (700) serif | DM Sans (400) | `#f8f6f1` page, `#2d2d2d` outer, colorful tabs | Paper card on dark bg, colored section tabs | | **Pastel Geometry** | Friendly | Plus Jakarta Sans (700) | Plus Jakarta Sans (400) | `#c8d9e6` bg, `#faf9f7` card, pastel pills | Rounded card, vertical pills, soft shadow | | **Vintage Editorial** | Inspired | Fraunces (700) serif | Work Sans (400) | `#f5f3ee` cream, `#1a1a1a` text, `#e8d4c0` warm | Geometric shapes (circle + line + dot), bold borders | | **Swiss Modern** | Focused | Archivo (800) | Nunito (400) | Pure white, pure black, `#ff3300` red accent | Visible grid, asymmetric layouts, geometric shapes |
Specialty Presets
| Preset | Mood | Font | Colors | Signature | |--------|------|------|--------|-----------| | **Neon Cyber** | Techy | Clash Display + Satoshi | `#0a0f1c` navy, `#00ffcc` cyan, `#ff00aa` magenta | Neon glow, grid patterns, particle-like effects | | **Terminal Green** | Hacker | JetBrains Mono | `#0d1117` dark, `#39d353` green | Scan lines, blinking cursor, code aesthetic | | **Paper & Ink** | Editorial | Cormorant Garamond + Source Serif 4 | `#faf9f7` cream, `#1a1a1a` charcoal, `#c41e3a` crimson | Drop caps, pull quotes, elegant horizontal rules |
Step 3: Apply the Preset
Once chosen, define the full theme in `src/lib/theme.ts` and as CSS custom properties in `src/index.css`:
- All colors from the preset
- Font families loaded from Google Fonts or Fontshare
- CSS variables for backgrounds, accents, text colors
- **Use the preset's signature elements** in at least the title slide and section transitions
---
4. Design System — Anti AI-Slop Rules
Typography
- Use the font pairing from your chosen preset. Load from Google Fonts or Fontshare via `@import` in CSS.
- No more than 2 font families.
- Headlines:
An AI skill for coding agents that creates production-ready, browser-based presentation slide decks with interactive UI using React + Vite + Framer Motion.