A Claude Code skill for creating stunning, animation-rich HTML presentations — from scratch or by converting PowerPoint files.
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.
- 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.
Copy the skill files to your Claude Code skills directory:
# Create the skill directory
mkdir -p ~/.claude/skills/frontend-slides
# Copy the files (or download from this repo)
cp SKILL.md ~/.claude/skills/frontend-slides/
cp STYLE_PRESETS.md ~/.claude/skills/frontend-slides/Then use it by typing /frontend-slides in Claude Code.
- Download
SKILL.mdandSTYLE_PRESETS.mdfrom this repo - Place them in
~/.claude/skills/frontend-slides/ - Restart Claude Code
/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
/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
- Neon Cyber — Futuristic, techy, particle effects
- Midnight Executive — Premium, corporate, trustworthy
- Deep Space — Cinematic, inspiring, vast
- Terminal Green — Developer-focused, hacker aesthetic
- Paper & Ink — Editorial, literary, refined
- Swiss Modern — Clean, Bauhaus-inspired, geometric
- Soft Pastel — Friendly, playful, creative
- Warm Editorial — Magazine-style, photographic
- Brutalist — Raw, bold, attention-grabbing
- Gradient Wave — Modern SaaS aesthetic
Each presentation is a single, self-contained HTML file:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Fonts, CSS variables, all styles inline -->
</head>
<body>
<section class="slide title-slide">
<h1 class="reveal">Your Title</h1>
</section>
<section class="slide">
<h2 class="reveal">Slide Content</h2>
</section>
<!-- Navigation: Arrow keys, scroll, swipe, or click dots -->
<script>
// SlidePresentation controller, animations, interactions
</script>
</body>
</html>Features included:
- Keyboard navigation (arrows, space)
- Touch/swipe support
- Mouse wheel scrolling
- Progress bar
- Navigation dots
- Scroll-triggered animations
- Responsive design
- Reduced motion support
This skill was born from the belief that:
-
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).
| File | Purpose |
|---|---|
SKILL.md |
Main skill instructions for Claude Code |
STYLE_PRESETS.md |
Reference file with 10 curated visual styles |
- Claude Code CLI
- For PPT conversion: Python with
python-pptxlibrary
Created by @zarazhangrui with Claude Code.
Inspired by the "Vibe Coding" philosophy — building beautiful things without being a traditional software engineer.
MIT — Use it, modify it, share it.