Slides Generator

Generate professional presentation slides through parallel subagent execution.

Workflow Overview

Step 1: Collect Requirements ↓ Step 2: Confirm Outline ↓ Step 3: Create Project Skeleton ↓ Step 4: Dispatch Parallel Subagents (one per slide) ↓ Step 5: Finalize and Launch

Step 1: Collect Requirements

Ask questions to understand:

Scenario type: Benchmark / Product Demo / Report / General
Content: Title, number of slides, key points per slide
Style preference: Tech / Professional / Vibrant / Minimal

Recommend a theme from palettes.md based on style keywords.

Step 2: Confirm Outline

Present the outline for user confirmation:

Presentation Outline

Title: Model Engineering Capability Benchmark Theme: dark-sapphire-blue (glass style) Output: ./model-benchmark (reply with path to change)

Slides:

Hero - Title and overview
Framework - Evaluation dimensions
Task 1 - Backend development
Task 2 - Frontend component
Summary - Conclusions

Confirm to generate?

User responses:

"OK" / "Confirm" → Use default path ./project-name
Custom path (e.g., ~/demos ) → Use user-path/project-name

Step 3: Create Project Skeleton

Copy template and configure:

1. Copy template

cp -r <skill-path>/assets/template <output-dir> cd <output-dir>

2. Update tailwind.config.js with theme colors

3. Update index.html title

4. Create empty src/slides/ directory

Step 4: Dispatch Parallel Subagents

For each slide, dispatch a subagent with:

Fixed context (same for all):

Aesthetic philosophy (from aesthetics.md) - PRIMARY design reference
Tech stack: React + Tailwind CSS + lucide-react + framer-motion
Theme color variables (from tailwind.config.js)
Style keyword (glass / flat)
Technical principles (from principles.md)
First slide code (for reference, after slide 01 is generated)

Dynamic context (per subagent):

Slide number: 01, 02, 03...
Filename: 01-hero.jsx , 02-framework.jsx ...
Slide type: Hero / Content / Data / Summary
Content points: Title, key information to display

Subagent prompt template:

You are generating slide ${number} for a presentation.

Design Philosophy (IMPORTANT - Read First)

${aestheticsContent}

Technical Requirements

Framework: React function component
Styling: Tailwind CSS
Icons: lucide-react
Animations: framer-motion (for entrance animations, hover effects)
Export: default function component

Theme Colors (use these variables, not hardcoded colors)

primary-50 to primary-950
accent-50 to accent-950
bg-base, bg-card, bg-elevated
text-primary, text-secondary, text-muted
border-default, border-subtle

Style: ${style}

${style === 'glass' ? 'Use glassmorphism: glass class or bg-white/10 backdrop-blur-md border-white/20' : 'Use flat design: bg-bg-card shadow-sm border-border-default'}

Layout Safety Rules (CRITICAL - Prevents Overflow)

⛔ FORBIDDEN - These WILL break the layout:

❌ h-screen - NEVER use, it ignores parent constraints
❌ h-full on inner content wrappers - steals padding space
❌ Adding p-*, px-*, py-*, pb-* to slide-page - conflicts with built-in padding
❌ Nesting divs with h-full flex ... justify-center inside slide-page
❌ min-h-screen or any viewport-based heights

✅ REQUIRED Structure:

```jsx <div className="slide-page"> {/* Background decorations - use absolute positioning */} <div className="absolute inset-0 pointer-events-none">...</div>

{/* Header - fixed height, use mb-* for spacing */} <header className="relative z-10 mb-6 shrink-0"> <h1>Title</h1> </header>

{/* Content - use slide-content, it auto-fills remaining space /} <div className="slide-content relative z-10"> {/ Grid/cards here - NO h-full on this div */} </div> </div> ```

Why slide-page works:

Has padding: 2.5rem on all sides (top included!)
Has padding-bottom: ~6.5rem for navigation
Is display: flex; flex-direction: column
Children auto-size within the padded area

Content Density Limits (1080p baseline)

Max 4 cards per slide
Max 3 info items per card
Use line-clamp-2 for long text
Use truncate for single-line overflow

Grid Layouts

2 cards: grid-auto-fit grid-cols-2
4 cards (2x2): grid-auto-fit grid-2x2
3 cards: grid-auto-fit grid-1x3
6 cards (2x3): grid-auto-fit grid-2x3

Card Pattern

```jsx <div className="card-fit glass rounded-xl p-4"> <header>Title</header> <div className="card-body">Content</div> </div> ```

Animation Patterns (use framer-motion)

Use motion.div for animated elements
Stagger children with staggerChildren: 0.1
Entrance: { opacity: 0, y: 20 } -> { opacity: 1, y: 0 }
Hover cards: whileHover={{ scale: 1.02 }}
Import: import { motion } from 'framer-motion'

Slide Content

Type: ${slideType} Title: ${title} Key Points: ${keyPoints}

Output

Write a complete JSX file to: src/slides/${filename} Include all necessary imports. Export default function component.

${firstSlideCode ? `

Reference (match this style)

```jsx ${firstSlideCode} ``` ` : ''}

Execution:

// Dispatch all subagents in parallel const subagentPromises = slides.map((slide, index) => dispatchSubagent({ number: String(index + 1).padStart(2, '0'), filename: ${String(index + 1).padStart(2, '0')}-${slide.id}.jsx, slideType: slide.type, title: slide.title, keyPoints: slide.points, style: themeStyle, firstSlideCode: index > 0 ? firstSlideCode : null }) );

await Promise.all(subagentPromises);

Step 5: Finalize and Launch

After all subagents complete:

1. Update App.jsx with slide imports

Generate import statements and SLIDES/NAV_ITEMS arrays

2. Install and start

npm install && npm run dev

App.jsx update pattern:

// Add imports at top import Slide01 from './slides/01-hero'; import Slide02 from './slides/02-framework'; // ...

// Update SLIDES array const SLIDES = [Slide01, Slide02, ...];

// Update NAV_ITEMS array const NAV_ITEMS = [ { slideIndex: 0, label: 'Hero' }, { slideIndex: 1, label: 'Framework' }, // ... ];

Step 6: Browser Verification (Optional)

If chrome-devtools MCP is available:

Check if installed

claude mcp list | grep -q "chrome-devtools"

If not, install

claude mcp add chrome-devtools -- npx chrome-devtools-mcp@latest

Use chrome-devtools to:

Navigate to http://localhost:5173
Take screenshots of each slide
Verify navigation works
Fix any issues found

Theme System

Themes are defined in palettes.md.

Each theme has:

ID: Unique identifier
Tags: Keywords for matching user preferences
Style: glass or flat (can be overridden by user)
Colors: 5 base colors that expand to full palette

Quick recommendations:

User says Recommend

"Tech", "Modern" dark-sapphire-blue (glass)

"Professional", "Business" banking-website (flat)

"Cyberpunk", "Neon" cyberpunk (glass)

"Natural", "Organic" summer-meadow (flat)

"Minimal", "Clean" black-and-white (flat)

Design Principles

See principles.md for:

Color variable usage
Typography scale
Spacing conventions
Component structure

Project Structure

Generated project:

output-dir/ ├── package.json ├── vite.config.js ├── tailwind.config.js ← Theme colors ├── index.html ← Title ├── src/ │ ├── main.jsx │ ├── App.jsx ← Slide imports & navigation │ ├── index.css │ └── slides/ │ ├── 01-hero.jsx ← Generated by subagent │ ├── 02-framework.jsx │ └── ... └── ...

Example Interaction

User: "Create a benchmark presentation for Claude vs GPT"

Claude: "I'll help create benchmark slides. A few questions:

How many evaluation tasks? (e.g., 3-5)
What capabilities are you testing? (coding / reasoning / agent)
Style preference? (Tech/Professional/Vibrant)"

User: "3 tasks, coding ability, tech style"

Claude: "Recommended theme: dark-sapphire-blue (glass style)

Outline

Title: Claude vs GPT Coding Benchmark Theme: dark-sapphire-blue Output: ./claude-benchmark