| name | slides-generator |
|---|---|
| description | Generate interactive presentation slides using React + Tailwind. Triggers on keywords like "slides", "presentation", "PPT", "demo", "benchmark". |
Generate professional presentation slides through parallel subagent execution.
Step 1: 收集需求 + 确认大纲
Step 2: 创建项目 + 并行生成 slides
Step 3: 组装 + 启动
Ask questions to understand:
- 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.
Quick recommendations:
| User says | Recommend |
|---|---|
| "Tech", "Modern" | dark-sapphire-blue (glass) |
| "Cyberpunk", "Neon" | cyberpunk (glass) |
| "Natural", "Organic" | summer-meadow (flat) |
| "Minimal", "Clean" | black-and-white (flat) |
| "Professional" | minimal-modern-light (flat) |
Present outline for 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. Summary - Conclusions
**Confirm to generate?**# 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. Ensure src/slides/ directory existsFor each slide, dispatch a subagent. Read design-guide.md first, then include its content in each subagent prompt.
Subagent prompt template:
You are generating slide ${number} for a presentation.
## Design Guide
${designGuideContent}
## Theme Colors (use these Tailwind 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'}
## Slide Content
Type: ${slideType}
Title: ${title}
Key Points:
${keyPoints}
## Output
Write a complete JSX file to: src/slides/${filename}
- React function component with default export
- Import icons from lucide-react, animations from framer-motion
- Follow slide-page / slide-content structure from the design guide
${firstSlideCode ? `
## Reference (match this style)
\`\`\`jsx
${firstSlideCode}
\`\`\`` : ''}
Execution: Dispatch all subagents in parallel. After slide 01 is generated, pass its code as reference to subsequent slides.
After all subagents complete:
- Update App.jsx with slide imports:
import Slide01 from './slides/01-hero';
import Slide02 from './slides/02-framework';
// ...
const SLIDES = [Slide01, Slide02, ...];
const NAV_ITEMS = [
{ slideIndex: 0, label: 'Hero' },
{ slideIndex: 1, label: 'Framework' },
// ...
];- Install and start:
npm install && npm run devThemes are defined in palettes.md. Each theme has:
- ID: Unique identifier
- Tags: Keywords for matching user preferences
- Style:
glassorflat - Colors: 5 base colors that expand to full palette
See design-guide.md for layout rules, animation patterns, typography, and style conventions. This file should be included in every subagent prompt.
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
│ ├── components/
│ │ └── Navigation.jsx
│ └── slides/
│ ├── 01-hero.jsx
│ ├── 02-framework.jsx
│ └── ...