Skip to content
Get packs

Frontend Slides

Builds animation-rich, single-file HTML presentations from scratch or from PowerPoint files

Source Download skill
Repository
zarazhangrui/frontend-slides
Stars
31,732
Licence
MIT
Files
6 files

What it does

When installed, the agent creates a presentation as a single self-contained HTML file that runs in any web browser, with no software to install. It designs slides on a fixed 16:9 canvas that scales to any screen, pushes for distinctive fonts, colors and animations rather than generic templates, and can convert an existing PowerPoint file into a web deck. It also helps people who are not designers pick a visual style by showing previews first.

Great for

  • Non-designers who want a polished, animated talk or pitch deck without learning a presentation tool
  • Developers who want a presentation they can host or embed as a plain web page
  • People converting an existing .pptx file into a web-based slide deck

Skip it if

  • Presentations that must be edited later by non-technical colleagues in PowerPoint or Google Slides, since the output is HTML code
  • Decks needing phone-friendly reflowing layouts, because the skill deliberately keeps slides at a fixed 16:9 size on every screen

Try asking

  • “Create a 10-slide pitch deck for my startup with a bold dark theme”
  • “Convert my quarterly_review.pptx into an animated HTML presentation”
  • “Help me find a visual style for a conference talk on climate data”
  • “Add two image-heavy slides to my existing presentation without breaking the layout”
Step-by-step guide: how to use Frontend SlidesInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 6 original files, the MIT licence and an attribution note.

    frontend-slides.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip frontend-slides.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip frontend-slides.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Say early whether the deck is for speaking live or for reading alone, since the skill designs differently for each
  • Review the style preview cards before committing, as choosing a look is the skill's core workflow
  • Ask for extra slides rather than cramming content, because the skill splits overflowing content automatically

What's inside

  • animation-patterns.md
  • html-template.md
  • README.md
  • SKILL.md
  • STYLE_PRESETS.md
  • viewport-base.css

Redistributed unmodified from zarazhangrui/frontend-slides under the MIT licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.