zarazhangrui / frontend-slides

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 For Claude Code Users Copy the skill files to your Claude Code skills directory: Or clone directly: Then use it by typing in Claude Code. Usage Create a New Presentation 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 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 is a concise map (~180 lines), with supporting files loaded on-demand only when needed: | File | Purpose | Loaded When | |------|---------|-------------| | | Core workflow and rules | Always (skill invocation) | | | 12 curated visual presets | Phase 2 (style selection) | | | Mandatory responsive CSS | Phase 3 (generation) | | | HTML structure and JS features | Phase 3 (generation) | | | CSS/JS animation reference | Phase 3 (generation) | | | PPT content extraction | Phase 4 (conversion) | This design follows OpenAI's harness engineering principle: "give the agent a map, not a 1,000-page instruction manual." Philosophy 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). Requirements • Claude Code CLI • For PPT conversion: Python with library Credits Created by @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.