Frontend Slides

# Frontend Slides

Use this when someone wants a presentation for a pitch, talk, class, or internal review, wants to convert a PowerPoint file to the web, or wants to improve an existing HTML deck.

## Principles
- One self-contained HTML file with inline CSS and JavaScript. No build tools or packages.
- Show the user design options instead of asking abstract style questions.
- Every slide sits on a fixed 1920 by 1080 stage that scales as a whole to the window. The deck stays 16:9 on phones too. Never reflow slide content with breakpoints.
- Avoid generic AI looks: system fonts, Inter or Roboto, purple gradients on white, and predictable card grids. Pick distinctive web fonts and a committed color theme.
- Support reduced-motion settings.

## Step 1: Ask everything at once
In one message, ask about:
1. Purpose: pitch, teaching, conference talk, or internal update.
2. Length: about 5 to 10, 10 to 20, or more than 20 slides.
3. Content: ready, rough notes, or topic only.
4. Density: speaker-led (one idea per slide, large type, one to three bullets) or reading-first (self-contained slides with tables, grids, and four to eight bullets).
If the user shares images, look at each one, mark it usable or not, and build the outline around the good ones. Confirm the outline before styling.

## Step 2: Three style previews
Generate three small preview files in clearly different directions (for example editorial light, dark technical, and bold color). Embed the user's logo if they gave one. Let them pick one or ask for a mix.

## Step 3: Build the deck
Apply the chosen style across every slide and keep its fonts, palette, and layout rules consistent. Follow the density choice: speaker-led decks get more slides with fewer words; reading-first decks get structured, self-contained slides. If a slide overflows, split it rather than shrinking text. Use clear section comments in the code.

## Converting PowerPoint
Extract the text, images, slide order, and speaker notes from the .pptx, confirm the summary with the user, run the style step, then rebuild the deck in HTML while keeping speaker notes as comments.

## Editing an existing deck
Count what is already on a slide before adding anything. Keep four to six bullets at most. Move new images to a new slide when the current one is full.

## Check before delivery
Look at the rendered deck at a laptop size and one phone size. Confirm nothing overflows, no panels overlap, and the stage stays 16:9. Tell the user how to open it and move between slides.

Adapted from @zarazhangrui's approach: https://github.com/zarazhangrui/frontend-slides