Skip to content
Get packs

Guide · Agent skill

How to use the Frontend Slides agent skill

Updated · written with AI from the project's own documentation and checked against our catalogue data

Frontend Slides is an agent skill that lets an AI agent build a presentation as a self-contained HTML file that runs in a web browser. It is for people who need a polished talk, pitch, or workshop deck, including non-designers and developers who want to convert an existing PowerPoint file. After this guide you will know what the skill does, how to install it, how to ask for a deck in plain language, and what to check before you present.

Frontend Slidesaffaan-m/ECC · MIT

Quick start

  1. 1Download and unzip. Download the frontend-slides ZIP from this page and unzip it. Confirm the folder contains SKILL.md and STYLE_PRESETS.md.
  2. 2Place the skill folder. Move it into ~/.claude/skills/ for personal use or into a project's .claude/skills/ folder.
  3. 3Or upload it in the Claude apps. In the Claude apps, go to Settings → Capabilities → Skills and upload the skill.
  4. 4Describe your presentation. Ask in plain language, giving purpose, length, and whether you have notes or a PPTX file.
  5. 5Choose a style. Pick one of the three previews the agent generates, or name a preset you already know.
  6. 6Open and check the deck. Open the generated HTML file in your browser and step through every slide with the keyboard.

What the Frontend Slides skill makes the agent do

An agent skill is a folder of instructions and optional files that an AI agent reads when a task matches the skill's description. The frontend-slides skill covers building presentations. Given a topic, rough notes, or a finished draft, the agent produces a single HTML file with inline CSS and JavaScript, so it needs no extra libraries to open.

The skill also handles PowerPoint files. If you supply a .ppt or .pptx file, the agent extracts text, images, and speaker notes, keeps the slide order, and then goes through the same style selection as a new deck.

  • Output: presentation.html or a file named after your presentation
  • Navigation: keyboard, touch/swipe, and mouse wheel
  • Motion: reveal-on-enter animations that respect reduced-motion settings
  • Layout check: every slide is designed to fit one screen with no internal scrolling

How the skill picks a visual style

If you do not know what style you want, the skill does not ask abstract design questions. It asks what feeling the deck should create (impressed, energized, focused, or inspired), then generates three single-slide preview files in a .ecc-design/slide-previews/ folder. You pick the preview you like or name the elements you want to mix.

If you already know the look you want, you can name a preset directly and skip the previews. Preset details are in the STYLE_PRESETS.md file that ships with the skill.

Install the Frontend Slides skill

Download the frontend-slides ZIP from this page and unzip it. Then choose one of the install locations below. The skill folder should contain SKILL.md, STYLE_PRESETS.md, and agents/openai.yaml.

  • Personal install: unzip into ~/.claude/skills/ so it is available in all your projects.
  • Project install: unzip into the .claude/skills/ folder of a specific project.
  • Claude apps: upload the skill under Settings → Capabilities → Skills.
~/.claude/skills/

Trigger the skill with natural requests

You do not need to type a command. The skill activates when your request matches its description, so describe what you want in plain words. Mention the purpose, approximate length, and whether you have content ready.

The skill's own guidance asks for purpose (pitch, teaching, conference talk, or internal update), length (short 5-10 slides, medium 10-20, or long 20+), and content state (finished copy, rough notes, or topic only). If you have content, paste it before the styling step.

  • "Build a 12-slide pitch deck for my note-taking app. Here are my notes: ..."
  • "Convert this quarterly-update.pptx into a web presentation I can open in a browser."
  • "I need a workshop deck on accessibility basics but I am not sure what style I want. Show me options."
  • "Improve the typography and motion of my existing slides.html."

Requirements and what the skill runs

The basic workflow needs only a web browser to view the output. PowerPoint conversion needs Python 3 with the python-pptx package. The skill is set to ask before installing python-pptx, and if it is not available the skill offers to install it or to use a manual or export-based workflow instead.

The skill runs scripts and uses the network. Browser automation tooling is optional and only used for the validation step, where the agent checks the deck at several screen sizes. Fonts may be loaded from Google Fonts or Fontshare.

  • Python 3 and python-pptx (PowerPoint conversion only)
  • A web browser to view the deck
  • Optional: browser automation for automated overflow and keyboard checks

Check the deck before you present

The skill tests the deck at 1920x1080, 1280x720, 768x1024, 375x667, and 667x375. If browser automation is available, it verifies that no slide overflows and that keyboard navigation works. You should still open the file yourself, step through every slide, and test it on the device you will present from.

At handoff the agent names the file path, the preset used, the slide count, and the theme values you can change. Temporary preview files are deleted unless you ask to keep them.

  • Open the file in a browser and step through all slides with the keyboard.
  • Check that text is readable at the screen size you will use.
  • Test touch or wheel navigation if you plan to present from a tablet or laptop trackpad.

Safety notes on scripts and network access

The skill runs scripts and uses the network, so review what the agent proposes before approving commands. Ask for a plan first if you are working with confidential slides, and keep sensitive content out of prompts you do not trust.

Because the output is a single file, you can host it or open it offline. Check any external font or asset links before you publish the deck.

  • Read any install or script command the agent asks to run.
  • Expect a prompt before python-pptx is installed.
  • Review external font links if the deck must work offline.

What people use it for

  • Turning a topic or rough notes into a talk deck for a conference or workshop.
  • Converting an existing .pptx into a lightweight HTML presentation that opens in a browser.
  • Creating a pitch deck when you are not a designer and want help choosing a style.
  • Building an internal update deck that you can host or open offline as one file.

Frequently asked questions

How do I install the frontend-slides skill?

Download the ZIP from this page and unzip it into ~/.claude/skills/ for personal use or into a project's .claude/skills/ folder. In the Claude apps you can instead upload it under Settings → Capabilities → Skills.

What do I need to use frontend-slides?

You need a web browser to view the output. For converting PowerPoint files you also need Python 3 with the python-pptx package, which the skill asks before installing. Browser automation is optional and only used for validation.

Is frontend-slides free?

The skill is released under the MIT licence, as stated on this page. The licence terms are in the source repository's licence file.

Can it convert a PowerPoint file to HTML?

Yes. Given a .ppt or .pptx file, the agent extracts text, images, and speaker notes with python-pptx where available, keeps slide order, and then applies the same style selection as a new deck.

Can I edit the slides in PowerPoint or Google Slides afterwards?

Not in a normal editor workflow. The output is hand-built HTML and CSS, so changes are made in the code rather than in PowerPoint or Google Slides. Teams that need to co-edit slides should choose a different tool.

What should I use instead of frontend-slides?

If you need to co-edit slides or match a formal brand master file, a standard slide editor is a better fit, since this skill favours custom styling and does not describe template matching. Choose a tool that matches your editing and branding needs.

New agent skills, repos and AI tools — every week

The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.

Our verdict

Frontend Slides suits non-designers who need a polished talk or pitch quickly, developers who want to turn a .pptx into a lightweight HTML deck, and anyone who wants a single file they can host or open offline. It is a poor fit for teams that co-edit in PowerPoint or Google Slides, or for decks that must match an existing corporate template or include heavy data charts.

Download the skill