Frontend Slides
A Claude Code skill that builds single-file HTML slide decks, or converts PowerPoint files to web slides.
- Stars
- 31.7k
- Forks
- 2.4k
- Licence
- MIT
- Language
- JavaScript
- Last update
- 5 months ago
- Type
- AI model / agent
What it is
Frontend Slides is a skill (a set of instructions and support files) for coding agents such as Claude Code that creates presentations as HTML pages. It asks about your content, shows a few visual style previews for you to pick from, and then generates the deck. It can also convert an existing PowerPoint file into a web slideshow while keeping images and text.
- Create a pitch deck from a short written brief
- Convert an existing PowerPoint file into a web slideshow
- Pick from generated style previews to choose a visual direction for a deck
- Export or deploy the finished deck using the included scripts, such as export-pdf.sh and deploy.sh
Great for
- Non-designers who want good-looking web presentations without writing CSS or JavaScript
- People who already use Claude Code and want to make slides from a chat
- Users who have an existing .pptx and want to move it to a web format
- Developers who want slides they can edit as plain HTML files
Not ideal for
- Users who need a visual drag-and-drop editor, since the README describes a chat-driven workflow
- People without a coding agent installed, because the skill is built to run inside one
- Teams that need slides edited collaboratively in the browser, which the README does not mention
How to get it
- 1
Clone and build from source
You'll need: Claude Code or another coding agent with filesystem and shell access
Install via Claude Code marketplace (run first)
/plugin marketplace add https://github.com/zarazhangrui/frontend-slidesInstall the plugin (run second, in a separate message)
/plugin install frontend-slides@frontend-slidesOr clone directly into the Claude Code skills folder
git clone https://github.com/zarazhangrui/frontend-slides.git ~/.claude/skills/frontend-slides - 2
Run it
- Install the plugin or clone the skill into your skills folder
- In Claude Code, type /frontend-slides:frontend-slides (or /frontend-slides if installed manually)
- Describe the deck you want, such as a pitch deck for your AI startup
- Compare the 3 generated style previews and pick one
- Open the generated HTML presentation in your browser
- 3
Get the most out of it
- Give the agent a clear brief with your slide content and any images you want included
- Use the PowerPoint conversion flow to reuse an existing deck, then confirm the extracted text before styling
- Try the bold template pack for more distinctive designs; the safe preset remains the fallback
- Use the included export-pdf.sh script if you need a PDF copy
Downloads
Strengths
- Output is single HTML files with inline CSS and JavaScript, with no npm or build tools needed
- Style discovery shows visual previews, so you do not have to describe your taste in words
- MIT licensed and free to inspect and modify
Trade-offs
- Depends on a coding agent such as Claude Code; the README says other agents may not use the same command surface
- The README is truncated, so details of the bold template pack and some setup steps are not fully verified here
How it compares
| Project | Stars | Type | Level | Updated | Best for |
|---|---|---|---|---|---|
| frontend-slides (this) | 31.7k | AI model / agent | beginner | 5 months ago | Non-designers who want good-looking web presentations without writing CSS or JavaScript |
| reveal.js | 72.5k | Library | intermediate | 1 months ago | Developers who already write HTML, CSS, or JavaScript and want full control over slide design |
| slidev | 49.3k | Dev tool | beginner | 14 days ago | Developers who want to present code, technical talks, or architecture diagrams |
| marp | 12.7k | Other | beginner | 3 months ago | People who prefer writing slides as Markdown text rather than in a visual editor |
| claude-code-best-practice | 68.5k | Learning resource | beginner | 4 days ago | Developers who are new to Claude Code and want an organized overview of its features |
| hermes-agent | 260k | AI model / agent | intermediate | 4 days ago | Developers who want a personal agent they can host on their own server or machine |
Stats synced from GitHub. The assessment above was drafted with AI from the project's README on 2026-10-29 and may miss recent changes — check the README before relying on a command. MIT licence: free to use, modify and distribute, including commercially, as long as you keep the copyright notice.