frontend-slides README

The project's README from github.com/zarazhangrui/frontend-slides. As one markdown file: README.md.

Frontend Slides

A coding-agent skill for creating stunning HTML presentations — from scratch or by converting PowerPoint files. It is packaged as a Claude Code plugin, and the core SKILL.md can also be read by other coding agents with filesystem and shell access.

📺 Watch the Walkthrough & Tutorial

New here? This beginner-friendly video walks you through the whole thing, start to finish.

Watch the Frontend Slides walkthrough and tutorial on YouTube

▶️ Watch on YouTube → (beginner-friendly walkthrough and tutorial)

What This Does

Frontend Slides helps non-designers create beautiful web presentations without knowing CSS or JavaScript. It uses a "show, don't tell" approach: instead of asking you to describe your aesthetic preferences in words, it generates visual previews and lets you pick what you like.

Here is a deck about the skill, made through the skill:

https://github.com/user-attachments/assets/ef57333e-f879-432a-afb9-180388982478

Key Features

Installation

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:

Some agents can also install the skill for you if they have filesystem access and a known local skills directory. If not, they can still follow SKILL.md directly for the current session.

The Claude Code plugin gives Claude Code a custom marketplace-source install flow and /frontend-slides:frontend-slides command. Other agents usually do not use that command surface.

Usage

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:

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

Convert a PowerPoint

/frontend-slides:frontend-slides

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

The skill will:

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

Included Styles

Dark Themes

Light Themes

Specialty

Bold Template Pack

The skill also includes 34 optional bold design systems from beautiful-html-templates, such as Neo-Grid Bold, Editorial Tri-Tone, Creative Mode, Broadside, Signal, and Vellum.

During style discovery, the preview set is:

The agent reads the compact bold template index first, then loads only the shortlisted candidates' small preview.md cards for title-slide previews. It loads the full design.md for exactly one bold template only after the user picks that template for the final deck. If the user picks a custom wildcard, the agent expands that preview's own CSS and layout system into the full deck.

Frontend Slides can now draw from the 34 bold design systems in beautiful-html-templates. Three screenshots per template show how each visual system handles different slide layouts. Click any template name to inspect the source template library.

Soft Editorial

Soft Editorial — slide 4 Soft Editorial — slide 6 Soft Editorial — slide 10

Cormorant Garamond serif on warm paper with sage, blush, and lemon accents.

Editorial Forest

Editorial Forest — slide 1 Editorial Forest — slide 2 Editorial Forest — slide 5

Forest green, dusty pink, and warm cream in Source Serif 4 — quiet, intentional quarterly-review aesthetic.

Pin & Paper

Pin & Paper — slide 1 Pin & Paper — slide 11 Pin & Paper — slide 3

Yellow paper with safety-pin illustrations, ink-blue handwritten Caveat, paper-grain texture.

Sakura Chroma

Sakura Chroma — slide 1 Sakura Chroma — slide 3 Sakura Chroma — slide 4

Vintage Japanese cassette-package aesthetic: cream paper, diagonal rainbow ribbons, condensed bold type, JIS-style spec checkboxes.

Stencil & Tablet

Stencil & Tablet — slide 1 Stencil & Tablet — slide 3 Stencil & Tablet — slide 8

Bone paper with stencil-cut headlines and a six-color earth palette: archaeology meets brand.

Cobalt Grid

Cobalt Grid — slide 1 Cobalt Grid — slide 3 Cobalt Grid — slide 5

Electric cobalt italic serifs on a graph-paper canvas, anchored by stair-stepped pixel-glitch decorations and slim hairline rules.

Vellum

Vellum — slide 1 Vellum — slide 4 Vellum — slide 8

Deep navy canvas with warm-yellow italic Cormorant serifs and a single dusty teal accent. A quiet, scholarly aesthetic.

Emerald Editorial

Emerald Editorial — slide 1 Emerald Editorial — slide 3 Emerald Editorial — slide 6

Magazine-cover business deck: emerald + navy + paper with double-rule masthead ornaments and a heavy Bodoni-style display serif.

Neo-Grid Bold

Neo-Grid Bold — slide 1 Neo-Grid Bold — slide 3 Neo-Grid Bold — slide 8

Editorial neo-brutalism with a single neon yellow accent on off-white paper.

Editorial Tri-Tone

Editorial Tri-Tone — slide 1 Editorial Tri-Tone — slide 4 Editorial Tri-Tone — slide 3

Three-color editorial system: dusty pink, mustard cream, and deep burgundy, set in Bricolage + Instrument Serif.

Creative Mode

Creative Mode — slide 1 Creative Mode — slide 4 Creative Mode — slide 6

Cream paper canvas with confident multi-color (green, pink, orange, yellow) accents and Archivo Black display.

Monochrome

Monochrome — slide 1 Monochrome — slide 4 Monochrome — slide 12

Ivory ledger paper with all-black type; Lora serif headlines, Jost body, no color at all.

People's Platform (Block & Bold)

People's Platform (Block & Bold) — slide 1 People's Platform (Block & Bold) — slide 4 People's Platform (Block & Bold) — slide 8

Activist poster energy: blue, orange, red on cream, with Alfa Slab + Caveat Brush.

Pink Script — After Hours

Pink Script — After Hours — slide 1 Pink Script — After Hours — slide 4 Pink Script — After Hours — slide 8

Black canvas, hot pink accent, pearl-cream paper, Instrument Serif headlines: late-night editorial luxury.

8-Bit Orbit

8-Bit Orbit — slide 1 8-Bit Orbit — slide 6 8-Bit Orbit — slide 5

Pixel-art neon arcade aesthetic on a deep navy void.

BlockFrame

BlockFrame — slide 1 BlockFrame — slide 4 BlockFrame — slide 8

Neobrutalist deck with pastel-neon color blocks and chunky black borders.

Blue Professional

Blue Professional — slide 1 Blue Professional — slide 6

frontend-slides (zarazhangrui/frontend-slides)

Searching Database…

30.9K ·GitHub
Frontend-slides
What is this?Frontend Slides is a coding-agent skill that creates beautiful HTML presentations — from scratch or by converting existing PowerPoint files. It ships as a Claude Code plugin, and its core SKILL.md works with other coding agents too.
Is this an app I install, or something my coding agent uses?Neither app nor library: it is a set of instruction and style files (SKILL.md plus CSS and template references) that your coding agent reads and follows to generate the slides for you. The Claude Code packaging is a plugin; other agents just read SKILL.md directly.
How do I install it in Claude Code?Either install it from this GitHub repo as a marketplace source (paste the two commands as separate Claude Code messages) and then invoke /frontend-slides:frontend-slides, or copy or clone the skill files into your Claude Code skills directory for a standalone /frontend-slides command.
Do I need npm, Node, or any build tools for the slides?No — decks come out as single HTML files with inline CSS/JS: no npm, no build tools, no frameworks. For non-Claude agents the only real requirement is an agent with filesystem and shell access.
Are there any install gotchas?Yes: use the full HTTPS URL of the repo, because the short zarazhangrui/frontend-slides form can make Claude Code try SSH, which fails when GitHub is not yet in your known_hosts. Also send the two install commands as separate messages instead of pasting them together.
I am not a designer — how do I choose what the deck looks like?You never have to describe your taste in words: the skill generates 3 visual style previews to compare, inferring the vibe from your brief, then builds the full deck in whichever direction you pick and opens it in your browser.
Does it work with coding agents other than Claude Code?Yes — Codex, Kimi Code, OpenCode, Gemini CLI and other local coding assistants can use the same core skill. The simplest path is sending the agent this repo link and asking it to start from SKILL.md; those agents just do not get the /frontend-slides command surface.
Will it convert my existing PowerPoint files?Yes. It extracts all text, images, and notes from your PPT, shows you the extracted content for confirmation, lets you pick a visual style, and generates an HTML presentation that keeps all your original assets.
How many ready-made styles does it include?Twelve curated presets across dark, light, and specialty themes (like Terminal Green and Swiss Modern), plus an optional Bold Template Pack with 34 design systems such as Neo-Grid Bold, Editorial Tri-Tone, and Vellum.
What is the Anti-AI-Slop feature about?The built-in styles are curated to avoid generic AI aesthetics — in the author's words, bye-bye purple gradients on white. Style discovery always mixes one safe preset, at least one bold template, and a wildcard option.
What do the generated slides look like under the hood?One accessible, fixed 16:9 HTML file with well-commented code you can customize yourself.
What are similar projects?ppt-master, dashi-ppt-skill, visual-explainer, codex-ppt-skill, baoyu-design, html-anything, Kami, remark
Which topics is it in?powerpoint, generative-ui, pptx, slides, skill-md, templates, presentation, vibe-coding, claude-skill, no-dependencies, accessibility, css
Creator
zarazhangrui
Size
0.6 MB
Stars
30.9K
Updated
CommitJun 23Releasev2.1.0May 26
Age
8mo
Commits · 90 Days