From an outline or PPTX to a presentation you can play in a browser
Frontend Slides
Choose a Style, Build a Web Deck
Give an AI your outline, images or existing PPTX. Compare three previews using real content, then build a 16:9 HTML deck with playback and text editing. Export a static PDF when needed.
View the original screenshotThree softly coloured cards pair each insight with an explanation on a cream background, giving a narrative presentation a clear sequence.
Template sourceThese original screenshots come from the author’s beautiful-html-templates library, which Frontend Slides references. They illustrate layout choices; the text and figures are template examples, not results generated or tested by this site.
Create and present
- Claude Code plugin
- Coding agents with repository access
- Modern browsers for playback
- GitHub stars
- 31,529
- Version
- 2.1.0
- Checked
- Categories
- Documents & Slides
Choose a direction using your actual opening slide
Start with the title, audience and first point you want to make. Compare three designs using the same material, then expand the chosen direction into the full deck. A template name alone says little about how your content will work.
Pick a task and get started
For the Claude Code plugin, send the two setup commands below as separate messages. Once installed, choose a task and attach the actual source files.
For product introductions, team talks and teaching. Bring a real title, audience, duration, key points and images, then compare visual directions using the opening slide.
Step 1: Add the Claude Code marketplace source
Send this as the first message inside Claude Code, not in a terminal. Use the full HTTPS URL, wait for completion, then send the second setup command below.
Read the author’s setup and usage guide/plugin marketplace add https://github.com/zarazhangrui/frontend-slidesStep 2: Wait for the first command, then install
After Claude Code confirms that the marketplace source was added, send the command below as a separate message. Do not combine the two setup commands. Invoke the installed plugin with /frontend-slides:frontend-slides; the task examples already include that prefix.
Read the two-step setup and other agent options/plugin install frontend-slides@frontend-slidesGive your AI this first task
These editorial examples follow the documented workflow; the results are acceptance targets, not outputs tested here. Their first line invokes the Claude Code plugin. A manually installed standalone skill uses /frontend-slides; other agents should read the repository’s SKILL.md and use the task text without the plugin command.
/frontend-slides:frontend-slides Use Frontend Slides to turn my outline, product screenshots and brand material into a 15-minute talk for a product team. Aim for 8–10 slides with one main idea per slide, designed for live speaking. Confirm the narrative and image choices first; mark missing information and do not invent figures. Create three opening-slide previews with my actual title and material: a safe preset, a bold-template-pack direction and a distinct third option. Wait for my selection before building the full deck. Split slides when content will not fit. Deliver the fixed 16:9 HTML and its assets. Check navigation, images, fonts and overflow, with screenshots at 1280×720 and one phone viewport showing uniform scaling of the whole slide. Explain how to open the deck, edit text and save the file.
Check what you receive
- Three opening-slide HTML previews using the supplied content, followed by a full deck in the chosen direction.
- The HTML and required assets, with titles, figures, references and narrative order traceable to the input.
- Desktop and phone viewport checks showing a 16:9 stage, working navigation and no overflowing text or images.
More about this skill
Frontend Slides gives a coding agent a process for making browser-based presentations. It establishes the material, audience and delivery style, then creates three opening-slide previews with real content. You choose a visual direction before the agent develops the full sequence, imagery and transitions. An existing .pptx can supply the content, and an existing HTML deck can be updated.
Each slide is authored on a fixed 1920×1080, 16:9 canvas. The whole composition scales to the browser, including on phones; it may have empty space around it and does not rearrange into a mobile article. Live talks favour fewer words and larger visuals. Reading decks can carry more detail, tables and annotations, but content that will not fit still needs another slide.
The primary deliverable is HTML with inline CSS and JavaScript. Images may live in a separate assets folder, and fonts may load from the web. Share the required files together and check local font and image availability if offline use matters. PDF export produces static slide screenshots; a public URL requires a separate deployment. Neither is an editable native PPTX.
Sources and verification
Sources checked
Checked against the current repository and v2.1.0 documentation. Images are author-published template examples; full generation, PPTX conversion and PDF export were not run here.