Agent skill guide

frontend-slides to PowerPoint: export a static PPTX

Explore visual directions before building an HTML presentation in your coding agent.

Skill by Zara Zhang · Guide by SlideBeaverClaude Code · other local coding agentsUpdated Source reviewed
Official GitHub project

Choose the right workflow

This skill starts with visual choices, then builds the presentation in the selected direction. For a PowerPoint handoff, add an explicit request for visible, static slide content. Keep the original HTML for browser presentation and inspect a separate export copy in SlideBeaver.

Comparing visual directionsTalks and pitch decksAgent-driven HTML creation

What to provide

[TOPIC]
Presentation subjectExample: Our next product release
[AUDIENCE]
Audience and purposeExample: Customer success team; explain three changes
[NOTES]
Verified content and available assetsExample: Release notes and approved screenshots

Output: An HTML deck produced in your coding agent; the exact structure depends on the chosen style.

SlideBeaver handoff request

Replace the bracketed fields with your own brief and source material.

This is our request for a static handoff copy. Install the original Skill from its official project before using it.

Setup and use

  1. 01Add the Claude Code marketplace

    Run this inside Claude Code as its own message.

    /plugin marketplace add https://github.com/zarazhangrui/frontend-slides
  2. 02Install the plugin

    After the first command finishes, send this as a separate message.

    /plugin install frontend-slides@frontend-slides
  3. 03Invoke and choose a direction

    Use /frontend-slides:frontend-slides in Claude Code, then provide your brief. For other agents, follow the official README and point the agent to SKILL.md and its support files.

  4. 04Prepare the handoff

    Ask for an export copy with visible slide sections and inline styles. Save the .html file, upload it to SlideBeaver on desktop, and check every slide before exporting.

From frontend-slides HTML to static PowerPoint

The browser presentation and the PowerPoint handoff solve different delivery needs. Keep the interactive original for presenting on the web. Make a second HTML file whose final content is visible without a presentation runtime, then use that copy for conversion. A style that looks good in the browser still needs an output check.

1. Give the agent a concrete brief

For a team update, supply the audience, the decision you want, a slide count, verified figures, and approved screenshots. Separate evidence from an idea you have not tested. Ask the agent to show visual directions before it builds the full deck, then choose one direction and review the actual words and layout. If a figure is missing, leave it marked for review instead of accepting an invented value.

When using Claude Code, the marketplace and installation commands above belong in separate messages. In another coding agent, point it to the official repository and its Skill documentation. SlideBeaver does not install the Skill, run the agent, or connect to your AI account.

2. Save a complete static handoff

Use the request above to produce a second file, such as presentation-static.html. Ask for top-level slide sections, a consistent 16:9 canvas, inline CSS, and ordinary text rather than screenshots of text. Required images should be embedded or otherwise loadable. Keep the original file under a different name so a conversion repair does not replace its interactions.

Open the saved file and inspect every slide before uploading. Text must already be present and visible; removing a script is not enough if CSS still hides inactive slides. Replace a runtime chart with its final static representation. If a font or image points to a separate local file, include the actual asset or ask for an embedded copy. Do not let a file that only works in the agent’s development server become the final handoff.

3. Practice the import and repair steps

Use our original two-slide typography exercise to inspect the handoff format. Its first title is deliberately too large, and its second slide lets you compare fonts. This is a SlideBeaver practice file, not a deck generated by frontend-slides and not a certification of that Skill’s output.

Save any current editor work first, because uploading replaces the open deck. Upload the practice file on desktop, confirm that two slides appear, and select the title on slide 1. Change its Size (px) from 88 to 52, then inspect the full title and the text beneath it. On slide 2, choose Sans serif for the heading and check its line breaks. The worked troubleshooting guide shows the actual controls and before/after views.

4. Inspect the file you will deliver

Export HTML to keep the repaired source, reopen it, and check that both slides still show the edits. Export PPTX for your presentation app, then inspect the slide count, order, images, title, and line breaks. The export is static: supported text boxes and basic shapes may remain editable, while some visuals become images. Scripts and animations are excluded, and fonts are not embedded.

Click inside a text box in your destination app, change a word, save, and reopen the PPTX. Selecting a picture does not make text inside that picture editable. Check the file on the computer that will present it, especially when fonts change. Our downloadable example has browser and LibreOffice preview evidence; Microsoft PowerPoint editing and save/reopen acceptance remain for you to verify in your target app.

If your own generated deck loses content or formatting, return to its source and request a more explicit static copy before repeating the import. Do not infer compatibility from the Skill name, the selected style, or a successful download alone.

Before you import into SlideBeaver

  • Source documentation reviewed; generated decks have not been compatibility-tested here. A style's browser preview is not proof of its PPTX output.
  • Reveal effects and active-slide rules can hide content after scripts are removed. Request an always-visible static handoff copy before importing.
  • Inspect fonts, clipping, and images in the exported PPTX. Keep the original HTML when you need its browser interactions.

Official source

Skill created by Zara Zhang. Installation instructions were checked against the official documentation on October 6, 2026. This is an independent SlideBeaver guide.

Have your HTML file ready?

Open the editor on desktop, upload your deck, and polish it before export.

Open HTML slide editor
← Browse all skills

Privacy Settings

Usage analytics are on. They are enabled by default and can be turned off here. Editing and export remain available either way. Changing this setting applies to this browser.

Read our Privacy Policy