How to use Frontend Slides: make HTML presentations with a coding agent

What you need before you install Frontend Slides

Frontend Slides is built to run inside a coding agent. The README names Claude Code, and says other agents such as Codex, Kimi Code, OpenCode and Gemini CLI can use the same core skill. The agent needs filesystem and shell access.

You do not need to write CSS or JavaScript yourself. The output is a set of single HTML files with inline CSS and JavaScript, with no npm or build tools.

• A coding agent with filesystem and shell access, such as Claude Code
• Access to the GitHub repository so the agent can read it or you can clone it

Install Frontend Slides as a Claude Code plugin

The plugin route uses two separate Claude Code messages. Do not paste both lines into the prompt at once. Use the HTTPS URL, because the shorter form may make Claude Code try SSH, which can fail if GitHub is not in your known_hosts file.

• Run the marketplace command first
• After it finishes, run the plugin install command in a new message
• Use the skill by typing /frontend-slides:frontend-slides

Install Frontend Slides manually as a standalone skill

You can copy the skill files into your Claude Code skills folder, or clone the repository directly into it. A standalone skill is not namespaced, so you call it with /frontend-slides instead of the plugin form.

• The manual copy creates ~/.claude/skills/frontend-slides/scripts and copies SKILL.md, STYLE_PRESETS.md, viewport-base.css, html-template.md, animation-patterns.md, the bold-template-pack folder and three scripts
• The clone option places the whole repository in ~/.claude/skills/frontend-slides

Create a new presentation from a chat

Start the skill and describe what you want. The README's example is a pitch deck for an AI startup. The skill then asks about your content, including slides, messages and images.

It generates three visual style previews so you can compare them. It infers the vibe from your brief unless you already named a style. You pick a direction, the full deck is created in that style, and the result is opened in your browser.

• The skill asks about your content (slides, messages, images)
• It generates 3 visual style previews to compare
• You choose the visual direction
• It creates the full presentation and opens it in your browser

Convert an existing PowerPoint file to a web slideshow

If you already have a .pptx file, you can ask the skill to convert it. According to the README, it extracts text, images and notes from the file, then shows you the extracted content so you can confirm it before you choose a style.

The output is an HTML presentation that keeps your original assets.

• Extracts all text, images and notes from the PowerPoint file
• Shows the extracted content for confirmation
• Lets you pick a visual style
• Generates an HTML presentation with your original assets

Choose a style and understand the bundled templates

The README lists 12 included styles in three groups: dark themes, light themes and specialty. Examples include Bold Signal, Notebook Tabs, Swiss Modern and Terminal Green. Each style has a short description, such as Swiss Modern being minimal and Bauhaus-inspired.

The skill also includes 34 optional bold design systems from beautiful-html-templates, such as Neo-Grid Bold and Broadside. During style discovery, the preview set includes one safe preset, at least one bold template option and one wildcard option. The agent loads the full design file for a bold template only after you pick it for the final deck.

• Dark themes: Bold Signal, Electric Studio, Creative Voltage, Dark Botanical
• Light themes: Notebook Tabs, Pastel Geometry, Split Pastel, Vintage Editorial
• Specialty: Neon Cyber, Terminal Green, Swiss Modern, Paper & Ink