Skip to content
Get packs

Frontend Slides

Builds animated, single-file HTML presentations that run in any browser

Source Download skill
Repository
affaan-m/ECC
Stars
295,127
Licence
MIT
Files
3 files

What it does

When installed, the agent can turn a topic, rough notes, or an existing PowerPoint file into a self-contained web presentation that opens in a browser with no software installed. It helps people who are not designers pick a visual style by previewing a few sample slides rather than answering abstract questions, then builds the deck with motion, keyboard/touch/scroll navigation, and checks that every slide fits the screen.

Great for

  • Non-designers who need a polished talk, pitch, or workshop deck quickly
  • Developers who want to convert an existing .pptx into a lightweight HTML presentation
  • People who want a presentation they can host or open offline as one file

Skip it if

  • Teams that need to co-edit slides in PowerPoint or Google Slides, since the output is hand-built HTML code (reason: no editor workflow is provided)
  • Decks with heavy data charts or formal brand templates that must match an existing master file (reason: the skill favours distinctive custom styling and does not mention template matching)

Try asking

  • “Create a 12-slide investor pitch deck about my meal-planning app, with a bold editorial style”
  • “Convert my client-kickoff.pptx into an animated HTML presentation, keeping speaker notes”
  • “Show me three style previews for a conference talk on climate data and let me pick one”
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 3 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

  • Give the agent your raw content up front (paste notes or the .pptx) so it can size the deck correctly before choosing a style.
  • Pick one of the generated previews and ask for specific elements to be mixed in, rather than starting from scratch.
  • Open the finished file in a browser and resize the window to check it on phone-sized screens before sharing.

What's inside

  • agents/openai.yaml
  • SKILL.md
  • STYLE_PRESETS.md

Redistributed unmodified from affaan-m/ECC 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.