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 tells a coding-capable AI agent how to build an animation-rich presentation as a single HTML file, or convert an existing PowerPoint file into a web deck. This guide explains what an agent skill is, how to install this one, how to ask for a deck in plain language, and what to watch out for. By the end you will be able to produce a slide deck you can open in any web browser.
Frontend Slideszarazhangrui/frontend-slides · MIT Download the skill Quick start
- 1Download the ZIP. Get the frontend-slides ZIP from this page. It contains SKILL.md and its supporting reference files.
- 2Place the skill folder. Unzip it into ~/.claude/skills/ for personal use, or into your project's .claude/skills/ folder for one project.
- 3Or upload it in the Claude apps. In the Claude apps, open Settings, go to Capabilities, then Skills, and upload the skill.
- 4Describe your presentation. Ask in plain language for a presentation, a talk or pitch deck, or a PPTX conversion, and name your file if you have one.
- 5Answer the discovery questions. Give the purpose, approximate length, content status and density so the agent can plan the deck.
- 6Pick a visual style. Review the style previews the agent generates and choose the look you prefer.
- 7Open and check the HTML. Open the generated file in a browser and check the slides on your screen size.
What is an agent skill and what does Frontend Slides make the agent do?
An agent skill is a folder containing a SKILL.md file of instructions that a compatible AI agent loads when a request matches the skill's description. Frontend Slides is one such skill. Its description says it should be used when someone wants to build a presentation, convert a PPT/PPTX to web, or create slides for a talk or pitch.
When the skill is active, the agent creates a presentation as a single self-contained HTML file with inline CSS and JavaScript and no build tools or npm dependencies. The file runs in any web browser, so there is no presentation software to install. Slides are designed on a fixed 1920×1080 (16:9) canvas that scales to fit the window rather than reflowing for phones.
The skill pushes the agent away from generic templates and toward distinctive fonts, colors and animations. It also helps people who are not designers choose a visual style by generating visual previews first, so you pick what you see rather than an abstract setting.
Install the Frontend Slides skill
Download the ZIP for the skill from this page. It contains the files SKILL.md, README.md, html-template.md, animation-patterns.md, STYLE_PRESETS.md and viewport-base.css. Unzip it so the frontend-slides folder sits in the skills location your agent reads from.
For a personal install, unzip it into ~/.claude/skills/. To make it available only inside one project, unzip it into that project's .claude/skills/ folder instead.
If you use the Claude apps rather than a coding setup, you can upload the skill instead. Open Settings, go to Capabilities, then Skills, and upload it there.
- Personal install: ~/.claude/skills/
- Project install: .claude/skills/ inside your project folder
- Claude apps: Settings → Capabilities → Skills
Trigger the skill with a natural request
You do not need a special command. Describe what you want in ordinary language and mention a presentation, slides, a talk or a pitch. The skill's description lists the situations it covers, so requests like these are the ones it is written to catch.
If you have a PowerPoint file, say so and name it. The skill covers converting a PPT or PPTX to a web deck, and it needs the .pptx file itself.
- Build a 10-slide pitch deck for a seed round for my app.
- Create a talk on remote teams for a conference, low density and speaker-led.
- Convert my quarterly-review.pptx into an HTML presentation I can host.
Work through the discovery questions
For a new presentation, the skill asks you a set of questions together so you can answer them all at once. They cover the purpose (pitch deck, teaching or tutorial, conference talk or internal presentation), the approximate length (short 5-10, medium 10-20, or long 20+ slides), whether your content is ready, and the density.
Density matters. Choose low density / speaker-led for public talks with one idea per slide and large type, or high density / reading-first for handouts and async review with more detail per slide. The skill does not ask about inline editing up front; it includes editing by default in the draft unless you ask for a locked, export-only file.
Review the output and convert a PowerPoint file
Open the generated HTML file in a browser to review it. Because the stage scales to the window, check it on a laptop-sized screen and, if you plan to show it on a phone, check that too. The skill's own rules say to verify screenshots at 1280×720 plus one phone viewport after changes.
To convert an existing deck, provide the source .pptx file. The skill then rebuilds it as a web presentation. If you want to add images or text to a deck you already have, ask the agent to enhance it; the skill will split slides that would overflow and tell you when it does.
- Open the HTML file directly in any modern browser.
- Ask for a split if a slide gets too crowded.
- Keep your original .pptx so you can convert again if needed.
What people use it for
- Building a pitch deck for a startup that is shown on a laptop at a meeting.
- Turning an existing .pptx into a web-hosted deck that a developer can publish as a plain web page.
- Creating a teaching or tutorial deck that is shared as an HTML link.
- Making a conference talk with one idea per slide and large type.
- Producing a self-contained HTML deck to embed in another web page.
Frequently asked questions
Is the Frontend Slides skill free?
The skill is published under the MIT licence, as stated on this page. The licence terms govern how you may use and share it. Check your agent platform separately for its own pricing.
What do I need to use Frontend Slides?
You need a coding-capable AI agent that can write and save HTML files, and a web browser to view the result. If you convert a PowerPoint file, you also need the source .pptx file.
Does Frontend Slides run scripts or use the network?
According to this page, the skill does not run scripts and does not use the network. The output is a single HTML file that runs in the browser with no software to install.
Can I edit the presentation in PowerPoint or Google Slides?
Not directly. The output is HTML code, so it is not a good fit if non-technical colleagues need to edit the deck in PowerPoint or Google Slides later.
Will the slides work on a phone?
The slides keep a fixed 16:9 size on every screen and scale as a whole, rather than reflowing into a phone layout. This is intentional, so decks that need phone-friendly reflowing are not a good match.
What should I use instead if I need an editable slide file?
If you need a file that colleagues can edit in PowerPoint or Google Slides, use those tools directly. Frontend Slides is better suited to animated decks you host or embed as a web page.
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 want a polished, animated talk or pitch deck, developers who want to host a presentation as a plain web page, and anyone converting an existing .pptx into the web. It is a poor choice if the deck must be edited later by people working in PowerPoint or Google Slides, or if it must reflow neatly on phones.
Download the skill