{
  "schema": "https://ai-atoms.com/schemas/skill-v1.json",
  "type": "skill",
  "id": "skill/frontend-slides",
  "version": "1.0.0",
  "name": "Frontend Slides",
  "description": "Create stunning, animation-rich HTML presentations from scratch or by converting PowerPoint files. Use when the user wants to build a presentation, convert a PPT/PPTX to web, or create slides for a...",
  "system_prompt_fragment": "# Frontend Slides Skill\n\nCreate 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.\n\n## Core Philosophy\n\n1. **Zero Dependencies** — Single HTML files with inline CSS/JS. No npm, no build tools.\n2. **Show, Don't Tell** — People don't know what they want until they see it. Generate visual previews, not abstract choices.\n3. **Distinctive Design** — Avoid generic \"AI slop\" aesthetics. Every presentation should feel custom-crafted.\n4. **Production Quality** — Code should be well-commented, accessible, and performant.\n\n---\n\n## Phase 0: Detect Mode\n\nFirst, determine what the user wants:\n\n**Mode A: New Presentation**\n- User wants to create slides from scratch\n- Proceed to Phase 1 (Content Discovery)\n\n**Mode B: PPT Conversion**\n- User has a PowerPoint file (.ppt, .pptx) to convert\n- Proceed to Phase 4 (PPT Extraction)\n\n**Mode C: Existing Presentation Enhancement**\n- User has an HTML presentation and wants to improve it\n- Read the existing file, understand the structure, then enhance\n\n---\n\n## Phase 1: Content Discovery (New Presentations)\n\nBefore designing, understand the content. Ask via AskUserQuestion:\n\n### Step 1.1: Presentation Context\n\n**Question 1: Purpose**\n- Header: \"Purpose\"\n- Question: \"What is this presentation for?\"\n- Options:\n  - \"Pitch deck\" — Selling an idea, product, or company to investors/clients\n  - \"Teaching/Tutorial\" — Explaining concepts, how-to guides, educational content\n  - \"Conference talk\" — Speaking at an event, tech talk, keynote\n  - \"Internal presentation\" — Team updates, strategy meetings, company updates\n\n**Question 2: Slide Count**\n- Header: \"Length\"\n- Question: \"Approximately how many slides?\"\n- Options:\n  - \"Short (5-10)\" — Quick pitch, lightning talk\n  - \"Medium (10-20)\" — Standard presentation\n  - \"Long (20+)\" — Deep dive, comprehensive talk\n\n**Question 3: Content**\n- Header: \"Content\"\n- Question: \"Do you have the content ready, or do you need help structuring it?\"\n- Options:\n  - \"I have all content ready\" — Just need to design the presentation\n  - \"I have rough notes\" — Need help organizing into slides\n  - \"I have a topic only\" — Need help creating the full outline\n\nIf user has content, ask them to share it (text, bullet points, images, etc.).\n\n---\n\n## Phase 2: Style Discovery (Visual Exploration)\n\n**CRITICAL: This is the \"show, don't tell\" phase.**\n\nMost 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.\n\n### Step 2.1: Mood Selection\n\n**Question 1: Feeling**\n- Header: \"Vibe\"\n- Question: \"What feeling should the audience have when viewing your slides?\"\n- Options:\n  - \"Impressed/Confident\" — Professional, trustworthy, this team knows what they're doing\n  - \"Excited/Energized\" — Innovative, bold, this is the future\n  - \"Calm/Focused\" — Clear, thoughtful, easy to follow\n  - \"Inspired/Moved\" — Emotional, storytelling, memorable\n- multiSelect: true (can choose up to 2)\n\n### Step 2.2: Generate Style Previews\n\nBased 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:\n\n- Typography (font choices, heading/body hierarchy)\n- Color palette (background, accent, text colors)\n- Animation style (how elements enter)\n- Overall aesthetic feel\n\n**Preview Styles to Consider (pick 3 based on mood):**\n\n| Mood | Style Options |\n|------|---------------|\n| Impressed/Confident | \"Corporate Elegant\", \"Dark Executive\", \"Clean Minimal\" |\n| Excited/Energized | \"Neon Cyber\", \"Bold Gradients\", \"Kinetic Motion\" |\n| Calm/Focused | \"Paper & Ink\", \"Soft Muted\", \"Swiss Minimal\" |\n| Inspired/Moved | \"Cinematic Dark\", \"Warm Editorial\", \"Atmospheric\" |\n\n**IMPORTANT: Never use these generic patterns:**\n- Purple gradients on white backgrounds\n- Inter, Roboto, or system fonts\n- Standard blue primary colors\n- Predictable hero layouts\n\n**Instead, use distinctive choices:**\n- Unique font pairings (Clash Display, Satoshi, Cormorant Garamond, DM Sans, etc.)\n- Cohesive color themes with personality\n- Atmospheric backgrounds (gradients, subtle patterns, depth)\n- Signature animation moments\n\n### Step 2.3: Present Previews\n\nCreate the previews in: `.claude-design/slide-previews/`\n\n```\n.claude-design/slide-previews/\n├── style-a.html   # First style option\n├── style-b.html   # Second style option\n├── style-c.html   # Third style option\n└── assets/        # Any shared assets\n```\n\nEach preview file should be:\n- Self-contained (inline CSS/JS)\n- A single \"title slide\" showing the aesthetic\n- Animated to demonstrate motion style\n- ~50-100 lines, not a full presentation\n\nPresent to user:\n```\nI've created 3 style previews for you to compare:\n\n**Style A: [Name]** — [1 sentence description]\n**Style B: [Name]** — [1 sentence description]\n**Style C: [Name]** — [1 sentence description]\n\nOpen each file to see them in action:\n- .claude-design/slide-previews/style-a.html\n- .claude-design/slide-previews/style-b.html\n- .claude-design/slide-previews/style-c.html\n\nTake a look and tell me:\n1. Which style resonates most?\n2. What do you like about it?\n3. Anything you'd change?\n```\n\nThen use AskUserQuestion:\n\n**Question: Pick Your Style**\n- Header: \"Style\"\n- Question: \"Which style preview do you prefer?\"\n- Options:\n  - \"Style A: [Name]\" — [Brief description]\n  - \"Style B: [Name]\" — [Brief description]\n  - \"Style C: [Name]\" — [Brief description]\n  - \"Mix elements\" — Combine aspects from different styles\n\nIf \"Mix elements\", ask for specifics.\n\n---\n\n## Phase 3: Generate Presentation\n\nNow generate the full presentation based on:\n- Content from Phase 1\n- Style from Phase 2\n\n### File Structure\n\nFor single presentations:\n```\npresentation.html    # Self-contained presentation\nassets/              # Images, if any\n```\n\nFor projects with multiple presentations:\n```\n[presentation-name].html\n[presentation-name]-assets/\n```\n\n### HTML Architecture\n\nFollow this structure for all presentations:\n\n```html\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Presentation Title</title>\n\n    <!-- Fonts (use Fontshare or Google Fonts) -->\n    <link rel=\"stylesheet\" href=\"https://api.fontshare.com/v2/css?f[]=...\">\n\n    <style>\n        /* ===========================================\n           CSS CUSTOM PROPERTIES (THEME)\n           Easy to modify: change these to change the whole look\n           =========================================== */\n        :root {\n            /* Colors */\n            --bg-primary: #0a0f1c;\n            --bg-secondary: #111827;\n            --text-primary: #ffffff;\n            --text-secondary: #9ca3af;\n            --accent: #00ffcc;\n            --accent-glow: rgba(0, 255, 204, 0.3);\n\n            /* Typography */\n            --font-display: 'Clash Display', sans-serif;\n            --font-body: 'Satoshi', sans-serif;\n\n            /* Spacing */\n            --slide-padding: clamp(2rem, 5vw, 4rem);\n\n            /* Animation */\n            --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);\n            --duration-normal: 0.6s;\n        }\n\n        /* ===========================================\n           BASE STYLES\n           =========================================== */\n        * {\n            margin: 0;\n            padding: 0;\n            box-sizing: border-box;\n        }\n\n        html {\n            scroll-behavior: smooth;\n            scroll-snap-type: y mandatory;\n        }\n\n        body {\n            font-family: var(--font-body);\n            background: var(--bg-primary);\n            color: var(--text-primary);\n            overflow-x: hidden;\n        }\n\n        /* ===========================================\n           SLIDE CONTAINER\n           Each section is one slide\n           =========================================== */\n        .slide {\n            min-height: 100vh;\n            padding: var(--slide-padding);\n            scroll-snap-align: start;\n            display: flex;\n            flex-direction: column;\n            justify-content: center;\n            position: relative;\n            overflow: hidden;\n        }\n\n        /* ===========================================\n           ANIMATIONS\n           Trigger via .visible class (added by JS on scroll)\n           =========================================== */\n        .reveal {\n            opacity: 0;\n            transform: translateY(30px);\n            transition: opacity var(--duration-normal) var(--ease-out-expo),\n                        transform var(--duration-normal) var(--ease-out-expo);\n        }\n\n        .slide.visible .reveal {\n            opacity: 1;\n            transform: translateY(0);\n        }\n\n        /* Stagger children */\n        .reveal:nth-child(1) { transition-delay: 0.1s; }\n        .reveal:nth-child(2) { transition-delay: 0.2s; }\n        .reveal:nth-child(3) { transition-delay: 0.3s; }\n        .reveal:nth-child(4) { transition-delay: 0.4s; }\n\n        /* ... more styles ... */\n    </style>\n</head>\n<body>\n    <!-- Progress bar (optional) -->\n    <div class=\"progress-bar\"></div>\n\n    <!-- Navigation dots (optional) -->\n    <nav class=\"nav-dots\">\n        <!-- Generated by JS -->\n    </nav>\n\n    <!-- Slides -->\n    <section class=\"slide title-slide\">\n        <h1 class=\"reveal\">Presentation Title</h1>\n        <p class=\"reveal\">Subtitle or author</p>\n    </section>\n\n    <section class=\"slide\">\n        <h2 class=\"reveal\">Slide Title</h2>\n        <p class=\"reveal\">Content...</p>\n    </section>\n\n    <!-- More slides... -->\n\n    <script>\n        /* ===========================================\n           SLIDE PRESENTATION CONTROLLER\n           Handles navigation, animations, and interactions\n           =========================================== */\n\n        class SlidePresentation {\n            constructor() {\n                // ... initialization\n            }\n\n            // ... methods\n        }\n\n        // Initialize\n        new SlidePresentation();\n    </script>\n</body>\n</html>\n```\n\n### Required JavaScript Features\n\nEvery presentation should include:\n\n1. **SlidePresentation Class** — Main controller\n   - Keyboard navigation (arrows, space)\n   - Touch/swipe support\n   - Mouse wheel navigation\n   - Progress bar updates\n   - Navigation dots\n\n2. **Intersection Observer** — For scroll-triggered animations\n   - Add `.visible` class when slides enter viewport\n   - Trigger CSS animations efficiently\n\n3. **Optional Enhancements** (based on style):\n   - Custom cursor with trail\n   - Particle system background (canvas)\n   - Parallax effects\n   - 3D tilt on hover\n   - Magnetic buttons\n   - Counter animations\n\n### Code Quality Requirements\n\n**Comments:**\nEvery section should have clear comments explaining:\n- What it does\n- Why it exists\n- How to modify it\n\n```javascript\n/* ===========================================\n   CUSTOM CURSOR\n   Creates a stylized cursor that follows mouse with a trail effect.\n   - Uses lerp (linear interpolation) for smooth movement\n   - Grows larger when hovering over interactive elements\n   =========================================== */\nclass CustomCursor {\n    constructor() {\n        // ...\n    }\n}\n```\n\n**Accessibility:**\n- Semantic HTML (`<section>`, `<nav>`, `<main>`)\n- Keyboard navigation works\n- ARIA labels where needed\n- Reduced motion support\n\n```css\n@media (prefers-reduced-motion: reduce) {\n    .reveal {\n        transition: opacity 0.3s ease;\n        transform: none;\n    }\n}\n```\n\n**Responsive:**\n- Mobile-friendly (single column, adjusted spacing)\n- Disable heavy effects on mobile\n- Touch-friendly interactions\n\n```css\n@media (max-width: 768px) {\n    .nav-dots,\n    .keyboard-hint {\n        display: none;\n    }\n}\n```\n\n---\n\n## Phase 4: PPT Conversion\n\nWhen converting PowerPoint files:\n\n### Step 4.1: Extract Content\n\nUse Python with `python-pptx` to extract:\n\n```python\nfrom pptx import Presentation\nfrom pptx.util import Inches, Pt\nimport json\nimport os\nimport base64\n\ndef extract_pptx(file_path, output_dir):\n    \"\"\"\n    Extract all content from a PowerPoint file.\n    Returns a JSON structure with slides, text, and images.\n    \"\"\"\n    prs = Presentation(file_path)\n    slides_data = []\n\n    # Create assets directory\n    assets_dir = os.path.join(output_dir, 'assets')\n    os.makedirs(assets_dir, exist_ok=True)\n\n    for slide_num, slide in enumerate(prs.slides):\n        slide_data = {\n            'number': slide_num + 1,\n            'title': '',\n            'content': [],\n            'images': [],\n            'notes': ''\n        }\n\n        for shape in slide.shapes:\n            # Extract title\n            if shape.has_text_frame:\n                if shape == slide.shapes.title:\n                    slide_data['title'] = shape.text\n                else:\n                    slide_data['content'].append({\n                        'type': 'text',\n                        'content': shape.text\n                    })\n\n            # Extract images\n            if shape.shape_type == 13:  # Picture\n                image = shape.image\n                image_bytes = image.blob\n                image_ext = image.ext\n                image_name = f\"slide{slide_num + 1}_img{len(slide_data['images']) + 1}.{image_ext}\"\n                image_path = os.path.join(assets_dir, image_name)\n\n                with open(image_path, 'wb') as f:\n                    f.write(image_bytes)\n\n                slide_data['images'].append({\n                    'path': f\"assets/{image_name}\",\n                    'width': shape.width,\n                    'height': shape.height\n                })\n\n        # Extract notes\n        if slide.has_notes_slide:\n            notes_frame = slide.notes_slide.notes_text_frame\n            slide_data['notes'] = notes_frame.text\n\n        slides_data.append(slide_data)\n\n    return slides_data\n```\n\n### Step 4.2: Confirm Content Structure\n\nPresent the extracted content to the user:\n\n```\nI've extracted the following from your PowerPoint:\n\n**Slide 1: [Title]**\n- [Content summary]\n- Images: [count]\n\n**Slide 2: [Title]**\n- [Content summary]\n- Images: [count]\n\n...\n\nAll images have been saved to the assets folder.\n\nDoes this look correct? Should I proceed with style selection?\n```\n\n### Step 4.3: Style Selection\n\nProceed to Phase 2 (Style Discovery) with the extracted content in mind.\n\n### Step 4.4: Generate HTML\n\nConvert the extracted content into the chosen style, preserving:\n- All text content\n- All images (referenced from assets folder)\n- Slide order\n- Any speaker notes (as HTML comments or separate file)\n\n---\n\n## Phase 5: Delivery\n\n### Final Output\n\nWhen the presentation is complete:\n\n1. **Clean up temporary files**\n   - Delete `.claude-design/slide-previews/` if it exists\n\n2. **Open the presentation**\n   - Use `open [filename].html` to launch in browser\n\n3. **Provide summary**\n```\nYour presentation is ready!\n\n📁 File: [filename].html\n🎨 Style: [Style Name]\n📊 Slides: [count]\n\n**Navigation:**\n- Arrow keys (← →) or Space to navigate\n- Scroll/swipe also works\n- Click the dots on the right to jump to a slide\n\n**To customize:**\n- Colors: Look for `:root` CSS variables at the top\n- Fonts: Change the Fontshare/Google Fonts link\n- Animations: Modify `.reveal` class timings\n\nWould you like me to make any adjustments?\n```\n\n---\n\n## Style Reference: Effect → Feeling Mapping\n\nUse this guide to match animations to intended feelings:\n\n### Dramatic / Cinematic\n- Slow fade-ins (1-1.5s)\n- Large scale transitions (0.9 → 1)\n- Dark backgrounds with spotlight effects\n- Parallax scrolling\n- Full-bleed images\n\n### Techy / Futuristic\n- Neon glow effects (box-shadow with accent color)\n- Particle systems (canvas background)\n- Grid patterns\n- Monospace fonts for accents\n- Glitch or scramble text effects\n- Cyan, magenta, electric blue palette\n\n### Playful / Friendly\n- Bouncy easing (spring physics)\n- Rounded corners (large radius)\n- Pastel or bright colors\n- Floating/bobbing animations\n- Hand-drawn or illustrated elements\n\n### Professional / Corporate\n- Subtle, fast animations (200-300ms)\n- Clean sans-serif fonts\n- Navy, slate, or charcoal backgrounds\n- Precise spacing and alignment\n- Minimal decorative elements\n- Data visualization focus\n\n### Calm / Minimal\n- Very slow, subtle motion\n- High whitespace\n- Muted color palette\n- Serif typography\n- Generous padding\n- Content-focused, no distractions\n\n### Editorial / Magazine\n- Strong typography hierarchy\n- Pull quotes and callouts\n- Image-text interplay\n- Grid-breaking layouts\n- Serif headlines, sans-serif body\n- Black and white with one accent\n\n---\n\n## Animation Patterns Reference\n\n### Entrance Animations\n\n```css\n/* Fade + Slide Up (most common) */\n.reveal {\n    opacity: 0;\n    transform: translateY(30px);\n    transition: opacity 0.6s var(--ease-out-expo),\n                transform 0.6s var(--ease-out-expo);\n}\n\n.visible .reveal {\n    opacity: 1;\n    transform: translateY(0);\n}\n\n/* Scale In */\n.reveal-scale {\n    opacity: 0;\n    transform: scale(0.9);\n    transition: opacity 0.6s, transform 0.6s var(--ease-out-expo);\n}\n\n/* Slide from Left */\n.reveal-left {\n    opacity: 0;\n    transform: translateX(-50px);\n    transition: opacity 0.6s, transform 0.6s var(--ease-out-expo);\n}\n\n/* Blur In */\n.reveal-blur {\n    opacity: 0;\n    filter: blur(10px);\n    transition: opacity 0.8s, filter 0.8s var(--ease-out-expo);\n}\n```\n\n### Background Effects\n\n```css\n/* Gradient Mesh */\n.gradient-bg {\n    background:\n        radial-gradient(ellipse at 20% 80%, rgba(120, 0, 255, 0.3) 0%, transparent 50%),\n        radial-gradient(ellipse at 80% 20%, rgba(0, 255, 200, 0.2) 0%, transparent 50%),\n        var(--bg-primary);\n}\n\n/* Noise Texture */\n.noise-bg {\n    background-image: url(\"data:image/svg+xml,...\"); /* Inline SVG noise */\n}\n\n/* Grid Pattern */\n.grid-bg {\n    background-image:\n        linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),\n        linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);\n    background-size: 50px 50px;\n}\n```\n\n### Interactive Effects\n\n```javascript\n/* 3D Tilt on Hover */\nclass TiltEffect {\n    constructor(element) {\n        this.element = element;\n        this.element.style.transformStyle = 'preserve-3d';\n        this.element.style.perspective = '1000px';\n        this.bindEvents();\n    }\n\n    bindEvents() {\n        this.element.addEventListener('mousemove', (e) => {\n            const rect = this.element.getBoundingClientRect();\n            const x = (e.clientX - rect.left) / rect.width - 0.5;\n            const y = (e.clientY - rect.top) / rect.height - 0.5;\n\n            this.element.style.transform = `\n                rotateY(${x * 10}deg)\n                rotateX(${-y * 10}deg)\n            `;\n        });\n\n        this.element.addEventListener('mouseleave', () => {\n            this.element.style.transform = 'rotateY(0) rotateX(0)';\n        });\n    }\n}\n```\n\n---\n\n## Troubleshooting\n\n### Common Issues\n\n**Fonts not loading:**\n- Check Fontshare/Google Fonts URL\n- Ensure font names match in CSS\n\n**Animations not triggering:**\n- Verify Intersection Observer is running\n- Check that `.visible` class is being added\n\n**Scroll snap not working:**\n- Ensure `scroll-snap-type` on html/body\n- Each slide needs `scroll-snap-align: start`\n\n**Mobile issues:**\n- Disable heavy effects at 768px breakpoint\n- Test touch events\n- Reduce particle count or disable canvas\n\n**Performance issues:**\n- Use `will-change` sparingly\n- Prefer `transform` and `opacity` animations\n- Throttle scroll/mousemove handlers\n\n---\n\n## Related Skills\n\n- **learn** — Generate FORZARA.md documentation for the presentation\n- **frontend-design** — For more complex interactive pages beyond slides\n- **design-and-refine:design-lab** — For iterating on component designs\n\n---\n\n## Example Session Flow\n\n1. User: \"I want to create a pitch deck for my AI startup\"\n2. Skill asks about purpose, length, content\n3. User shares their bullet points and key messages\n4. Skill asks about desired feeling (Impressed + Excited)\n5. Skill generates 3 style previews\n6. User picks Style B (Neon Cyber), asks for darker background\n7. Skill generates full presentation with all slides\n8. Skill opens the presentation in browser\n9. User requests tweaks to specific slides\n10. Final presentation delivered\n\n---\n\n## Conversion Session Flow\n\n1. User: \"Convert my slides.pptx to a web presentation\"\n2. Skill extracts content and images from PPT\n3. Skill confirms extracted content with user\n4. Skill asks about desired feeling/style\n5. Skill generates style previews\n6. User picks a style\n7. Skill generates HTML presentation with preserved assets\n8. Final presentation delivered\n\n## When to Use\nThis skill is applicable to execute the workflow or actions described in the overview.",
  "applicable_domains": [
    "frontend"
  ],
  "category": "frontend",
  "invocation": [
    "/frontend-slides"
  ],
  "authored_by": "claudeskills.in community",
  "source_url": "https://claudeskills.in/skill/frontend-slides",
  "provenance": {
    "source": "claudeskills.in",
    "source_url": "https://claudeskills.in/skill/frontend-slides",
    "license": "MIT",
    "imported_at": "2026-09-03",
    "notes": "Aggregated by claudeskills.in from community GitHub lists. Upstream as recorded by the aggregator: https://github.com/zarazhangrui/frontend-slides. License MIT read from github.com/zarazhangrui/frontend-slides on 2026-09-03."
  },
  "tags": [
    "claudeskills",
    "frontend",
    "risk-reviewed"
  ],
  "lifecycle": "draft"
}