Frontend Slides

# Frontend Slides

Builds HTML presentations from scratch or from a PowerPoint file and shows visual style previews to pick from, for people who want web slides with no CSS or JavaScript skills.

Made by zarazhangrui on GitHub. These notes are Mindket's, written from its README; the project's own files and license are in its repository.

## About

What it is: Frontend Slides is a skill for coding agents that builds web presentations, either from scratch or by converting a PowerPoint file. It ships as a plugin for Claude Code, while agents such as Codex can follow its main SKILL.md file directly. You do not have to put your taste into words, because it generates previews and you pick the one you like.

Who it suits: People who are not designers but need a good looking deck, with no CSS or JavaScript skills required. You describe the content, pick a style, and the agent builds the slides.

```table
Industry | Who uses it | How they use it | Example
Startups | Founders | Build a pitch deck as a web presentation | A pitch deck for an AI startup
Education | Teachers and trainers | Convert existing PowerPoint lessons into web slideshows | A lecture deck converted with its images kept
Business | Teams that present often | Turn an old PowerPoint file into one HTML file | A team update moved from a pptx file to the browser
Software | Developers who give talks | Choose the Terminal Green style for a developer focused deck | A technical talk with a terminal look
```

Skip it if you need to keep editing in PowerPoint, since the output is an HTML file and not a pptx file.

Where to use it: It runs inside coding agents and the result opens in a browser.

- Claude Code, as a plugin or as a standalone skill
- Codex, Kimi Code, OpenCode and Gemini CLI, by pointing the agent at the repo or at SKILL.md
- Any local coding assistant that can read files and run shell commands
- Your browser, which opens the finished presentation

```table
Use case | Who | What they get back
Build a deck from scratch | Founder or speaker | A full presentation in the style you chose, opened in your browser
Convert a PowerPoint file | Anyone with a pptx | An HTML presentation that keeps all the original images and content
Pick a look without describing it | Non designer | Three visual previews to choose from
```

How to set it up: Pick the route that matches your agent.

- Claude Code for the plugin route, or another coding agent with filesystem and shell access
- git, only if you want to clone the repo into your skills folder

1. In Claude Code, register this project as a plugin marketplace, writing out the whole GitHub address in the message. Shorthand like owner/name may send Claude Code over SSH, and that fails if GitHub is unknown to your machine.
2. Send that as one message. When it finishes, send the install command as a second message.
3. For a manual install, create the skill folder under ~/.claude/skills/ and copy the skill files into it, or clone the repo straight into that folder.
4. With any other agent, paste the repository link and tell it to apply the Frontend Slides skill.

```text
/plugin install frontend-slides@frontend-slides
```

```bash
mkdir -p ~/.claude/skills/frontend-slides/scripts

cp SKILL.md STYLE_PRESETS.md viewport-base.css html-template.md animation-patterns.md ~/.claude/skills/frontend-slides/
cp -R bold-template-pack ~/.claude/skills/frontend-slides/
cp scripts/extract-pptx.py scripts/deploy.sh scripts/export-pdf.sh ~/.claude/skills/frontend-slides/scripts/
```

How to use it: Type the command that starts the skill and tell it what you want. Installed as a plugin, the command is namespaced with the plugin name. Installed by hand, you leave the prefix off.

```text
/frontend-slides:frontend-slides
```

For a new deck, the skill goes through these steps.

- It asks about your content, such as slides, messages and images
- It generates three visual style previews, inferring the mood from your brief unless you named one
- You pick the direction
- It builds the full presentation and opens it in your browser

For a conversion, it pulls the text, images and notes out of your PowerPoint file and shows them for you to confirm. You then pick a style, and it generates an HTML presentation with your original assets.

```table
Tool | What it does
/frontend-slides:frontend-slides | Starts the skill when it is installed as a plugin
/frontend-slides | Starts the skill when it is installed by hand as a standalone skill
SKILL.md | The core instructions that other agents can read directly
bold-template-pack | Optional design forward templates, loaded step by step
```

Example: You start the skill and ask for a pitch deck for an AI startup. It asks about your content, shows three style previews, and after you choose one it builds the whole deck and opens it in your browser.

For newcomers and experts: If you are new to this, ask for a short deck on a topic you know, then look at the three previews and pick the one that feels right. You never have to put a design preference into words.

If you know the field, the output is a single HTML file with its CSS and JavaScript inline, a fixed 16:9 layout and commented code you can edit. The agent reads SKILL.md first and loads only the support files it needs, such as the style presets, the base viewport CSS, the HTML template and the animation patterns. The bold template pack loads progressively, and the safe presets remain the fallback. The trade-off is that other agents lack the plugin command.

```flow
Ask about your content
Generate three style previews
You pick a visual direction
Build the full presentation
Open it in your browser
```

Good to know:

- Each presentation is one HTML file with CSS and JavaScript inline, so nothing needs npm, a build step or a framework.
- The layout is a fixed 16:9, and the code is accessible and well commented.
- Other agents usually do not use the plugin command. Without filesystem access to install, they can still follow SKILL.md for the current session.
- Dark styles: Bold Signal, Electric Studio, Creative Voltage and Dark Botanical.
- Light styles: Notebook Tabs, Pastel Geometry, Split Pastel and Vintage Editorial.
- Specialty styles: Neon Cyber, Terminal Green, Swiss Modern and Paper and Ink.
- The license is MIT.

## On GitHub, 14 November 2026

- Stars: 32,301
- Forks: 2,465
- Watching: 124
- Open issues and pull requests: 71
- Language: JavaScript
- License: MIT
- Topics: ai-slides, anthropic, claude, claude-code, claude-skill, generative-ui, html, presentation, slides, vibe-coding

## Links

- Code: https://github.com/zarazhangrui/frontend-slides
- Releases: https://github.com/zarazhangrui/frontend-slides/releases
- Issues: https://github.com/zarazhangrui/frontend-slides/issues
- Star history: https://www.star-history.com/#zarazhangrui/frontend-slides&Date

## Intro videos

- Stop making PowerPoints: how to vibe code beautiful HTML slides with AI (22k+ stars on GitHub): https://www.youtube.com/watch?v=372Iksaz8b0

## Get the code

```
git clone https://github.com/zarazhangrui/frontend-slides.git
```

Then follow the setup in its README. Nothing in this kit runs by itself.

README.md  7 KB