Reintegrate features from PRs #19, #11, #2 lost during restructure

- PR #19 (image pipeline): Image question in Phase 1, co-design
  evaluation workflow, Pillow processing code and image CSS in
  html-template.md, logo-in-previews note
- PR #11 (Mode C rules): Viewport fitting rules for modifying
  existing presentations, proactive content splitting
- PR #2 (CSS gotcha): Negated CSS function warning in viewport
  rules and CSS Gotchas section in STYLE_PRESETS.md

Original contributions by @lilyzhng, @Vaibhavee89, @kbanc85.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

SKILL.md

@@ -42,6 +42,7 @@ These invariants apply to EVERY slide in EVERY presentation:
 - Images: `max-height: min(50vh, 400px)`
 - Breakpoints required for heights: 700px, 600px, 500px
 - Include `prefers-reduced-motion` support
+- Never negate CSS functions directly (`-clamp()`, `-min()`, `-max()` are silently ignored) — use `calc(-1 * clamp(...))` instead
 
 **When generating, read `viewport-base.css` and include its full contents in every presentation.**
 
@@ -66,13 +67,25 @@ Determine what the user wants:
 
 - **Mode A: New Presentation** — Create from scratch. Go to Phase 1.
 - **Mode B: PPT Conversion** — Convert a .pptx file. Go to Phase 4.
-- **Mode C: Enhancement** — Improve an existing HTML presentation. Read it, understand it, enhance.
+- **Mode C: Enhancement** — Improve an existing HTML presentation. Read it, understand it, enhance. **Follow Mode C modification rules below.**
+
+### Mode C: Modification Rules
+
+When enhancing existing presentations, viewport fitting is the biggest risk:
+
+1. **Before adding content:** Count existing elements, check against density limits
+2. **Adding images:** Must have `max-height: min(50vh, 400px)`. If slide already has max content, split into two slides
+3. **Adding text:** Max 4-6 bullets per slide. Exceeds limits? Split into continuation slides
+4. **After ANY modification, verify:** `.slide` has `overflow: hidden`, new elements use `clamp()`, images have viewport-relative max-height, content fits at 1280x720
+5. **Proactively reorganize:** If modifications will cause overflow, automatically split content and inform the user. Don't wait to be asked
+
+**When adding images to existing slides:** Move image to new slide or reduce other content first. Never add images without checking if existing content already fills the viewport.
 
 ---
 
 ## Phase 1: Content Discovery (New Presentations)
 
-Ask via AskUserQuestion (can combine up to 4 questions per call):
+**Ask ALL questions in a single AskUserQuestion call** so the user fills everything out at once:
 
 **Question 1 — Purpose** (header: "Purpose"):
 What is this presentation for? Options: Pitch deck / Teaching-Tutorial / Conference talk / Internal presentation
@@ -92,6 +105,19 @@ Do you need to edit text directly in the browser after generation? Options:
 
 If user has content, ask them to share it.
 
+### Step 1.2: Image Evaluation (if images provided)
+
+If user selected "No images" → skip to Phase 2.
+
+If user provides an image folder:
+1. **Scan** — List all image files (.png, .jpg, .svg, .webp, etc.)
+2. **View each image** — Use the Read tool (Claude is multimodal)
+3. **Evaluate** — For each: what it shows, USABLE or NOT USABLE (with reason), what concept it represents, dominant colors
+4. **Co-design the outline** — Curated images inform slide structure alongside text. This is NOT "plan slides then add images" — design around both from the start (e.g., 3 screenshots → 3 feature slides, 1 logo → title/closing slide)
+5. **Confirm via AskUserQuestion** (header: "Outline"): "Does this slide outline and image selection look right?" Options: Looks good / Adjust images / Adjust outline
+
+**Logo in previews:** If a usable logo was identified, embed it (base64) into each style preview in Phase 2 — the user sees their brand styled three different ways.
+
 ---
 
 ## Phase 2: Style Discovery
@@ -141,7 +167,9 @@ If "Mix elements", ask for specifics.
 
 ## Phase 3: Generate Presentation
 
-Generate the full presentation using content from Phase 1 and style from Phase 2.
+Generate the full presentation using content from Phase 1 (text, or text + curated images) and style from Phase 2.
+
+If images were provided, the slide outline already incorporates them from Step 1.2. If not, CSS-generated visuals (gradients, shapes, patterns) provide visual interest — this is a fully supported first-class path.
 
 **Before generating, read these supporting files:**
 - [html-template.md](html-template.md) — HTML architecture and JS features

STYLE_PRESETS.md

@@ -325,3 +325,23 @@ Curated visual styles for Frontend Slides. Each preset is inspired by real desig
 
 **Decorations:** Realistic illustrations, gratuitous glassmorphism, drop shadows without purpose
 
+---
+
+## CSS Gotchas
+
+### Negating CSS Functions
+
+**WRONG — silently ignored by browsers (no console error):**
+```css
+right: -clamp(28px, 3.5vw, 44px);   /* Browser ignores this */
+margin-left: -min(10vw, 100px);      /* Browser ignores this */
+```
+
+**CORRECT — wrap in `calc()`:**
+```css
+right: calc(-1 * clamp(28px, 3.5vw, 44px));  /* Works */
+margin-left: calc(-1 * min(10vw, 100px));     /* Works */
+```
+
+CSS does not allow a leading `-` before function names. The browser silently discards the entire declaration — no error, the element just appears in the wrong position. **Always use `calc(-1 * ...)` to negate CSS function values.**
+

html-template.md

@@ -252,6 +252,76 @@ document.addEventListener('keydown', (e) => {
 });
 ```
 
+## Image Pipeline (Skip If No Images)
+
+If user chose "No images" in Phase 1, skip this entirely. If images were provided, process them before generating HTML.
+
+**Dependency:** `pip install Pillow`
+
+### Image Processing
+
+```python
+from PIL import Image, ImageDraw
+
+# Circular crop (for logos on modern/clean styles)
+def crop_circle(input_path, output_path):
+    img = Image.open(input_path).convert('RGBA')
+    w, h = img.size
+    size = min(w, h)
+    left, top = (w - size) // 2, (h - size) // 2
+    img = img.crop((left, top, left + size, top + size))
+    mask = Image.new('L', (size, size), 0)
+    ImageDraw.Draw(mask).ellipse([0, 0, size, size], fill=255)
+    img.putalpha(mask)
+    img.save(output_path, 'PNG')
+
+# Resize (for oversized images that inflate HTML)
+def resize_max(input_path, output_path, max_dim=1200):
+    img = Image.open(input_path)
+    img.thumbnail((max_dim, max_dim), Image.LANCZOS)
+    img.save(output_path, quality=85)
+```
+
+| Situation | Operation |
+|-----------|-----------|
+| Square logo on rounded aesthetic | `crop_circle()` |
+| Image > 1MB | `resize_max(max_dim=1200)` |
+| Wrong aspect ratio | Manual crop with `img.crop()` |
+
+Save processed images with `_processed` suffix. Never overwrite originals.
+
+### Image Placement
+
+**Use direct file paths** (not base64) — presentations are viewed locally:
+
+```html
+<img src="assets/logo_round.png" alt="Logo" class="slide-image logo">
+<img src="assets/screenshot.png" alt="Screenshot" class="slide-image screenshot">
+```
+
+```css
+.slide-image {
+    max-width: 100%;
+    max-height: min(50vh, 400px);
+    object-fit: contain;
+    border-radius: 8px;
+}
+.slide-image.screenshot {
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    border-radius: 12px;
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
+}
+.slide-image.logo {
+    max-height: min(30vh, 200px);
+}
+```
+
+**Adapt border/shadow colors to match the chosen style's accent.** Never repeat the same image on multiple slides (except logos on title + closing).
+
+**Placement patterns:** Logo centered on title slide. Screenshots in two-column layouts with text. Full-bleed images as slide backgrounds with text overlay (use sparingly).
+
+---
+
 ## Code Quality
 
 **Comments:** Every section needs clear comments explaining what it does and how to modify it.