--- id: unclecatvn/agent-skills/slide version: "4bbe310a" license: MIT install: manual updated: 2026-07-14 --- # ai-vibe-slides — AI Vibe Slides turns your ideas into polished, browser-ready presentations in a single self-contained HTML file. Choose from multiple design directions—startup bold, academic clean, tech modern, or creative colorful—and navigate via keyboard or click. Perfect for pitches, talks, and reports that need to look sharp and present immediately. Publisher: unclecatvn · Stars: 116 · Updated: 2026-07-14 Install (manual): `git clone https://github.com/unclecatvn/agent-skills` ## SKILL.md # 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. [View on SkillFed](https://skillfed.io/unclecatvn/agent-skills/slide) · [View on GitHub](https://github.com/unclecatvn/agent-skills)