A 14-second excerpt from the author's Frontend Slides demo, showing visual style selection and animated transitions.
Skill preview videoAbout this Skill
Frontend Slides is Zara Zhang's open-source coding-agent Skill for creating browser presentations from a brief, rough notes or an existing PowerPoint. Its core workflow separates content discovery from visual discovery: compare three real title-slide previews, pick a direction, then generate the full deck. The main output is an HTML file with inline CSS and JavaScript, with a fixed 16:9 stage, animation and browser navigation.
Why we picked it
The visual selection workflow makes it useful when you know your message but have not settled on a design. The agent shows three directions before expanding the chosen one into a deck. The repository also includes style references, PowerPoint extraction, PDF export and Vercel sharing helpers.
What it helps with
- Speakers, founders and educators turning an outline into a browser-based pitch, talk or lesson.
- People who prefer choosing from visible design options rather than describing a style in abstract terms.
- Teams adapting existing PowerPoint content into an animated HTML deck for browser viewing.
Choose the content, then the visual direction
Start with the audience, purpose, approximate slide count and source material. The Skill distinguishes speaker-led decks with fewer words from reading-first decks with more detail. It then generates three contrasting title-slide previews: a curated preset, an option from the bold template pack and a wildcard direction.
After you choose, the agent expands that direction into the full deck, loading only the relevant supporting files. The repository includes twelve curated presets and an optional bold template library. Supply your actual brand, images and copy so the previews represent your presentation.
Official repository and READMEFrontend Slides Skill instructions
Installation and invocation
For the Claude Code plugin, send the following two commands as separate messages, waiting for the marketplace command to finish before installing. Then invoke /frontend-slides:frontend-slides. The manual installation uses the standalone /frontend-slides command instead.
The official README also describes using the core Skill with Codex, Gemini CLI, OpenCode and other agents that can access files and a shell. Clone the repository or give the agent its GitHub link, ask it to read SKILL.md and keep the referenced style, CSS, template and script files available. The Claude plugin command is specific to Claude Code.
| Command | What it helps with |
|---|---|
/plugin marketplace add https://github.com/zarazhangrui/frontend-slides | Claude Code, first message: add the author's marketplace source. |
/plugin install frontend-slides@frontend-slides | Claude Code, second message: install the plugin after the first command finishes. |
git clone https://github.com/zarazhangrui/frontend-slides.git | Clone all supporting files for use with a local coding agent. |
A useful first request
Use Frontend Slides to turn these notes into an eight-slide product pitch for prospective customers. Keep it speaker-led, use our supplied logo and screenshots, and show three visual directions before building the final deck. Deliver the HTML file and any required assets, with keyboard navigation and reduced-motion support.
PowerPoint conversion, PDF export and sharing
For an existing PPTX, the extraction script reads its text, images and notes before the agent rebuilds the presentation in HTML. This is a content-and-design conversion workflow; inspect the generated deck against the source when the original uses charts, complex layouts or PowerPoint-specific effects.
The optional PDF helper captures slides as images, so animations and interactive editing do not carry into the PDF. The Vercel helper publishes a shareable website; keep required local media with the presentation folder and verify the published assets. The deck uses a fixed 16:9 stage scaled to the viewport, including phones.
| Command | What it helps with |
|---|---|
python scripts/extract-pptx.py presentation.pptx extracted | Run from the cloned repository to extract PowerPoint content; requires python-pptx. |
bash scripts/export-pdf.sh ./presentation.html ./presentation.pdf | Export a generated deck as a static PDF using the author's helper. |
bash scripts/deploy.sh ./my-deck/ | Publish a presentation folder with its assets to Vercel after configuring the account. |
Official repository and READMEFrontend Slides Skill instructions
Author demonstration and license
The video is a fourteen-second excerpt, from 00:42 to 00:56, of the author's demonstration linked in the repository README. It was resized and compressed for this listing. The still image is a user-supplied screenshot of the template gallery, showing Soft Editorial, Editorial Forest and Pin & Paper examples, resized and converted to WebP.
Frontend Slides is released under the MIT license, with copyright attributed to Zara Zhang. Keep the copyright and license notice when redistributing covered material. This catalog links to the upstream project for its source and installation.
Official repository and READMEAuthor's presentation demonstrationMIT license and attribution
Before you use it
- A local coding agent that can read files and run shell commands. The generated HTML deck needs a modern browser; custom web fonts may require network access.
- PowerPoint extraction requires Python and python-pptx. PDF export requires Node.js and Playwright; URL sharing requires Node.js and a Vercel account.
- The repository is free under the MIT license. AI services and optional hosting retain their own pricing and terms.
Supported agents
Frequently asked questions
Do I need npm to view the generated slides?
The main output runs in a browser with inline CSS and JavaScript and does not need an npm build. Optional conversion, PDF and deployment helpers have their own tool requirements; custom fonts may load from the web.
Does PDF export preserve animations?
The supplied helper creates a static PDF from slide screenshots. Use the HTML presentation to retain motion and browser interactions.
Sources & references
Original sources are linked below. Practical starting points are editorial suggestions from SkillHey.
