Frontend Slides

1---2name: frontend-slides3description: 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.4origin: ECC5---6 7# Frontend Slides8 9Create zero-dependency, animation-rich HTML presentations that run entirely in the browser.10 11Inspired by the visual exploration approach showcased in work by zarazhangrui (credit: @zarazhangrui).12 13## When to Activate14 15- Creating a talk deck, pitch deck, workshop deck, or internal presentation16- Converting `.ppt` or `.pptx` slides into an HTML presentation17- Improving an existing HTML presentation's layout, motion, or typography18- Exploring presentation styles with a user who does not know their design preference yet19 20## Non-Negotiables21 221. **Zero dependencies**: default to one self-contained HTML file with inline CSS and JS.232. **Viewport fit is mandatory**: every slide must fit inside one viewport with no internal scrolling.243. **Show, don't tell**: use visual previews instead of abstract style questionnaires.254. **Distinctive design**: avoid generic purple-gradient, Inter-on-white, template-looking decks.265. **Production quality**: keep code commented, accessible, responsive, and performant.27 28Before generating, read `STYLE_PRESETS.md` for the viewport-safe CSS base, density limits, preset catalog, and CSS gotchas.29 30## Workflow31 32### 1. Detect Mode33 34Choose one path:35- **New presentation**: user has a topic, notes, or full draft36- **PPT conversion**: user has `.ppt` or `.pptx`37- **Enhancement**: user already has HTML slides and wants improvements38 39### 2. Discover Content40 41Ask only the minimum needed:42- purpose: pitch, teaching, conference talk, internal update43- length: short (5-10), medium (10-20), long (20+)44- content state: finished copy, rough notes, topic only45 46If the user has content, ask them to paste it before styling.47 48### 3. Discover Style49 50Default to visual exploration.51 52If the user already knows the desired preset, skip previews and use it directly.53 54Otherwise:551. Ask what feeling the deck should create: impressed, energized, focused, inspired.562. Generate **3 single-slide preview files** in `.ecc-design/slide-previews/`.573. Each preview must be self-contained, show typography/color/motion clearly, and stay under roughly 100 lines of slide content.584. Ask the user which preview to keep or what elements to mix.59 60Use the preset guide in `STYLE_PRESETS.md` when mapping mood to style.61 62### 4. Build the Presentation63 64Output either:65- `presentation.html`66- `[presentation-name].html`67 68Use an `assets/` folder only when the deck contains extracted or user-supplied images.69 70Required structure:71- semantic slide sections72- a viewport-safe CSS base from `STYLE_PRESETS.md`73- CSS custom properties for theme values74- a presentation controller class for keyboard, wheel, and touch navigation75- Intersection Observer for reveal animations76- reduced-motion support77 78### 5. Enforce Viewport Fit79 80Treat this as a hard gate.81 82Rules:83- every `.slide` must use `height: 100vh; height: 100dvh; overflow: hidden;`84- all type and spacing must scale with `clamp()`85- when content does not fit, split into multiple slides86- never solve overflow by shrinking text below readable sizes87- never allow scrollbars inside a slide88 89Use the density limits and mandatory CSS block in `STYLE_PRESETS.md`.90 91### 6. Validate92 93Check the finished deck at these sizes:94- 1920x108095- 1280x72096- 768x102497- 375x66798- 667x37599 100If browser automation is available, use it to verify no slide overflows and that keyboard navigation works.101 102### 7. Deliver103 104At handoff:105- delete temporary preview files unless the user wants to keep them106- open the deck with the platform-appropriate opener when useful107- summarize file path, preset used, slide count, and easy theme customization points108 109Use the correct opener for the current OS:110- macOS: `open file.html`111- Linux: `xdg-open file.html`112- Windows: `start "" file.html`113 114## PPT / PPTX Conversion115 116For PowerPoint conversion:1171. Prefer `python3` with `python-pptx` to extract text, images, and notes.1182. If `python-pptx` is unavailable, ask whether to install it or fall back to a manual/export-based workflow.1193. Preserve slide order, speaker notes, and extracted assets.1204. After extraction, run the same style-selection workflow as a new presentation.121 122Keep conversion cross-platform. Do not rely on macOS-only tools when Python can do the job.123 124## Implementation Requirements125 126### HTML / CSS127 128- Use inline CSS and JS unless the user explicitly wants a multi-file project.129- Fonts may come from Google Fonts or Fontshare.130- Prefer atmospheric backgrounds, strong type hierarchy, and a clear visual direction.131- Use abstract shapes, gradients, grids, noise, and geometry rather than illustrations.132 133### JavaScript134 135Include:136- keyboard navigation137- touch / swipe navigation138- mouse wheel navigation139- progress indicator or slide index140- reveal-on-enter animation triggers141 142### Accessibility143 144- use semantic structure (`main`, `section`, `nav`)145- keep contrast readable146- support keyboard-only navigation147- respect `prefers-reduced-motion`148 149## Content Density Limits150 151Use these maxima unless the user explicitly asks for denser slides and readability still holds:152 153| Slide type | Limit |154|------------|-------|155| Title | 1 heading + 1 subtitle + optional tagline |156| Content | 1 heading + 4-6 bullets or 2 short paragraphs |157| Feature grid | 6 cards max |158| Code | 8-10 lines max |159| Quote | 1 quote + attribution |160| Image | 1 image constrained by viewport |161 162## Anti-Patterns163 164- generic startup gradients with no visual identity165- system-font decks unless intentionally editorial166- long bullet walls167- code blocks that need scrolling168- fixed-height content boxes that break on short screens169- invalid negated CSS functions like `-clamp(...)`170 171## Related ECC Skills172 173- `frontend-patterns` for component and interaction patterns around the deck174- `liquid-glass-design` when a presentation intentionally borrows Apple glass aesthetics175- `e2e-testing` if you need automated browser verification for the final deck176 177## Deliverable Checklist178 179- presentation runs from a local file in a browser180- every slide fits the viewport without scrolling181- style is distinctive and intentional182- animation is meaningful, not noisy183- reduced motion is respected184- file paths and customization points are explained at handoff