Generate interactive presentation slides using React + Tailwind. Triggers on keywords like "slides", "presentation", "PPT", "demo", "benchmark".
/plugin marketplace add NanmiCoder/claude-code-skills/plugin install nanmicoder-slides-generator@NanmiCoder/claude-code-skillsThis skill inherits all available tools. When active, it can use any tool Claude has access to.
assets/template/index.htmlassets/template/package.jsonassets/template/postcss.config.jsassets/template/src/App.jsxassets/template/src/components/Background.jsxassets/template/src/components/Navigation.jsxassets/template/src/components/SlideTransition.jsxassets/template/src/index.cssassets/template/src/main.jsxassets/template/tailwind.config.jsassets/template/vite.config.jsreferences/aesthetics.mdreferences/palettes.mdreferences/principles.mdGenerate professional presentation slides through parallel subagent execution.
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
Ask questions to understand:
Recommend a theme from palettes.md based on style keywords.
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**:
1. Hero - Title and overview
2. Framework - Evaluation dimensions
3. Task 1 - Backend development
4. Task 2 - Frontend component
5. Summary - Conclusions
**Confirm to generate?**
User responses:
./project-name~/demos) → Use user-path/project-nameCopy 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
For each slide, dispatch a subagent with:
Fixed context (same for all):
Dynamic context (per subagent):
01-hero.jsx, 02-framework.jsx...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);
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' },
// ...
];
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:
Themes are defined in palettes.md.
Each theme has:
glass or flat (can be overridden by user)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) |
See principles.md for:
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
│ └── ...
└── ...
User: "Create a benchmark presentation for Claude vs GPT"
Claude: "I'll help create benchmark slides. A few questions:
1. How many evaluation tasks? (e.g., 3-5)
2. What capabilities are you testing? (coding / reasoning / agent)
3. 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
**Slides**:
1. Hero - Title and model overview
2. Framework - Evaluation methodology
3. Task 1 - API development
4. Task 2 - React components
5. Task 3 - CLI tools
6. Summary - Results and recommendations
Confirm to generate?"
User: "OK"
Claude: [Creates project skeleton]
Claude: [Dispatches 6 parallel subagents]
Claude: [Updates App.jsx with imports]
Claude: [Runs npm install && npm run dev]
Claude: "Presentation ready at http://localhost:5173"