Frontend Slides

# Frontend Slides Skill

Create zero-dependency, animation-rich HTML presentations that run entirely in the browser. This skill helps non-designers discover their preferred aesthetic through visual exploration ("show, don't tell"), then generates production-quality slide decks.

Core Philosophy

1. **Zero Dependencies** — Single HTML files with inline CSS/JS. No npm, no build tools.

2. **Show, Don't Tell** — People don't know what they want until they see it. Generate visual previews, not abstract choices.

3. **Distinctive Design** — Avoid generic "AI slop" aesthetics. Every presentation should feel custom-crafted.

4. **Production Quality** — Code should be well-commented, accessible, and performant.

---

Phase 0: Detect Mode

First, determine what the user wants:

**Mode A: New Presentation**

- User wants to create slides from scratch

- Proceed to Phase 1 (Content Discovery)

**Mode B: PPT Conversion**

- User has a PowerPoint file (.ppt, .pptx) to convert

- Proceed to Phase 4 (PPT Extraction)

**Mode C: Existing Presentation Enhancement**

- User has an HTML presentation and wants to improve it

- Read the existing file, understand the structure, then enhance

---

Phase 1: Content Discovery (New Presentations)

Before designing, understand the content. Ask via AskUserQuestion:

Step 1.1: Presentation Context

**Question 1: Purpose**

- Header: "Purpose"

- Question: "What is this presentation for?"

- Options:

- "Pitch deck" — Selling an idea, product, or company to investors/clients

- "Teaching/Tutorial" — Explaining concepts, how-to guides, educational content

- "Conference talk" — Speaking at an event, tech talk, keynote

- "Internal presentation" — Team updates, strategy meetings, company updates

**Question 2: Slide Count**

- Header: "Length"

- Question: "Approximately how many slides?"

- Options:

- "Short (5-10)" — Quick pitch, lightning talk

- "Medium (10-20)" — Standard presentation

- "Long (20+)" — Deep dive, comprehensive talk

**Question 3: Content**

- Header: "Content"

- Question: "Do you have the content ready, or do you need help structuring it?"

- Options:

- "I have all content ready" — Just need to design the presentation

- "I have rough notes" — Need help organizing into slides

- "I have a topic only" — Need help creating the full outline

If user has content, ask them to share it (text, bullet points, images, etc.).

---

Phase 2: Style Discovery (Visual Exploration)

**CRITICAL: This is the "show, don't tell" phase.**

Most people can't articulate design preferences in words. Instead of asking "do you want minimalist or bold?", we generate mini-previews and let them react.

Step 2.1: Mood Selection

**Question 1: Feeling**

- Header: "Vibe"

- Question: "What feeling should the audience have when viewing your slides?"

- Options:

- "Impressed/Confident" — Professional, trustworthy, this team knows what they're doing

- "Excited/Energized" — Innovative, bold, this is the future

- "Calm/Focused" — Clear, thoughtful, easy to follow

- "Inspired/Moved" — Emotional, storytelling, memorable

- multiSelect: true (can choose up to 2)

Step 2.2: Generate Style Previews

Based on their mood selection, generate **3 distinct style previews** as mini HTML files in a temporary directory. Each preview should be a single title slide showing:

- Typography (font choices, heading/body hierarchy)

- Color palette (background, accent, text colors)

- Animation style (how elements enter)

- Overall aesthetic feel

**Preview Styles to Consider (pick 3 based on mood):**

| Mood | Style Options |

|------|---------------|

| Impressed/Confident | "Corporate Elegant", "Dark Executive", "Clean Minimal" |

| Excited/Energized | "Neon Cyber", "Bold Gradients", "Kinetic Motion" |

| Calm/Focused | "Paper & Ink", "Soft Muted", "Swiss Minimal" |

| Inspired/Moved | "Cinematic Dark", "Warm Editorial", "Atmospheric" |

**IMPORTANT: Never use these generic patterns:**

- Purple gradients on white backgrounds