frontend-slides

🥈Silver

Create stunning HTML presentations with animations from scratch or convert PowerPoint files. Ideal for non-designers in operations who need to build web presentations without coding skills. Integrates with Claude for easy use.

13,660430Updated Yesterday

Intermediate30min to implementautomation

Saves ~60 min per use

Quick InstallView Source

git clone https://github.com/zarazhangrui/frontend-slides.git

Works with:

Claude

Overview

About This Skill

How to Use

[{"step":"Prepare your content in a structured format (e.g., bullet points, outline, or existing PowerPoint slides). Organize your topics into logical sections with clear headings.","tip":"Use tools like Notion or Google Docs to draft your content first. This makes it easier to copy-paste into the AI prompt. Include specific metrics, data points, and visual descriptions you want highlighted."},{"step":"Paste the prompt template into your AI tool (Claude/ChatGPT) and fill in the placeholders with your specific requirements. For example, replace [TOPIC/PRESENTATION_NAME] with 'Q3 2024 Operational Efficiency Report' and [NUMBER] with '4'.","tip":"Be as specific as possible with slide topics and design preferences. Mention any corporate branding guidelines (colors, fonts) or specific visual elements you need included."},{"step":"Review the generated HTML presentation. Test the animations, transitions, and speaker notes by opening the file in a browser. Make any adjustments directly in the HTML or ask the AI to refine specific elements.","tip":"Use browser developer tools (F12) to inspect and tweak styles if needed. For complex changes, share specific feedback with the AI (e.g., 'Make the charts more prominent' or 'Change the color scheme to our brand palette')."},{"step":"Deploy or share your presentation. Save the HTML file locally, upload it to a web server, or use platforms like GitHub Pages. For PowerPoint conversions, ensure the AI preserves all animations and transitions.","tip":"For team presentations, host the HTML on an internal server or use tools like Vercel/Netlify for easy sharing. Add a QR code to the last slide linking to the presentation for mobile access."},{"step":"Iterate as needed. If you need to update content or design, simply provide the AI with the original prompt template plus your changes (e.g., 'Update slide 3 with new bottleneck data').","tip":"Save your prompts for future use. If you create multiple presentations, store your prompt templates in a knowledge base for consistency across your team's work."}]

Use Cases

Create a pitch deck for an AI startup with custom visuals.

Convert an existing PowerPoint presentation into a web-friendly format.

Generate a visually appealing presentation for a school project without design skills.

Produce a corporate slideshow that reflects brand aesthetics using curated styles.

Setup & Installation

Quick Install

No install command available. Check the GitHub repository for manual installation instructions.

Alternative Install (Git Clone)

git clone https://github.com/zarazhangrui/frontend-slides

Requirements

Claude Code or compatible AI agent
Works with: Claude

Quick Start Guide

Install the Skill

Copy the install command above and run it in your terminal.

Open Your AI Agent

Launch Claude Code, Cursor, or your preferred AI coding agent.

Try It Out

Use the prompt template or examples below to test the skill.

Customize

Adapt the skill to your specific use case and workflow.

Usage Examples

Prompt Template

Create a visually engaging HTML presentation with smooth animations for [TOPIC/PRESENTATION NAME]. Include [NUMBER] slides covering: [SLIDE_1_TOPIC], [SLIDE_2_TOPIC], [SLIDE_3_TOPIC], etc. Use a modern, clean design with [COLOR_SCHEME] and [FONT_STYLE]. Add subtle transitions between slides and include speaker notes for each slide. Provide the final output as a single HTML file with embedded CSS and JavaScript. If converting from PowerPoint, use the file [POWERPOINT_FILE_PATH] and preserve all animations and transitions.

Example Output

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Q3 2024 Operational Efficiency Report</title>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');
        body {
            font-family: 'Inter', sans-serif;
            margin: 0;
            padding: 0;
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            color: #2c3e50;
        }
        .slide {
            height: 100vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 2rem;
            opacity: 0;
            transform: translateY(20px);
            transition: all 0.8s ease-in-out;
        }
        .slide.active {
            opacity: 1;
            transform: translateY(0);
        }
        .slide h1 {
            font-size: 3rem;
            margin-bottom: 1.5rem;
            color: #3498db;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
        }
        .slide h2 {
            font-size: 2rem;
            margin-bottom: 1rem;
            color: #2c3e50;
        }
        .slide p {
            font-size: 1.2rem;
            max-width: 800px;
            text-align: center;
            line-height: 1.6;
        }
        .slide .highlight {
            background: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
            padding: 0.5rem 1rem;
            border-radius: 0.5rem;
            display: inline-block;
        }
        .slide .chart-container {
            width: 100%;
            max-width: 600px;
            height: 400px;
            background: white;
            border-radius: 1rem;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
            margin: 1rem 0;
            overflow: hidden;
        }
        .controls {
            position: fixed;
            bottom: 2rem;
            right: 2rem;
            display: flex;
            gap: 1rem;
        }
        button {
            padding: 0.8rem 1.5rem;
            background: #3498db;
            color: white;
            border: none;
            border-radius: 0.5rem;
            cursor: pointer;
            font-weight: 600;
            transition: background 0.3s;
        }
        button:hover {
            background: #2980b9;
        }
        .speaker-notes {
            position: fixed;
            bottom: 2rem;
            left: 2rem;
            background: rgba(255,255,255,0.95);
            padding: 1rem;
            border-radius: 0.5rem;
            max-width: 300px;
            font-size: 0.9rem;
            display: none;
        }
    </style>
</head>
<body>
    <div class="slide active" id="slide1">
        <h1>Q3 2024 Operational Efficiency Report</h1>
        <p>Presented by <span class="highlight">Operations Analytics Team</span></p>
        <p>October 15, 2024</p>
    </div>

    <div class="slide" id="slide2">
        <h2>Key Performance Indicators</h2>
        <div class="chart-container">
            <canvas id="kpiChart"></canvas>
        </div>
        <p>Our Q3 metrics show <span class="highlight">12% improvement</span> in order fulfillment time compared to Q2.</p>
    </div>

    <div class="slide" id="slide3">
        <h2>Process Bottlenecks Identified</h2>
        <ul style="font-size: 1.2rem; text-align: left; max-width: 600px;">
            <li style="margin-bottom: 1rem;">⚠️ <strong>Inventory Management:</strong> 3-day delay in stock replenishment</li>
            <li style="margin-bottom: 1rem;">⚠️ <strong>Shipping Coordination:</strong> Inconsistent carrier communication</li>
            <li style="margin-bottom: 1rem;">⚠️ <strong>Quality Control:</strong> 8% increase in return rates</li>
        </ul>
    </div>

    <div class="slide" id="slide4">
        <h2>Action Plan & Timeline</h2>
        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; max-width: 900px; width: 100%;">
            <div style="background: white; padding: 1.5rem; border-radius: 1rem; box-shadow: 0 5px 15px rgba(0,0,0,0.1);">
                <h3 style="color: #e74c3c; margin-top: 0;">Immediate Actions (Next 2 Weeks)</h3>
                <ul style="text-align: left;">
                    <li>Implement real-time inventory tracking</li>
                    <li>Schedule daily carrier check-ins</li>
                </ul>
            </div>
            <div style="background: white; padding: 1.5rem; border-radius: 1rem; box-shadow: 0 5px 15px rgba(0,0,0,0.1);">
                <h3 style="color: #2ecc71; margin-top: 0;">Long-term Solutions (Next 3 Months)</h3>
                <ul style="text-align: left;">
                    <li>Upgrade warehouse management system</li>
                    <li>Implement AI-powered demand forecasting</li>
                </ul>
            </div>
        </div>
    </div>

    <div class="controls">
        <button id="prevBtn">← Previous</button>
        <button id="nextBtn">Next →</button>
        <button id="notesBtn">📝 Speaker Notes</button>
    </div>
    <div class="speaker-notes" id="speakerNotes">
        <p><strong>Slide 2:</strong> The KPI chart shows fulfillment time dropped from 5.2 days to 4.6 days. Highlight the 12% improvement and mention we're now meeting 95% of our SLA targets.</p>
        <p><strong>Slide 3:</strong> Emphasize that inventory delays are our biggest concern as it affects 60% of our orders. Suggest having the warehouse manager's contact ready for questions.</p>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script>
        // Animation on slide change
        const slides = document.querySelectorAll('.slide');
        let currentSlide = 0;

        function showSlide(index) {
            slides.forEach((slide, i) => {
                slide.classList.toggle('active', i === index);
            });
        }

        document.getElementById('nextBtn').addEventListener('click', () => {
            currentSlide = (currentSlide + 1) % slides.length;
            showSlide(currentSlide);
        });

        document.getElementById('prevBtn').addEventListener('click', () => {
            currentSlide = (currentSlide - 1 + slides.length) % slides.length;
            showSlide(currentSlide);
        });

        // Speaker notes toggle
        const notesBtn = document.getElementById('notesBtn');
        const speakerNotes = document.getElementById('speakerNotes');
        notesBtn.addEventListener('click', () => {
            speakerNotes.style.display = speakerNotes.style.display === 'block' ? 'none' : 'block';
        });

        // Chart.js for KPI visualization
        const ctx = document.getElementById('kpiChart').getContext('2d');
        new Chart(ctx, {
            type: 'bar',
            data: {
                labels: ['Order Fulfillment', 'Customer Satisfaction', 'Cost per Order'],
                datasets: [{
                    label: 'Q3 2024 Performance',
                    data: [95, 88, 72],
                    backgroundColor: [
                        'rgba(52, 152, 219, 0.8)',
                        'rgba(46, 204, 113, 0.8)',
                        'rgba(231, 76, 60, 0.8)'
                    ],
                    borderColor: [
                        'rgba(52, 152, 219, 1)',
                        'rgba(46, 204, 113, 1)',
                        'rgba(231, 76, 60, 1)'
                    ],
                    borderWidth: 2
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                scales: {
                    y: {
                        beginAtZero: true,
                        max: 100
                    }
                }
            }
        });

        // Auto-advance every 8 seconds
        let autoAdvance = setInterval(() => {
            currentSlide = (currentSlide + 1) % slides.length;
            showSlide(currentSlide);
        }, 8000);

        // Pause auto-advance when user clicks
        document.addEventListener('click', () => {
            clearInterval(autoAdvance);
        });
    </script>
</body>
</html>
```