# Skill: Build a self-contained HTML slide presentation with no external dependencies

> Lets an AI coding agent generate a fully working browser-based slide deck from raw text or an existing PowerPoint file -- applies whenever a user needs a shareable presentation that opens anywhere without installing software.

Source: sodigi·learn -- vibecoding/slaydy-v-brauzere · https://sodigi.io/learn/vibecoding/slaydy-v-brauzere

## When to use
- User asks for a presentation, slide deck, pitch, or portfolio page.
- User wants to convert an existing .ppt / .pptx into a modern web format.
- User needs a presentation that works on a projector, phone, and laptop without any app installed.
- User is iterating on visual style and wants to choose from multiple previews before committing.

## Core rules
- Always produce a **single self-contained HTML file** with all styles, scripts, and animations inlined. A separate assets folder is acceptable only when the deck includes the user's own photos.
- **One slide = one screen, no scrolling.** If content does not fit, split it into two slides -- never shrink the font.
- Wire up keyboard arrows, scroll wheel, and touch swipes for navigation from the start. Include a slide progress indicator.
- Respect `prefers-reduced-motion`: animations must degrade gracefully.
- Never start with "show me the whole presentation first." Always generate **2-3 style previews** and let the user pick visually before building the full deck.
- Text density limits per slide: title slide = headline + subtitle + optional tagline; regular slide = 1 headline + 4-6 bullets or 2 short paragraphs; feature grid = max 6 cards; code slide = 8-10 lines; quote slide = quote + attribution only.
- When converting a PowerPoint, still go through the style-picking step -- do not replicate the old template look.

## Procedure
1. Receive the user's content (raw notes, topic outline, or an uploaded .pptx).
2. Identify the audience and tone (technical, investor, academic, etc.).
3. Generate **3 distinct single-slide previews** in visually different styles (e.g., minimal, dark luxury, editorial). Show them to the user.
4. Ask: "Which style do you prefer? You can also mix elements -- e.g., headline font from option 1, colors from option 2."
5. Once style is chosen, plan the slide count from the content; split any slide that would exceed density limits.
6. Build the full deck as a single HTML file: inline CSS, inline JS navigation logic, no CDN links.
7. Verify every slide fits one viewport -- no scroll overflow.
8. Deliver the file with a one-line usage note: "Double-click to open in any browser. Use arrow keys or swipe to navigate."

## Ready-to-use prompt
```
Build me a presentation as a single HTML file that opens in a browser.
Topic and content: [paste your text here]

Do NOT write the full presentation first. Start by showing me 3 preview slides
in three visually distinct styles so I can choose.

Hard rules for every slide:
1. Each slide fits one screen -- no scrolling, no scrollbar.
2. If there is too much text, split it across multiple slides, do not shrink the font.
3. Regular slides: maximum 4-6 bullets.
4. Wire up arrow-key navigation, scroll wheel, and phone swipe from the start.
5. No default purple gradients, no system fonts.
6. Pack everything into one self-contained HTML file -- no external dependencies.

After I pick a style, build the complete deck following those rules.
```

## Pitfalls
- Generating the full deck before showing style previews -- the user will ask for 10 rounds of restyling.
- Cramming more than 6 bullets onto one slide instead of splitting it.
- Describing the style goal in words ("clean but modern") and asking the agent to interpret it -- always use visual previews.
- Adding a scrollbar inside a slide -- that is a broken slide during a live presentation.
- Converting a PowerPoint without a style-picking step -- the result just wraps the old template in HTML.
- Linking to external scripts or CDN resources -- the file will break offline or on a locked corporate network.