fatby/frontend-slides

--- 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 talk/pitch. Helps non-designers discover their aesthetic through visual exploration rather than abstract choices. --- # 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): | Mood | Style Options | |------|---------------| | Impressed/Confident | "Corporate Elegant", "Dark Executive", "Clean Minimal"