--- name: ai-vibe-slides description: "Create beautiful, professional HTML or React slide decks ready for fullscreen presentation. Use this skill when the user wants to: create a PPT/slide/presentation from an idea or outline; build a visually stunning slide deck from existing content; generate an HTML presentation that can be projected fullscreen; convert a document into a presentation. Trigger when you hear: 'create slides', 'make a PPT', 'presentation', 'slide deck', 'pitch deck', 'vibe ppt', 'make a talk', or any request to create a presentation. This skill produces a single self-contained HTML/React artifact — no backend, no installation, no dependencies." --- # AI Vibe Slides — Beautiful HTML Slide Decks, Ready to Present ## Goal Produce **a single HTML or React artifact file** containing a complete slide deck that can: - Present fullscreen directly in the browser - Navigate via arrow keys, spacebar, or click - Look professional, polished, and stylistically consistent - Print or export to PDF when needed Inspired by [banana-slides](https://github.com/Anionex/banana-slides): a 3-step pipeline of **Idea → Outline → Finished Slides**, but the output is a self-contained HTML file instead of a fullstack application. --- ## Slide Creation Pipeline ### Step 1: Understand the Request → Build an Outline When the user provides a request, first **build an outline mentally** (no need to display it unless the user asks): 1. Identify the **main topic** and **target audience** (students, business, tech talk...) 2. Break it into **logical sections**: - Slide 1: Cover (title + subtitle + author) - Slides 2-3: Introduction / context - Middle slides: Core content (one key idea per slide) - Final slide: Conclusion / Call to action / Thank you 3. Each slide should have: a title, 2-5 bullet points or visual content, and a layout type If the user only gives a short sentence (e.g., "create slides about AI in healthcare"), automatically expand it into 8-12 slides with a logical structure. ### Step 2: Choose a Design Direction Based on context, commit to **one clear design direction**: | Context | Suggested Style | | ---------------------- | ----------------------------------------------------- | | Startup pitch deck | Bold, dark theme, gradient accents, strong sans-serif | | Academic / education | Clean, light, diagram-heavy, readable fonts | | Tech talk / conference | Modern dark, code-style typography, neon accents | | Corporate / report | Minimal, professional, navy/white, serif headings | | Creative / marketing | Colorful, asymmetric layout, bold typography | | Kids / early education | Pastel, rounded corners, playful icons, large text | General rules: - **Pick 2-3 primary colors** and use them consistently across the entire deck - **1 heading font + 1 body font** (use Google Fonts) - **Minimal text, generous whitespace** — max 5-6 lines per slide - **Clear visual hierarchy**: large title → medium content → small notes ### Step 3: Generate the HTML/React Slide Deck Create **a single file** (`.html` or `.jsx`) containing everything: --- ## HTML Slide Deck Structure ```html {Presentation Title}
Topic

Main Title

Short subtitle description

Author — Date

Slide Title

1 /
← → or click to navigate
``` --- ## Slide Layout Types Each slide should use the layout that best fits its content: ### 1. Cover Slide - Centered, extra-large font, gradient background - Topic badge + main title + subtitle + author ### 2. Section Divider - Only section title + number, accent color background - Used to separate major sections of the presentation ### 3. Content + Bullets - Left-aligned title + list of key points - Use icons/emoji at the start of each bullet instead of plain dots ### 4. Two-Column - `.two-column` layout: text on left, visuals/list/cards on right - Great for comparisons, before-after, text+illustration ### 5. Cards Grid - 2-3 column grid, each card containing icon + title + short description - Great for features, benefits, team members ### 6. Big Number / Statistic - Huge number in the center (font-size: 5rem+) + small label below - Great for data points, KPIs, impact numbers ### 7. Quote / Highlight - Large text, centered, with decorative quotation marks - Different background (light accent color) ### 8. Timeline / Steps - Horizontal or vertical flexbox, dots connecting each step - Great for processes, roadmaps, history ### 9. Thank You / CTA - Centered, simple, contact info or call to action --- ## MANDATORY Design Rules 1. **16:9 aspect ratio**: Always use `width: 100vw; height: 100vh` — each slide fills the entire screen 2. **Minimal text**: Maximum 6 lines per slide. If content is long → split into multiple slides 3. **Large font sizes**: Heading ≥ 2.4rem, body ≥ 1.3rem — must be readable on a projector 4. **High contrast**: Text must be clearly legible against its background. Verify visually 5. **Consistency**: Same fonts, same color palette, same spacing throughout the entire deck 6. **No placeholder images**: Never use ``. Replace with CSS shapes, gradients, icons (emoji or Lucide for React), or inline SVGs 7. **Subtle animation**: Only fadeIn on slide transition. No complex animations that distract 8. **Responsive fullscreen**: Must work well at all screen sizes 9. **Print-ready**: Include `@media print` rules so each slide becomes one printed page --- ## When Using React (.jsx) Instead of HTML If creating a React artifact, use this pattern: ```jsx import { useState, useEffect, useCallback } from "react"; const slides = [ { type: "cover", title: "...", subtitle: "..." }, { type: "content", title: "...", points: ["...", "..."] }, { type: "twoColumn", title: "...", left: "...", right: "..." }, // ... ]; export default function SlideDeck() { const [current, setCurrent] = useState(0); const next = useCallback( () => setCurrent((c) => (c + 1) % slides.length), [], ); const prev = useCallback( () => setCurrent((c) => (c - 1 + slides.length) % slides.length), [], ); useEffect(() => { const handleKey = (e) => { if (e.key === "ArrowRight" || e.key === " ") next(); if (e.key === "ArrowLeft") prev(); if (e.key === "f") document.documentElement.requestFullscreen?.(); }; window.addEventListener("keydown", handleKey); return () => window.removeEventListener("keydown", handleKey); }, [next, prev]); const renderSlide = (slide) => { switch (slide.type) { case "cover": return /* cover layout */; case "content": return /* content layout */; case "twoColumn": return /* two-column layout */; // ... } }; return (
(e.clientX > window.innerWidth / 2 ? next() : prev())} style={{ fontFamily: "'Outfit', sans-serif" }} > {renderSlide(slides[current])}
{current + 1} / {slides.length}
); } ``` Advantages of React: Tailwind CSS utilities, Lucide icons, more complex logic, recharts for charts. --- ## Pre-Delivery Checklist - [ ] Correct number of slides (cover + content + closing) - [ ] Arrow keys ← → work, click navigates - [ ] Counter displays correct "X / N" - [ ] Press F for fullscreen - [ ] All text is readable with sufficient contrast - [ ] No broken images or placeholders - [ ] Google Fonts load correctly (or good fallback) - [ ] Print/PDF exports properly (`@media print`) - [ ] Consistent style throughout the entire deck - [ ] Each slide has exactly one key idea, not overloaded with text --- ## Natural Language Editing After initial creation, the user can request modifications: - "Switch to a light theme" → update CSS variables - "Add 2 slides about case studies" → insert slides into the array - "Slide 3 has too much text, split it" → refactor content across slides - "Change the font to Playfair Display" → update Google Fonts link + CSS - "Add a chart to slide 5" → use CSS chart or recharts (React) On each edit, keep unchanged slides intact and only update what the user requested.