zarazhangrui/frontend-slides
Overview
This skill creates zero-dependency, animation-rich HTML presentations from scratch or by converting PowerPoint files into self-contained web decks. It helps non-designers discover a distinctive visual direction through interactive style previews, then generates production-quality, accessible slide HTML that runs entirely in the browser.
How this skill works
The workflow detects whether you want a new presentation, a PPT/PPTX conversion, or enhancements to an existing HTML slide deck. For new work it collects purpose, length, and content, then generates three mini style previews for you to pick from. For PPT conversion it extracts text, images, and notes, then maps slides into the chosen web style. The final output is a single-file HTML (plus optional assets) with animations, keyboard/touch navigation, and accessibility features.
When to use it
- You need a shareable, fast HTML presentation that runs without build tools.
- You want to convert a PowerPoint (.ppt/.pptx) to an interactive web deck.
- You’re a non-designer who prefers visual exploration over abstract style choices.
- You want production-quality slides with custom animations and accessible markup.
- You need a self-contained presentation to embed on a website or send as a single file.
Best practices
- Start with the Purpose and Slide Count questions so the design matches your intent.
- Use the three style previews to choose or mix visual elements rather than describing aesthetics verbally.
- Provide clear slide content (headings, bullets, images) to get accurate layout suggestions.
- Enable reduced-motion support and test keyboard navigation for accessibility.
- Keep heavy visuals optional on mobile; disable particle/3D effects for small screens.
Example use cases
- Create a 10-slide investor pitch with a confident, executive aesthetic.
- Convert a 25-slide PPTX into a single, animated HTML deck for your website.
- Design a conference talk with cinematic title animations and keyboard navigation.
- Improve an existing HTML presentation by swapping type, color, and motion treatments.
- Generate a teaching/tutorial deck with readable typography and clear reveal animations.
FAQ
No. All presentations are single HTML files with inline CSS/JS and optional asset folders—no build step required.
How are design preferences collected?
Design is discovered visually: I generate three distinct title-slide previews based on mood selections so you can pick or mix elements you actually like.
