Frontend Slides

Frontend Slides

Create zero-dependency, animation-rich HTML presentations that run entirely in the browser.

Core Principles

1. Zero Dependencies — Single HTML files with inline CSS/JS. No npm, no build tools.
2. Show, Don't Tell — Generate visual previews, not abstract choices. People discover what they want by seeing it.
3. Distinctive Design — No generic "AI slop." Every presentation must feel custom-crafted.
4. Viewport Fitting (NON-NEGOTIABLE) — Every slide MUST fit exactly within 100vh. No scrolling within slides, ever. Content overflows? Split into multiple slides.

Design Aesthetics

Avoid generic AI-generated aesthetics like overused font families (Inter, Roboto) or cliched color schemes (purple gradients on white). Focus on:

• Typography: beautiful, unique fonts (Google Fonts/Fontshare).
• Color & Theme: cohesive aesthetic with CSS variables and sharp accents.
• Motion: CSS-only animations for staggered reveals and high-impact transitions.
• Backgrounds: layered gradients, geometric patterns, or depth effects.

Viewport Fitting Rules (Mandatory)

• Every .slide must have height: 100vh; height: 100dvh; overflow: hidden;
• ALL font sizes and spacing must use clamp(min, preferred, max).
• Content containers need max-height constraints.
• Images: max-height: min(50vh, 400px).
• Breakpoints required for heights: 700px, 600px, 500px.
• Include prefers-reduced-motion support.

Always read viewport-base.css and include its full contents in every presentation.

Content Density Limits Per Slide

Workflow Guide

Phase 1: Content Discovery

• Ask the user about the Purpose, Length, and Content of the presentation.
• Inquire if they need Inline Editing (LocalStorage persistence).

Phase 2: Style Selection

• Show 3 distinct style previews based on the desired "mood" (Confident, Energized, Focused, Inspired).
• Read STYLE_PRESETS.md for options.
• Save previews to a temporary folder and let the user pick.

Phase 3: Generation

• Read html-template.md, viewport-base.css, and animation-patterns.md.
• Generate a self-contained HTML file with all CSS/JS inline.
• Include the full contents of viewport-base.css.

Phase 4: PPT Conversion (requires python-pptx)

• Run python3 .agent/skills/frontend-slides/scripts/extract-pptx.py <input.pptx> <output_dir>.
• Extract text and images, then proceed to style selection.

Phase 5: PPTX Export (requires python-pptx)

• Run python3 .agent/skills/frontend-slides/scripts/export-pptx.py <input.html> <output.pptx>.
• Converts the HTML slides back into a PowerPoint format for offline presentation and editing.

Examples

Supporting Files