slides-generator

What this skill does

# Slides Generator

Generate professional, interactive presentation slides with React + Tailwind.

## Project Structure

Each slide project is organized in a dedicated folder:

```
<project-folder>/
├── context.md          ← Collected knowledge and context from user
├── researches/         ← Research documents (when topic requires research)
│   └── YYYY-MM-DD-topic.md
├── slides.md           ← Markdown slides for preview/discussion
├── source/             ← React source code (from template)
│   ├── package.json
│   ├── vite.config.js
│   ├── vite.standalone.config.js
│   ├── tailwind.config.js
│   ├── index.html
│   └── src/
│       ├── App.jsx
│       ├── index.css
│       └── slides/
│           ├── 01-hero.jsx
│           ├── 02-content.jsx
│           └── ...
├── verify/             ← Verification screenshots (from browser testing)
└── slide.html          ← Final standalone HTML (auto-generated)
```

## Workflow Overview

```
Step 1: Initialize Project Folder
    ↓
Step 2: Collect Requirements (Progressive Disclosure)
    Phase 1: Topic → Phase 2: Audience → Phase 3: Style → Phase 4: Content
    ↓
Step 2.5: Research Checkpoint
    "Would you like me to research [topic]?" → User confirms
    ↓
Step 3: Create context.md + slides.md
    ↓
Step 4: Confirm Outline with User
    ↓
Step 5: Create Source Code → source/
    ↓
Step 6: Generate Slides (parallel subagents)
    ↓
Step 7: Dev Mode + Browser Verification (REQUIRED)
    ↓
Step 8: Build & Export → slide.html
```

## Step 1: Initialize Project Folder

**Ask user for project folder if not provided:**
```
Where would you like to save this presentation?
Default: ./presentation-name
```

**Create folder structure:**
```bash
mkdir -p <project-folder>/source <project-folder>/researches <project-folder>/verify
```

## Step 2: Collect Requirements (Progressive Disclosure)

Use progressive disclosure: ask 3-5 questions at a time, reveal more based on answers.

See [context-guide.md](references/context-guide.md) for detailed question flow.

### Question Flow

**Phase 1 - Quick Start** (Always):
```
"What's the presentation about?"
"Any content or notes to include?" (optional)
```

**Phase 2 - Audience & Purpose** (Always):
```
"Who will view this?"
  - Executives / Decision makers
  - Technical team / Developers
  - General audience / Mixed
  - Customers / External

"What's the goal?"
  - Inform / Persuade / Demo / Report
```

**Phase 3 - Style Discovery** (Always):

**Step 1**: Get keywords from user
```
"Describe the vibe in a few words"
  Examples: "tech, modern, dark" or "professional, clean, corporate"
```

**Step 2**: Use **ui-ux-pro-max** skill for comprehensive design recommendations

```bash
python3 ~/.claude/skills/ui-ux-pro-max/scripts/search.py "<topic> <keywords> presentation" --design-system -p "<Presentation Name>"
```

This provides:
- Style recommendations with reasoning
- Color palette suggestions
- Typography pairings
- Animation guidelines

**Step 3**: Combine with [palettes.md](references/palettes.md) to present 5 options
Example prompt to user:
```
Based on your description and design analysis, here are 5 style options:

1. **Dark Sapphire Blue** (glass) - Recommended by ui-ux-pro-max
   Dark tech with blue accents, gradient glows
   Typography: Sora + Source Sans 3
   Best for: Tech products, developer tools

2. **Electric City Nights** (glass)
   Urban dark with vibrant blue highlights
   Typography: DM Sans + Work Sans
   Best for: Modern SaaS, tech startups

3. **Cyberpunk** (glass)
   Neon colors, futuristic sci-fi feel
   Typography: Outfit + Nunito Sans
   Best for: Gaming, AI/ML, futuristic topics

4. **Minimal Modern Light** (flat)
   Clean light theme with blue accents
   Typography: DM Sans + Work Sans
   Best for: Corporate, professional presentations

5. **Hacker News** (glass)
   Dark with orange accents, geek aesthetic
   Typography: Sora + Source Sans 3
   Best for: Developer content, technical demos

Which style? (1-5)
```

**Selection is captured in context.md** under Style section.

**Phase 4 - Content Depth** (Conditional):
```
"What are 3-5 key points to cover?"
"Any specific data to include?"
  - Yes, I have data → [Get details]
  - Research needed → [Trigger Step 2.5]
  - No data needed → [Skip]
```

### Drill-Down for Abstract Terms

When users give vague terms, clarify:

| User Says | Ask |
|-----------|-----|
| "Professional" | "Clean/minimal, or rich/detailed?" |
| "Modern" | "Can you point to an example?" |
| "Engaging" | "Animations, or compelling content?" |

### Save to context.md

After questions, create `context.md` capturing:
- Topic, purpose, audience from Phase 1-2
- **Selected style** (palette ID, name, style type) from Phase 3
- Key points and data needs from Phase 4

```markdown
## Style (User Selected)
- **Palette ID**: dark-sapphire-blue
- **Palette Name**: Dark Sapphire Blue
- **Mode**: dark
- **Style**: glass
- **Typography**:
  - Display: Sora
  - Body: Source Sans 3
- **User Keywords**: "tech, modern, dark"
- **Design Source**: ui-ux-pro-max + palettes.md
```

## Step 2.5: Research Checkpoint

**Always ask before researching** - apply Just-In-Time research pattern.

### When to Offer Research

Offer research when:
- Topic involves comparisons (A vs B)
- User mentions data/statistics/benchmarks
- Topic is current events or recent technology
- User needs facts they don't have

Skip research when:
- User provides their own data
- Topic is personal/internal
- User explicitly declines

### Research Prompt

```
"This topic would benefit from research. Would you like me to:

[ ] Research current data/statistics
[ ] Find competitive comparisons
[ ] Gather industry trends
[ ] Skip research - I'll provide content"
```

### Research Workflow

```
1. User confirms research needed
    ↓
2. Conduct targeted web search
    ↓
3. Document in researches/ folder
    ↓
4. Present summary to user:
   "I found: [key findings]. Does this look accurate?"
    ↓
5. User confirms → Update context.md
```

### Research Templates

See [research-templates.md](references/research-templates.md) for:
- **Statistics & Data** - Metrics, benchmarks, numbers
- **Competitive Analysis** - A vs B comparisons
- **Trends & Forecasts** - Industry outlook
- **Quick Facts** - Simple fact lookup

### File Organization

```
researches/
├── YYYY-MM-DD-statistics.md    # Data and numbers
├── YYYY-MM-DD-comparison.md    # A vs B analysis
└── YYYY-MM-DD-trends.md        # Industry trends
```

### Quality Checklist

Before using researched data:
- [ ] Source is authoritative
- [ ] Data is recent (<6 months for fast fields)
- [ ] Cross-referenced with another source
- [ ] User has confirmed accuracy

**After research, update context.md** with verified data and sources.

## Step 3: Create Markdown Slides

Create `slides.md` with complete design system and content structure. See [slides-design.md](references/slides-design.md) for detailed patterns.

### 3.1 Generate Design System (Optional but Recommended)

Use **ui-ux-pro-max** skill to get comprehensive design recommendations:

```bash
python3 skills/ui-ux-pro-max/scripts/search.py "<topic> <style keywords>" --design-system -p "<Presentation Name>"
```

**Example:**
```bash
python3 skills/ui-ux-pro-max/scripts/search.py "tech benchmark modern dark glass" --design-system -p "Claude Benchmark"
```

### 3.2 slides.md Template

```markdown
# [Presentation Title]

## Design System

### Theme
- **Palette**: [theme-id from palettes.md]
- **Mode**: dark / light
- **Style**: glass / flat

### Colors
| Token | Hex | Usage |
|-------|-----|-------|
| bg-base | #0f1c2e | Main background |
| primary-500 | #4d648d | Primary accent |
| accent-500 | #3d5a80 | Contrast accent |
| text-primary | #ffffff | Main text |
| text-secondary | #cee8ff | Secondary text |

### Typography
- **Display**: Sora (headings)
- **Body**: Source Sans 3 (content)

### Effects
- **Cards**: glass with border-white/20
- **Animations**: stagger reveal (0.1s delay)
- **Background**: