# Slides

> Turns bullet points, research, or structured content into a browser-based Reveal.js slide deck. Use when the user asks to create slides, a presentation, a deck, a slideshow, or says "present this", "turn this into slides", "make a deck", or mentions keynote, powerpoint, or reveal.

- **Type:** Skill
- **Install:** `agentstack add skill-npow-claude-skills-slides`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [npow](https://agentstack.voostack.com/s/npow)
- **Installs:** 0
- **Category:** [AI & ML](https://agentstack.voostack.com/c/ai-and-ml)
- **Latest version:** 0.1.0
- **License:** Apache-2.0
- **Upstream author:** [npow](https://github.com/npow)
- **Source:** https://github.com/npow/claude-skills/tree/main/slides

## Install

```sh
agentstack add skill-npow-claude-skills-slides
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# Slides

Converts content from the conversation into a Reveal.js HTML slide deck, writes it to /tmp/slides.html, and opens it live in the browser.

## Workflow

1. **Extract content structure** — identify the title, sections, and key points from the conversation or user-supplied content. See [TEMPLATE.md](TEMPLATE.md) for content chunking rules.
2. **Plan slide types and count** — assign each section a slide type: title, bullet, two-column, quote, or code. Max 6 bullets per slide; split if more. See [TEMPLATE.md](TEMPLATE.md) for slide type patterns.
3. **Write /tmp/slides.html** — use the complete Reveal.js template with all CDN links in correct order. See [TEMPLATE.md](TEMPLATE.md) for the full template.
4. **Render in browser** — follow [`_shared/chrome-devtools-render.md`](../_shared/chrome-devtools-render.md) to open `/tmp/slides.html`, wait for render, and screenshot. `wait_for` the title slide's main heading text. See [TROUBLESHOOTING.md](TROUBLESHOOTING.md) if slide rendering looks wrong.
5. **Tell user how to navigate** — reply: "arrow keys to navigate, F for fullscreen".

## Self-review checklist

Before delivering, verify ALL:

- [ ] Screenshot shows a styled dark slide — not plain unstyled HTML text on a white background
- [ ] Heading text is mixed-case, not ALL CAPS (custom CSS override applied)
- [ ] No slide has more than 6 bullet points
- [ ] CDN links appear in correct order: reveal.css, then black.css theme, then reveal.js
- [ ] Reveal.initialize() is called with hash: true, transition: 'slide', backgroundTransition: 'fade'
- [ ] wait_for was called before take_screenshot
- [ ] User was told: arrow keys to navigate, F for fullscreen

## Golden rules

Hard rules. Never violate these.

1. **Never allow headings to render uppercase.** Always include `.reveal h1, .reveal h2 { text-transform: none; }` in custom CSS. Reveal.js default forces uppercase and it looks bad.
2. **Never put more than 6 bullet points on one slide.** Split into two consecutive slides with a shared heading if needed (e.g. "Key Points (1/2)" and "Key Points (2/2)").
3. **Always load theme CSS after reveal.css.** The order is: reveal.css, then theme/black.css. Reversed order silently breaks all theming.
4. **Always use hash: true in Reveal.initialize.** This enables deep-linking to slides by index.
5. **Always call wait_for before take_screenshot.** Wait on the title text. Screenshotting before Reveal renders produces a blank white image.
6. **Always use new_page for first open.** Use mcp__chrome-devtools__new_page with url: file:///tmp/slides.html. Never navigate an existing page to a file:// URL.

## Reference files

| File | Contents |
|------|----------|
| [TEMPLATE.md](TEMPLATE.md) | Complete Reveal.js HTML template, all slide type patterns, content chunking rules |
| [TROUBLESHOOTING.md](TROUBLESHOOTING.md) | Failure diagnosis table: symptoms, causes, fixes |

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [npow](https://github.com/npow)
- **Source:** [npow/claude-skills](https://github.com/npow/claude-skills)
- **License:** Apache-2.0

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-npow-claude-skills-slides
- Seller: https://agentstack.voostack.com/s/npow
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.