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):

IMPORTANT: Never use these generic patterns:

• •Purple gradients on white backgrounds
• •Inter, Roboto, or system fonts
• •Standard blue primary colors
• •Predictable hero layouts

Instead, use distinctive choices:

• •Unique font pairings (Clash Display, Satoshi, Cormorant Garamond, DM Sans, etc.)
• •Cohesive color themes with personality
• •Atmospheric backgrounds (gradients, subtle patterns, depth)
• •Signature animation moments

Step 2.3: Present Previews

Create the previews in: .claude-design/slide-previews/

.claude-design/slide-previews/
├── style-a.html   # First style option
├── style-b.html   # Second style option
├── style-c.html   # Third style option
└── assets/        # Any shared assets

Each preview file should be:

• •Self-contained (inline CSS/JS)
• •A single "title slide" showing the aesthetic
• •Animated to demonstrate motion style
• •~50-100 lines, not a full presentation

Present to user:

I've created 3 style previews for you to compare:

**Style A: [Name]** — [1 sentence description]
**Style B: [Name]** — [1 sentence description]
**Sty