wp931120/tiny_agent/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):

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]
**Style C: [Name]** — [1 sentence description]
 
Open each file to see them in action:
- .claude-design/slide-previews/style-a.html
- .claude-design/slide-previews/style-b.html
- .claude-design/slide-previews/style-c.html
 
Take a look and tell me:
1. Which style resonates most?
2. What do you like about it?
3. Anything you'd change?

Then use AskUserQuestion:

Question: Pick Your Style

• Header: "Style"
• Question: "Which style preview do you prefer?"
• Options:
• "Style A: [Name]" — [Brief description]
• "Style B: [Name]" — [Brief description]
• "Style C: [Name]" — [Brief description]
• "Mix elements" — Combine aspects from different styles

If "Mix elements", ask for specifics.

Phase 3: Generate Presentation

Now generate the full presentation based on:

• Content from Phase 1
• Style from Phase 2

File Structure

For single presentations:

presentation.html    # Self-contained presentation
assets/              # Images, if any

For projects with multiple presentations:

[presentation-name].html
[presentation-name]-assets/

HTML Architecture

Follow this structure for all presentations:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Presentation Title</title>
 
    <!-- Fonts (use Fontshare or Google Fonts) -->
    <link rel="stylesheet" href="https://api.fontshare.com/v2/css?f[]=...">
 
    <style>
        /* ===========================================
           CSS CUSTOM PROPERTIES (THEME)
           Easy to modify: change these to change the whole look
           =========================================== */
        :root {
            /* Colors */
            --bg-primary: #0a0f1c;
            --bg-secondary: #111827;
            --text-primary: #ffffff;
            --text-secondary: #9ca3af;
            --accent: #00ffcc;
            --accent-glow: rgba(0, 255, 204, 0.3);
 
            /* Typography */
            --font-display: 'Clash Display', sans-serif;
            --font-body: 'Satoshi', sans-serif;
 
            /* Spacing */
            --slide-padding: clamp(2rem, 5vw, 4rem);
 
            /* Animation */
            --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
            --duration-normal: 0.6s;
        }
 
        /* ===========================================
           BASE STYLES
           =========================================== */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
 
        html {
            scroll-behavior: smooth;
            scroll-snap-type: y mandatory;
        }
 
        body {
            font-family: var(--font-body);
            background: var(--bg-primary);
            color: var(--text-primary);
            overflow-x: hidden;
        }
 
        /* ===========================================
           SLIDE CONTAINER
           Each section is one slide
           =========================================== */
        .slide {
            min-height: 100vh;
            padding: var(--slide-padding);
            scroll-snap-align: start;
            display: flex;
            flex-direction: column;
            justify-content: center;
            position: relative;
            overflow: hidden;
        }
 
        /* ===========================================
           ANIMATIONS
           Trigger via .visible class (added by JS on scroll)
           =========================================== */
        .reveal {
            opacity: 0;
            transform: translateY(30px);
            transition: opacity var(--duration-normal) var(--ease-out-expo),
                        transform var(--duration-normal) var(--ease-out-expo);
        }
 
        .slide.visible .reveal {
            opacity: 1;
            transform: translateY(0);
        }
 
        /* Stagger children */
        .reveal:nth-child(1) { transition-delay: 0.1s; }
        .reveal:nth-child(2) { transition-delay: 0.2s; }
        .reveal:nth-child(3) { transition-delay: 0.3s; }
        .reveal:nth-child(4) { transition-delay: 0.4s; }
 
        /* ... more styles ... */
    </style>
</head>
<body>
    <!-- Progress bar (optional) -->
    <div class="progress-bar"></div>
 
    <!-- Navigation dots (optional) -->
    <nav class="nav-dots">
        <!-- Generated by JS -->
    </nav>
 
    <!-- Slides -->
    <section class="slide title-slide">
        <h1 class="reveal">Presentation Title</h1>
        <p class="reveal">Subtitle or author</p>
    </section>
 
    <section class="slide">
        <h2 class="reveal">Slide Title</h2>
        <p class="reveal">Content...</p>
    </section>
 
    <!-- More slides... -->
 
    <script>
        /* ===========================================
           SLIDE PRESENTATION CONTROLLER
           Handles navigation, animations, and interactions
           =========================================== */
 
        class SlidePresentation {
            constructor() {
                // ... initialization
            }
 
            // ... methods
        }
 
        // Initialize
        new SlidePresentation();
    </script>
</body>
</html>

Required JavaScript Features

Every presentation should include:

1. SlidePresentation Class — Main controller

• Keyboard navigation (arrows, space)
• Touch/swipe support
• Mouse wheel navigation
• Progress bar updates
• Navigation dots

1. Intersection Observer — For scroll-triggered animations

• Add .visible class when slides enter viewport
• Trigger CSS animations efficiently

1. Optional Enhancements (based on style):

• Custom cursor with trail
• Particle system background (canvas)
• Parallax effects
• 3D tilt on hover
• Magnetic buttons
• Counter animations

Code Quality Requirements

Comments: Every section should have clear comments explaining:

• What it does
• Why it exists
• How to modify it

/* ===========================================
   CUSTOM CURSOR
   Creates a stylized cursor that follows mouse with a trail effect.
   - Uses lerp (linear interpolation) for smooth movement
   - Grows larger when hovering over interactive elements
   =========================================== */
class CustomCursor {
    constructor() {
        // ...
    }
}

Accessibility:

• Semantic HTML (<section>, <nav>, <main>)
• Keyboard navigation works
• ARIA labels where needed
• Reduced motion support

@media (prefers-reduced-motion: reduce) {
    .reveal {
        transition: opacity 0.3s ease;
        transform: none;
    }
}

Responsive:

• Mobile-friendly (single column, adjusted spacing)
• Disable heavy effects on mobile
• Touch-friendly interactions

@media (max-width: 768px) {
    .nav-dots,
    .keyboard-hint {
        display: none;
    }
}

Phase 4: PPT Conversion

When converting PowerPoint files:

Step 4.1: Extract Content