Zara Frontend Slides

Problem It Solves

When building presentations, design, content density, and browser fit often get tangled together: PPT-to-web conversions can overflow, AI-generated pages can feel generic, and collaborators still want editable text plus a shareable link. zara-frontend-slides targets this by producing single-file HTML decks that run directly in the browser without npm, build tools, or separate assets, while still supporting motion, theming, and accessibility constraints.

How It Works

The skill follows a content-first, style-second workflow:
- New presentations: collect purpose, length, and content state, then optionally enable in-browser editing backed by localStorage.
- Image evaluation: if an image folder is provided, review each image for usability, dominant colors, and meaning, then fold usable images into the outline instead of pasting them in later.
- Style discovery: generate three single-slide previews so the user can choose typography, color, motion, and mood visually rather than through abstract options.
- Generation rules: enforce 100vh slides, overflow: hidden, clamp() sizing, relative image heights, and reduced-motion support; split overflowing content into more slides instead of scrolling.
- PPT conversion: extract text, image assets, and slide order from .pptx files with python-pptx, then rebuild the deck in the chosen style while preserving speaker notes as HTML comments.
- Delivery and sharing: optionally deploy a mobile-friendly live URL or export a PDF.

Boundaries and Caveats

It fits product explainers, teaching decks, conference talks, and internal updates where visual presentation matters. It intentionally avoids generic AI aesthetics, such as default system fonts and predictable purple-on-white gradients, so strict brand guidelines should be applied on top. The workflow is anti-cramming: dense documents should be split into more slides. For complex stateful apps, live data fetching, or multi-page routing, a single-file HTML deck is not the right tool.