# 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. ### 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 ### For Claude Code Users Copy the skill files to your Claude Code skills directory: ```bash # 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. ### Manual Download 1. Download `SKILL.md` and `STYLE_PRESETS.md` from this repo 2. Place them in `~/.claude/skills/frontend-slides/` 3. Restart Claude Code ## Usage ### Create a New Presentation ``` /frontend-slides > "I want to create a pitch deck for my AI startup" ``` The skill will: 1. Ask about your content (slides, messages, images) 2. Ask about the feeling you want (impressed? excited? calm?) 3. Generate 3 visual style previews for you to compare 4. Create the full presentation in your chosen style 5. Open it in your browser ### Convert a PowerPoint ``` /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 - **Neon Cyber** — Futuristic, techy, particle effects - **Midnight Executive** — Premium, corporate, trustworthy - **Deep Space** — Cinematic, inspiring, vast - **Terminal Green** — Developer-focused, hacker aesthetic ### Light Themes - **Paper & Ink** — Editorial, literary, refined - **Swiss Modern** — Clean, Bauhaus-inspired, geometric - **Soft Pastel** — Friendly, playful, creative - **Warm Editorial** — Magazine-style, photographic ### Specialty - **Brutalist** — Raw, bold, attention-grabbing - **Gradient Wave** — Modern SaaS aesthetic ## Output Example Each presentation is a single, self-contained HTML file: ```html

Your Title

Slide Content

``` Features included: - Keyboard navigation (arrows, space) - Touch/swipe support - Mouse wheel scrolling - Progress bar - Navigation dots - Scroll-triggered animations - Responsive design - Reduced motion support ## Philosophy This skill was born from the belief that: 1. **You don't need to be a designer to make beautiful things.** You just need to react to what you see. 2. **Dependencies are debt.** A single HTML file will work in 10 years. A React project from 2019? Good luck. 3. **Generic is forgettable.** Every presentation should feel custom-crafted, not template-generated. 4. **Comments are kindness.** Code should explain itself to future-you (or anyone else who opens it). ## Files | File | Purpose | |------|---------| | `SKILL.md` | Main skill instructions for Claude Code | | `STYLE_PRESETS.md` | Reference file with 10 curated visual styles | ## Requirements - [Claude Code](https://claude.ai/claude-code) CLI - For PPT conversion: Python with `python-pptx` library ## Credits Created by [@zarazhangrui](https://github.com/zarazhangrui) with Claude Code. Inspired by the "Vibe Coding" philosophy — building beautiful things without being a traditional software engineer. ## License MIT — Use it, modify it, share it.