Generate interactive presentation slides using React + Tailwind. Triggers on keywords like "slides", "presentation", "PPT", "demo", "benchmark".
View on GitHubNanmiCoder/claude-code-skills
slides-generator
January 20, 2026
Select agents to install to:
npx add-skill https://github.com/NanmiCoder/claude-code-skills/blob/main/plugins/slides-generator/skills/slides-generator/SKILL.md -a claude-code --skill slides-generatorInstallation paths:
.claude/skills/slides-generator/# 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](references/palettes.md) based on style keywords.
## Step 2: Confirm Outline
Present the outline for user confirmation:
```markdown
## 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:
- "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:
```bash
# 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](references/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](references/principles.md))
- First slide code (for re