What Frontend Slides Does
Frontend Slides is a Claude Code skill, distributed via the Claude Code plugin marketplace, that turns a short prompt into a complete, interactive HTML presentation. Instead of selecting from a library of pre-made templates, the user gets a single self-contained HTML file with inline CSS/JS, custom typography, animations, and a layout composed for the specific content. The project has surpassed 11.8k GitHub stars and is MIT licensed.
Anti-AI-Slop Design Philosophy
The skill ships with an explicit blacklist of "AI Slop" defaults that plague AI-generated visuals:
- Fonts: Inter, Roboto, Arial
- Colors: purple-to-white gradients
- Layout: fully centered hero text, generic three-card grids, glassmorphism everywhere
.slide { height: 100vh; height: 100dvh; overflow: hidden; }- All font sizes must use
clamp(min, preferred, max) - All spacing must use viewport-relative units
- Content density limits: title pages get one title + one subtitle; content pages get 4–6 bullets or two paragraphs; feature grids cap at six cards; images are constrained to
max-height: min(50vh, 400px) - Responsive breakpoints at 700px, 600px, and 500px height
- GitHub: https://github.com/zarazhangrui/frontend-slides
- License: MIT
- Install:
/plugin marketplace add zarazhangrui/frontend-slides - Core concepts: Vibe Coding, Progressive Disclosure, Show Don't Tell, Anti-AI-Slop
In place of those defaults, it offers 12 curated visual styles with named aesthetic references:
| Style | Reference | Mood | |-------|-----------|------| | Bold Signal | Modern brand design | Confident, high-impact | | Electric Studio | Pro photography studio | Clean, high-contrast | | Creative Voltage | Retro-futurism | Energetic, neon | | Dark Botanical | Botanical illustration | Elegant, warm | | Notebook Tabs | Editorial design | Tactile, paper-like | | Pastel Geometry | Modern friendly | Approachable, soft | | Split Pastel | Flat split layouts | Playful, modern | | Vintage Editorial | Retro editorial | Witty, conversational | | Neon Cyber | Cyberpunk | Futuristic | | Terminal Green | Developer/hacker | Minimal, code-like | | Swiss Modern | Swiss/Bauhaus | Precise, geometric | | Paper & Ink | Literary editorial | Reflective, printed |
Each style defines its own font pairings, color variables, layout rules, and signature elements. The README states: "Generic is forgettable. Every presentation should feel custom-crafted, not template-generated."
"Show, Don't Tell" Workflow
Traditional design tools ask users to describe what they want in words. Most people can't articulate the difference between two styles, but they can see it. Frontend Slides inverts the workflow:
1. Claude asks about purpose, length, and content readiness in a single AskUserQuestion call. 2. The user selects moods (Impressed, Excited, Calm, Inspired—up to two). 3. Claude generates three single-page HTML previews (about 50–100 lines each) with real fonts, colors, and animation. 4. The user picks A, B, C, or a mix of elements.
Technical Architecture: Progressive Disclosure
Following OpenAI-style Harness Engineering, the skill is split across files loaded only when needed:
| File | Purpose | Loaded in | |------|---------|-----------| | SKILL.md | Core workflow and rules (~180 lines) | Always | | STYLE_PRESETS.md | The 12 visual styles | Style selection | | viewport-base.css | Mandatory responsive CSS | Generation | | html-template.md | HTML structure and JS | Generation | | animation-patterns.md | CSS/JS animation reference | Generation | | scripts/extract-pptx.py | PPT content extraction | PPTX mode | | scripts/deploy.sh | Deploy to Vercel | Sharing | | scripts/export-pdf.sh | PDF export via Playwright | Sharing |
This keeps token usage low and avoids drowning the model in 1,000 lines of CSS at once.
The Zero-Dependency Principle
Generated decks are a single HTML file with all CSS/JS inlined and zero external dependencies (Google Fonts is optional and can be base64-embedded). The project argues: "Dependencies are debt. A single HTML file will work in 10 years. A React project from 2019? Good luck."
Viewport Fitting: No Scrolling, Ever
Every slide must fit exactly within 100vh:
The docs flag a non-obvious CSS trap: function values cannot be negated with a leading minus sign. right: -clamp(...) is silently dropped. The fix is right: calc(-1 * clamp(...)).
Six-Phase Workflow
1. Mode Detection — new deck, PPTX-to-HTML conversion, or enhance existing HTML.
2. Content Discovery — purpose, length, content readiness, optional image co-design using Claude's multimodal Read.
3. Style Discovery — mood selection and three preview renders.
4. Generation — full single-file HTML with inlined assets and animations.
5. PPTX Conversion — extract text, images, and notes via extract-pptx.py, confirm with user, then re-enter style selection.
6. Sharing — deploy via Vercel or export PDF using Playwright screenshots.
Why It Matters
Frontend Slides exemplifies "Skills as Software": not an app, not a website, but a structured capability an AI agent can execute. It pairs Vibe Coding (letting non-engineers produce polished work) with a deliberate refusal to automate aesthetic decisions. The user still has to look at three options and pick. That human judgment loop is what separates it from one-click template generators and from pure AI slop.