frontend-slides - Agent Skills

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

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

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

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

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

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:
Which style resonates most?

What do you like about it?

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:

SlidePresentation Class — Main controller

- Keyboard navigation (arrows, space)
- Touch/swipe support
- Mouse wheel navigation
- Progress bar updates
- Navigation dots
Intersection Observer — For scroll-triggered animations

- Add .visible class when slides enter viewport
- Trigger CSS animations efficiently
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 (
,
,
)

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
Use Python with python-pptx to extract:
from pptx import Presentation from pptx.util import Inches, Pt import json import os import base64 def extract_pptx(file_path, output_dir): """ Extract all content from a PowerPoint file. Returns a JSON structure with slides, text, and images. """ prs = Presentation(file_path) slides_data = [] # Create assets directory assets_dir = os.path.join(output_dir, 'assets') os.makedirs(assets_dir, exist_ok=True) for slide_num, slide in enumerate(prs.slides): slide_data = { 'number': slide_num + 1, 'title': '', 'content': [], 'images': [], 'notes': '' } for shape in slide.shapes: # Extract title if shape.has_text_frame: if shape == slide.shapes.title: slide_data['title'] = shape.text else: slide_data['content'].append({ 'type': 'text', 'content': shape.text }) # Extract images if shape.shape_type == 13: # Picture image = shape.image image_bytes = image.blob image_ext = image.ext image_name = f"slide{slide_num + 1}_img{len(slide_data['images']) + 1}.{image_ext}" image_path = os.path.join(assets_dir, image_name) with open(image_path, 'wb') as f: f.write(image_bytes) slide_data['images'].append({ 'path': f"assets/{image_name}", 'width': shape.width, 'height': shape.height }) # Extract notes if slide.has_notes_slide: notes_frame = slide.notes_slide.notes_text_frame slide_data['notes'] = notes_frame.text slides_data.append(slide_data)
return slides_data
Step 4.2: Confirm Content Structure
Present the extracted content to the user:
I've extracted the following from your PowerPoint: Slide 1: [Title] [Content summary] Images: [count] Slide 2: [Title] [Content summary] Images: [count] ... All images have been saved to the assets folder.
Does this look correct? Should I proceed with style selection?
Step 4.3: Style Selection
Proceed to Phase 2 (Style Discovery) with the extracted content in mind.
Step 4.4: Generate HTML
Convert the extracted content into the chosen style, preserving:
All text content

All images (referenced from assets folder)

Slide order

Any speaker notes (as HTML comments or separate file)
Phase 5: Delivery
Final Output
When the presentation is complete:
Clean up temporary files

- Delete .claude-design/slide-previews/ if it exists
Open the presentation

- Use open [filename].html to launch in browser
Provide summary

Your presentation is ready! 📁 File: [filename].html 🎨 Style: [Style Name] 📊 Slides: [count] Navigation: Arrow keys (← →) or Space to navigate Scroll/swipe also works Click the dots on the right to jump to a slide To customize: Colors: Look for :root CSS variables at the top Fonts: Change the Fontshare/Google Fonts link Animations: Modify .reveal class timings
Would you like me to make any adjustments?
Style Reference: Effect → Feeling Mapping
Use this guide to match animations to intended feelings:
Dramatic / Cinematic

Slow fade-ins (1-1.5s)

Large scale transitions (0.9 → 1)

Dark backgrounds with spotlight effects

Parallax scrolling

Full-bleed images
Techy / Futuristic

Neon glow effects (box-shadow with accent color)

Particle systems (canvas background)

Grid patterns

Monospace fonts for accents

Glitch or scramble text effects

Cyan, magenta, electric blue palette
Playful / Friendly

Bouncy easing (spring physics)

Rounded corners (large radius)

Pastel or bright colors

Floating/bobbing animations

Hand-drawn or illustrated elements
Professional / Corporate

Subtle, fast animations (200-300ms)

Clean sans-serif fonts

Navy, slate, or charcoal backgrounds

Precise spacing and alignment

Minimal decorative elements

Data visualization focus
Calm / Minimal

Very slow, subtle motion

High whitespace

Muted color palette

Serif typography

Generous padding

Content-focused, no distractions
Editorial / Magazine

Strong typography hierarchy

Pull quotes and callouts

Image-text interplay

Grid-breaking layouts

Serif headlines, sans-serif body

Black and white with one accent
Animation Patterns Reference
Entrance Animations

/ Fade + Slide Up (most common) /
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s var(--ease-out-expo),
                transform 0.6s var(--ease-out-expo);
}
.visible .reveal {
    opacity: 1;
    transform: translateY(0);
}/ Scale In /
.reveal-scale {
    opacity: 0;
    transform: scale(0.9);
    transition: opacity 0.6s, transform 0.6s var(--ease-out-expo);
}
/ Slide from Left /
.reveal-left {
    opacity: 0;
    transform: translateX(-50px);
    transition: opacity 0.6s, transform 0.6s var(--ease-out-expo);
}/ Blur In /
.reveal-blur {
    opacity: 0;
    filter: blur(10px);
    transition: opacity 0.8s, filter 0.8s var(--ease-out-expo);
}

Background Effects

/ Gradient Mesh /
.gradient-bg {
    background:
        radial-gradient(ellipse at 20% 80%, rgba(120, 0, 255, 0.3) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 20%, rgba(0, 255, 200, 0.2) 0%, transparent 50%),
        var(--bg-primary);
}/ Noise Texture /
.noise-bg {
    background-image: url("data:image/svg+xml,..."); / Inline SVG noise /
}/ Grid Pattern /
.grid-bg {
    background-image:
        linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
    background-size: 50px 50px;
}

Interactive Effects

/ 3D Tilt on Hover /
class TiltEffect {
    constructor(element) {
        this.element = element;
        this.element.style.transformStyle = 'preserve-3d';
        this.element.style.perspective = '1000px';
        this.bindEvents();
    }
    bindEvents() {
        this.element.addEventListener('mousemove', (e) => {
            const rect = this.element.getBoundingClientRect();
            const x = (e.clientX - rect.left) / rect.width - 0.5;
            const y = (e.clientY - rect.top) / rect.height - 0.5;            this.element.style.transform = 
                rotateY(${x  10}deg)
                rotateX(${-y * 10}deg)
            ;
        });        this.element.addEventListener('mouseleave', () => {
            this.element.style.transform = 'rotateY(0) rotateX(0)';
        });
    }
}

Troubleshooting

Common Issues

Fonts not loading:

Check Fontshare/Google Fonts URL

Ensure font names match in CSS

Animations not triggering:

Verify Intersection Observer is running

Check that .visible class is being added

Scroll snap not working:

Ensure scroll-snap-type on html/body

Each slide needs scroll-snap-align: start

Mobile issues:

Disable heavy effects at 768px breakpoint

Test touch events

Reduce particle count or disable canvas

Performance issues:

Use will-change sparingly

Prefer transform and opacity animations

Throttle scroll/mousemove handlers

Related Skills

learn — Generate FORZARA.md documentation for the presentation

frontend-design — For more complex interactive pages beyond slides

design-and-refine:design-lab — For iterating on component designs

Example Session Flow

User: "I want to create a pitch deck for my AI startup"

Skill asks about purpose, length, content

User shares their bullet points and key messages

Skill asks about desired feeling (Impressed + Excited)

Skill generates 3 style previews

User picks Style B (Neon Cyber), asks for darker background

Skill generates full presentation with all slides

Skill opens the presentation in browser

User requests tweaks to specific slides

Final presentation delivered

Conversion Session Flow

User: "Convert my slides.pptx to a web presentation"

Skill extracts content and images from PPT

Skill confirms extracted content with user

Skill asks about desired feeling/style

Skill generates style previews

User picks a style

Skill generates HTML presentation with preserved assets

Final presentation delivered