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.
npx skills add mturac/everything-openai-codex --skill frontend-slides --agent codex
Same command for any agent — swap --agent for claude-code, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
# Frontend Slides Create zero-dependency, animation-rich HTML presentations that run entirely in the browser. Inspired by the visual exploration approach showcased in work by zarazhangrui (credit: @zarazhangrui). ## When to Activate - Creating a talk deck, pitch deck, workshop deck, or internal presentation - Converting `.ppt` or `.pptx` slides into an HTML presentation - Improving an existing HTML presentation's layout, motion, or typography - Exploring presentation styles with a user who does not know their design preference yet ## Non-Negotiables 1. **Zero dependencies**: default to one self-contained HTML file with inline CSS and JS. 2. **Viewport fit is mandatory**: every slide must fit inside one viewport with no internal scrolling. 3. **Show, don't tell**: use visual previews instead of abstract style questionnaires. 4. **Distinctive design**: avoid generic purple-gradient, Inter-on-white, template-looking decks. 5. **Production quality**: keep code commented, accessible, responsive, and performant. Before generating, read `STYLE_PRESETS.md` for the viewport-safe CSS base, density limits, preset catalog, and CSS gotchas. ## Workflow ### 1. Detect Mode Choose one path: - **Ne
- When to Activate
- Non-Negotiables
- Workflow
- 1. Detect Mode
- 2. Discover Content
- 3. Discover Style
- 4. Build the Presentation
- 5. Enforce Viewport Fit
- 6. Validate
- 7. Deliver
- PPT / PPTX Conversion
- Implementation Requirements
- HTML / CSS
- JavaScript
What does the frontend-slides skill do?
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.
How do I install it?
Run `npx skills add mturac/everything-openai-codex --skill frontend-slides --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From mturac/everything-openai-codex, a repository with 84 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.