slide-deck

What this skill does

# 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: large and bold. Body text: scarce.
- **Never center-align body paragraphs.** Left-align or use deliberate layout.
- **ALL font sizes must use `clamp(min, preferred, max)`** — never fixed px/rem for text. This ensures readability across viewport sizes.

```css
/* Example clamp values */
--title-size: clamp(2rem, 6vw, 5rem);
--subtitle-size: clamp(0.875rem, 2vw, 1.25rem);
--body-size: clamp(0.75rem, 1.2vw, 1rem);
```

### Color & Backgrounds
- Commit fully to your preset's palette. Define as CSS custom properties.
- **Create atmosphere, not flat colors.** Layer CSS gradients for depth instead of a single solid background color:

```css
/* Layered gradient for depth */
background:
  radial-gradient(ellipse at 20% 80%, rgba(120, 0, 255, 0.15) 0%, transparent 50%),
  radial-gradient(ellipse at 80% 20%, rgba(0, 255, 200, 0.1) 0%, transparent 50%),
  var(--bg-primary);

/* Subtle grid pattern for structure */
background-image:
  linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
  linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
background-size: 50px 50px;
```

- Dominant colors with sharp accents outperform timid, evenly-distributed palettes.

### Layout — Scaled Slide Container
- The slide is a **fixed 1280×720px container** scaled via CSS `transform: scale()` to fit the viewport (like reveal.js). All content is authored at 1280×720 and uniformly scaled.
- **Because of transform scaling, Tailwind's rem-based spacing appears smaller on screen.** For any element that needs visible padding (cards, chips, buttons with backgrounds), use **inline `style={{}}` with px values** instead of Tailwind padding classes.
- Minimum padding for elements with a background: `style={{ padding: '20px 48px' }}` for horizontal chips, `style={{ padding: '24px 32px' }}` for content cards, `style={{ padding: '16px 32px' }}` for buttons.
- Generous whitespace. Content should breathe.
- **Max 60% of the slide area should contain content.** The rest is intentional empty space.
- Use CSS Grid or Flexbox. Avoid absolute positioning unless for decorative elements.
- The `SlideLayout` component handles the scaling + centering.

### Content Density Limits (NON-NEGOTIABLE)

Every slide MUST fit within the 1280×720 container. Content overflows? Split into multiple slides. Never cram, never scr