Frontend Slides: Create Stunning Web Presentations with AI Coding Agents

Introduction

Frontend Slides, by zarazhangrui, is a powerful skill for coding agents designed to create stunning HTML presentations directly on the web. It allows users, even those without design or coding expertise, to generate beautiful, dependency-free slideshows from scratch or by converting PowerPoint files.

This project stands out by offering a 'show, don't tell' approach to design, letting you choose from visual previews rather than describing aesthetics. It's packaged as a Claude Code plugin, but its core skill can be utilized by various other coding agents.

Watch the official walkthrough and tutorial video for a comprehensive guide: Watch on YouTube

Installation

Frontend Slides offers flexible installation methods to integrate with your preferred coding agent.

Via Claude Code Custom Marketplace Source

Install directly from this public GitHub repo. Run these as two separate Claude Code messages; do not paste both lines into the prompt at once.

/plugin marketplace add https://github.com/zarazhangrui/frontend-slides

After that finishes, run:

/plugin install frontend-slides@frontend-slides

Use the HTTPS URL. The shorter zarazhangrui/frontend-slides form may make Claude Code try SSH, which can fail if GitHub is not already in your known_hosts file.

Then use it by typing /frontend-slides:frontend-slides in Claude Code. Claude Code namespaces plugin-installed skills as /plugin-name:skill-name.

Claude Code Manual Installation

Copy the skill files to your Claude Code skills directory:

# Create the skill directory
mkdir -p ~/.claude/skills/frontend-slides/scripts

# Copy the user-facing skill files
cp SKILL.md STYLE_PRESETS.md viewport-base.css html-template.md animation-patterns.md ~/.claude/skills/frontend-slides/
cp -R bold-template-pack ~/.claude/skills/frontend-slides/
cp scripts/extract-pptx.py scripts/deploy.sh scripts/export-pdf.sh ~/.claude/skills/frontend-slides/scripts/

Or clone directly:

git clone https://github.com/zarazhangrui/frontend-slides.git ~/.claude/skills/frontend-slides

Then use it by typing /frontend-slides in Claude Code. Standalone skills are not namespaced.

Other Coding Agents

Agents such as Codex, Kimi Code, OpenCode, Gemini CLI, or other local coding assistants can use the same core skill. The simplest path is to send the agent this GitHub repo link and ask it to use the Frontend Slides skill:

https://github.com/zarazhangrui/frontend-slides

If the agent can read GitHub repos or browse files, it should start from SKILL.md and load only the referenced support files it needs.

Usage Examples

Here's how to get started creating and converting presentations with Frontend Slides.

Create a New Presentation

/frontend-slides:frontend-slides

> "I want to create a pitch deck for my AI startup"

If installed manually as a standalone Claude Code skill, use /frontend-slides instead.

In non-Claude agents, ask the agent to use the Frontend Slides skill and point it at this repo or SKILL.md.

The skill will:

Ask about your content (slides, messages, images)
Generate 3 visual style previews for you to compare, inferring the vibe from your brief unless you already named one
Let you pick the visual direction
Create the full presentation in your chosen style
Open it in your browser

Convert a PowerPoint

/frontend-slides:frontend-slides

> "Convert my presentation.pptx to a web slideshow"

The skill will:

Extract all text, images, and notes from your PPT
Show you the extracted content for confirmation
Let you pick a visual style
Generate an HTML presentation with all your original assets

Why Use Frontend Slides?

Frontend Slides is built on a strong philosophy focused on accessibility, longevity, and unique design, offering several compelling features.

Philosophy

You don't need to be a designer to make beautiful things. You just need to react to what you see.
Dependencies are debt. A single HTML file will work in 10 years. A React project from 2019? Good luck.
Generic is forgettable. Every presentation should feel custom-crafted, not template-generated.
Comments are kindness. Code should explain itself to future-you (or anyone else who opens it).

Key Features

Zero Dependencies: Generates single HTML files with inline CSS/JS. No npm, no build tools, no frameworks.
Visual Style Discovery: Can't articulate design preferences? No problem. Pick from generated visual previews.
PPT Conversion: Convert existing PowerPoint files to web, preserving all images and content.
Anti-AI-Slop: Curated distinctive styles that avoid generic AI aesthetics (bye-bye, purple gradients on white).
Bold Template Pack: Optional design-forward templates from beautiful-html-templates, loaded progressively so safe presets still work as the default fallback.
Production Quality: Accessible, fixed 16:9, well-commented code you can customize.

Included Styles & Template Gallery

The skill includes a wide array of pre-defined styles, categorized into Dark Themes, Light Themes, and Specialty themes, such as 'Bold Signal', 'Electric Studio', 'Notebook Tabs', and 'Neon Cyber'. Additionally, it integrates with the beautiful-html-templates library, offering 34 optional bold design systems like 'Neo-Grid Bold', 'Editorial Tri-Tone', and 'Vellum', ensuring a diverse and high-quality aesthetic selection.

Sharing Your Presentations

After creating a presentation, the skill offers two convenient ways to share it:

Deploy to a Live URL

One command deploys your slides to a permanent, shareable URL that works on any device, phones, tablets, laptops:

bash scripts/deploy.sh ./my-deck/
# or
bash scripts/deploy.sh ./presentation.html

Uses Vercel (free tier). The skill walks you through signup and login if it's your first time.

Export to PDF

Convert your slides to a PDF for email, Slack, Notion, or printing:

bash scripts/export-pdf.sh ./my-deck/index.html
bash scripts/export-pdf.sh ./presentation.html ./output.pdf

Uses Playwright to screenshot each slide at 1920×1080 and combine into a PDF. Installs automatically if needed. Animations are not preserved (it's a static snapshot).