frontend-slideslisted

Create stunning, animation-rich HTML presentations from scratch or by converting PowerPoint files. Use when the user wants to build a presentation, convert a PPT/PPTX to web, or create slides for a talk/pitch. Helps non-designers discover their aesthetic through visual exploration rather than abstract choices.
dreamid27/frontend-slides · ★ 3 · Web & Frontend · score 76

Install: claude install-skill dreamid27/frontend-slides

# Frontend Slides Create animation-rich, Tailwind-styled HTML presentations that run entirely in the browser. ## Core Principles 1. **Single file, no build step** — One self-contained HTML file. Tailwind via CDN script, fonts via Google Fonts/Fontshare. No npm, no build tools. 2. **Tailwind for all styling** — Utility classes in markup. Raw CSS only in the three sanctioned blocks (see Styling Conventions). 3. **Show, don't tell** — Generate visual previews; users discover taste by seeing options, not describing them. 4. **Distinctive design** — No generic "AI slop." Every deck must feel custom-crafted. 5. **Progressive disclosure** — Read lightweight style indexes first; load a full `design.md` only after the user picks that template. 6. **Fixed 16:9 stage (NON-NEGOTIABLE)** — Slides are authored at 1920×1080 and the stage scales as a whole to the viewport; never reflow content per device. ## Styling Conventions (Tailwind) Every deck and preview uses the same architecture: - Load Tailwind in `<head>`: `<script src="https://cdn.tailwindcss.com"></script>`. - Declare design tokens in an inline `tailwind.config` block — colors and fontFamily map to CSS variables or literal values (see [html-template.md](html-template.md)). - Style everything with utilities in markup: layout, spacing, typography, color, borders, effects. - Use arbitrary values for stage-pixel geometry: `left-[96px]`, `text-[168px]`, `tracking-[0.18em]`, `max-w-[1360px]`. - Raw CSS lives in exactly three lab