Frontend Slides

A Claude Code skill for creating stunning, animation-rich HTML presentations — from scratch or by converting PowerPoint files.

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

Zero Dependencies — 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).
Production Quality — Accessible, responsive, well-commented code you can customize.

Installation

Via Plugin Marketplace (Recommended)

Install directly from Claude Code in two commands:

/plugin marketplace add zarazhangrui/frontend-slides
/plugin install frontend-slides@frontend-slides

Then use it by typing /frontend-slides in 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 all files (or clone this repo directly)
cp SKILL.md STYLE_PRESETS.md viewport-base.css html-template.md animation-patterns.md ~/.claude/skills/frontend-slides/
cp scripts/extract-pptx.py ~/.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.

Usage

Create a New Presentation

/frontend-slides

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

The skill will:

Ask about your content (slides, messages, images)
Ask about the feeling you want (impressed? excited? calm?)
Generate 3 visual style previews for you to compare
Create the full presentation in your chosen style
Open it in your browser

Convert a PowerPoint

/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

Included Styles

Dark Themes

Bold Signal — Confident, high-impact, vibrant card on dark
Electric Studio — Clean, professional, split-panel
Creative Voltage — Energetic, retro-modern, electric blue + neon
Dark Botanical — Elegant, sophisticated, warm accents

Light Themes

Notebook Tabs — Editorial, organized, paper with colorful tabs
Pastel Geometry — Friendly, approachable, vertical pills
Split Pastel — Playful, modern, two-color vertical split
Vintage Editorial — Witty, personality-driven, geometric shapes

Specialty

Neon Cyber — Futuristic, particle backgrounds, neon glow
Terminal Green — Developer-focused, hacker aesthetic
Swiss Modern — Minimal, Bauhaus-inspired, geometric
Paper & Ink — Literary, drop caps, pull quotes

Architecture

This skill uses progressive disclosure — the main SKILL.md is a concise map (~180 lines), with supporting files loaded on-demand only when needed:

GitHub에서 전체 내용 보기

frontend-slides