# Frontend Slides
> 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.
- Skill: `dreamid27/frontend-slides` (Agent Skill, multi-file: 12 files)
- Install (CLI): `npx skillmds@latest add dreamid27/frontend-slides`
- Raw SKILL.md: https://api.skillmd.com/api/skills/dreamid27/frontend-slides/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: dreamid27 (https://skillmd.com/u/dreamid27)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/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 ``: ``.
- 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 labeled `