Back to Skills

slides-generator

verified

Generate interactive presentation slides using React + Tailwind. Triggers on keywords like "slides", "presentation", "PPT", "demo", "benchmark".

View on GitHub

Marketplace

claude-code-skills

NanmiCoder/claude-code-skills

Plugin

slides-generator

productivity

Repository

NanmiCoder/claude-code-skills
27stars

plugins/slides-generator/skills/slides-generator/SKILL.md

Last Verified

January 20, 2026

Install Skill

Select agents to install to:

Scope:
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-generator

Installation paths:

Claude
.claude/skills/slides-generator/
Powered by add-skill CLI

Instructions

# 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

Validation Details

Front Matter
Required Fields
Valid Name Format
Valid Description
Has Sections
Allowed Tools
Instruction Length:
8691 chars