slides-generator

Files (26)

• SKILL.md
• logo.png · assets/images/
• index.html · assets/template/
• package.json · assets/template/
• postcss.config.js · assets/template/
• App.jsx · assets/template/src/
• Background.jsx · assets/template/src/components/
• ExportModal.jsx · assets/template/src/components/
• Navigation.jsx · assets/template/src/components/
• SlideTransition.jsx · assets/template/src/components/
• index.css · assets/template/src/
• main.jsx · assets/template/src/
• .gitkeep · assets/template/src/slides/
• tailwind.config.js · assets/template/
• vite.config.js · assets/template/
• vite.standalone.config.js · assets/template/
• aesthetics.md · references/
• browser-verification.md · references/
• context-guide.md · references/
• palettes.md · references/
• principles.md · references/
• research-templates.md · references/
• slides-design.md · references/
• export-pdf.js · scripts/
• export-slides.js · scripts/
• merge-pdfs.js · scripts/

SKILL.md (first lines)

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

From bmad-labs/skills, MIT.

More from bmad-labs/skills