Create polished, professional reveal.js presentations. Use when the user asks to create slides, a presentation, a deck, or a slideshow. Supports themes, multi-column layouts, code highlighting, animations, speaker notes, and custom styling. Generates HTML + CSS with no build step required.

Reveal.js Presentations Create HTML presentations using reveal.js. No build step required just open the HTML in a browser. What You Create A reveal.js presentation consists of: 1. HTML file Contains slides and loads reveal.js from CDN 2. CSS file Custom styles for layouts, colors, typography, and components Design Principles CRITICAL : Before creating any presentation, analyze the content and choose appropriate design elements: 1. Consider the subject matter : What is this presentation about? What tone, industry, or mood does it suggest? 2. Check for branding : If the user mentions a company/organization, consider their brand colors and identity 3. Match palette to content : Select colors that reflect the subject 4. State your approach : Explain your design choices before writing code Requirements : ✅ State your content informed design approach BEFORE writing code ✅ Use web safe fonts (Arial, Helvetica, Georgia, Verdana, etc.) or Google Fonts via @import in CSS ✅ Create clear visual hierarchy through size, weight, and color ✅ Ensure readability: strong contrast, appropriately sized text, clean alignment ✅ Be consistent: repeat patterns, spacing, and visual language across slides ✅ Always use pt (points) for font sizes slides are fixed size, so pt is predictable and familiar (like PowerPoint/Keynote). Never use em , rem , or px for font sizes. Color Palette Selection Choosing colors creatively : Think beyond defaults : What colors genuinely match this specific topic? Avoid autopilot choices. Consider multiple angles : Topic, industry, mood, energy level, target audience, brand identity (if mentioned) Be adventurous : Try unexpected combinations a healthcare presentation doesn't have to be green, finance doesn't have to be navy Build your palette : Pick 3 5 colors that work together (dominant colors + supporting tones + accent) Ensure contrast : Text must be clearly readable on backgrounds Example color palettes (use these to spark creativity choose one, adapt it, or create your own): 1. Classic Blue : Deep navy ( 1C2833), slate gray ( 2E4053), silver ( AAB7B8), off white ( F4F6F6) 2. Teal & Coral : Teal ( 5EA8A7), deep teal ( 277884), coral ( FE4447), white ( FFFFFF) 3. Bold Red : Red ( C0392B), bright red ( E74C3C), orange ( F39C12), yellow ( F1C40F), green ( 2ECC71) 4. Warm Blush : Mauve ( A49393), blush ( EED6D3), rose ( E8B4B8), cream ( FAF7F2) 5. Burgundy Luxury : Burgundy ( 5D1D2E), crimson ( 951233), rust ( C15937), gold ( 997929) 6. Deep Purple & Emerald : Purple ( B165FB), dark blue ( 181B24), emerald ( 40695B), white ( FFFFFF) 7. Cream & Forest Green : Cream ( FFE1C7), forest green ( 40695B), white ( FCFCFC) 8. Pink & Purple : Pink ( F8275B), coral ( FF574A), rose ( FF737D), purple ( 3D2F68) 9. Lime & Plum : Lime ( C5DE82), plum ( 7C3A5F), coral ( FD8C6E), blue gray ( 98ACB5) 10. Black & Gold : Gold ( BF9A4A), black ( 000000), cream ( F4F6F6) 11. Sage & Terracotta : Sage ( 87A96B), terracotta ( E07A5F), cream ( F4F1DE), charcoal ( 2C2C2C) 12. Charcoal & Red : Charcoal ( 292929), red ( E33737), light gray ( CCCBCB) 13. Vibrant Orange : Orange ( F96D00), light gray ( F2F2F2), charcoal ( 222831) 14. Forest Green : Black ( 191A19), green ( 4E9F3D), dark green ( 1E5128), white ( FFFFFF) 15. Retro Rainbow : Purple ( 722880), pink ( D72D51), orange ( EB5C18), amber ( F08800), gold ( DEB600) 16. Vintage Earthy : Mustard ( E3B448), sage ( CBD18F), forest green ( 3A6B35), cream ( F4F1DE) 17. Coastal Rose : Old rose ( AD7670), beaver ( B49886), eggshell ( F3ECDC), ash gray ( BFD5BE) 18. Orange & Turquoise : Light orange ( FC993E), grayish turquoise ( 667C6F), white ( FCFCFC) Slide Content Principles Diverse presentation is key. Even when slides have similar content types, vary the visual presentation: Use different layouts across slides: columns on one, stacked containers on another, styled cards on a third Mix container styles: plain text, custom styled containers, blockquotes Use visual hierarchy : <strong for key terms, different colors to distinguish categories Break up lists with other elements (quotes, styled containers, columns) Don't repeat the same layout pattern on consecutive slides Keep it scannable: Short bullet points, not paragraphs One main idea per slide when possible Use icons (Font Awesome) to add visual interest When a slide has less content, make it bigger don't leave empty space with tiny text. Workflow Step 1: Plan the Structure Based on the user's content, determine: How many slides are needed Which slides should be section dividers (centered, larger text) Where to use vertical slide stacks for drill down content Step 2: Generate the Scaffold Use the create presentation.js script (located in the scripts/ directory next to this SKILL.md file) to generate the HTML scaffold. Finding the script path: The script is at scripts/create presentation.js relative to where this SKILL.md file is located. Common locations: Project skill: .claude/skills/revealjs/scripts/create presentation.js User skill: ~/.claude/skills/revealjs/scripts/create presentation.js Options: slides N Create N horizontal slides (simple mode) structure <list Mixed layout with comma separated values: 1 = single horizontal slide N (where N 1) = vertical stack of N slides d = section divider slide (centered, no content wrapper) output <file Output filename (default: presentation.html) title <text Presentation title styles <file Custom CSS filename (default: styles.css) Examples: Step 3: Customize the CSS The scaffold script automatically copies base styles.css to your presentation directory as styles.css . Now customize the CSS variables (especially colors) for your presentation theme. Using Google Fonts: Add an @import at the top of your CSS file: The base file includes: 1. CSS Variables for easy customization: 2. Override reveal.js styles using .reveal prefix: 3. Slide layout styles control padding and positioning: 4. Text size utilities (use these to scale up text when slides have less content): Typography guidance: Base text ( text size: 16pt ) is intentionally small to fit more content When a slide has less content, use .text lg , .text xl , etc. to fill space appropriately This approach prevents overflow on content heavy slides while allowing flexibility on lighter slides Custom CSS classes for repeated patterns: Use inline styles for layout (grids, flex containers) since those vary per slide. But when a visual pattern appears on multiple slides, create a dedicated CSS class in styles.css instead of repeating inline styles. This keeps the HTML clean and ensures consistency. Common examples: stat boxes (number + label), feature cards (icon + title + description), timeline/process steps, profile/bio cards. If an element repeats 3+ times, it should be a class. Step 4: Fill in the HTML Content IMPORTANT: Use the Edit tool to fill in slides incrementally — one or a few slides at a time. Do NOT rewrite the entire HTML file with the Write tool. The scaffold generates unique placeholder text per slide (e.g., Slide 2 Title Here ), so each section can be targeted with Edit. This is more token efficient and less error prone than generating the full file at once. Follow these patterns: Standard slide structure: Multi column layouts always use inline CSS grid (do NOT create utility classes like .grid 2 ): Why inline styles for grids? Each slide's layout needs vary column ratios, gaps, etc. Inline styles give you full control per slide without creating dozens of utility classes. Important HTML patterns: Every <section should have a unique id attribute for stable identification Use class="section divider" for centered section title slides Wrap main content in <div class="content" for consistent spacing. This is a flexbox container that fills the remaining vertical space below the title, ensuring content flows properly. Use <div class="footnote" for attribution or source text at bottom All visible text must be inside a text element ( <p , <li , or <h1 – <h6 ). These elements inherit the base font size, color, and line height from the CSS. Never put text directly in <span or <div — they won't pick up the base styles and will render at the wrong size. Use <div only as a layout container (for grids, flexbox, etc.), with <p elements inside it for the actual text. Step 5: Check for Content Overflow Run the overflow checker to ensure no slides have content that extends beyond boundaries: The script checks each slide for: Vertical overflow : Content taller than slide height Horizontal overflow : Content wider than slide width If overflow is detected, reduce content or adjust font sizes on affected slides. Step 6: Visual Review with Screenshots CRITICAL: You MUST review screenshots of EVERY SINGLE SLIDE. Do not skip slides or review only a sample. Visual issues are common and can only be caught by examining each slide individually. Capture screenshots of all slides: Note: The ?export query parameter disables chart animations for cleaner PDF rendering. Charts will still animate when viewing the HTML directly in a browser. This creates a timestamped folder (e.g., screenshots/20241210 143052/ ) so you can track versions and compare before/after fixes. Then use the Read tool to examine each screenshot image file. What to Look For The overflow script catches most layout issues, but these problems require visual inspection: 1. Color inheritance in containers : Text inside styled containers may inherit the wrong color from parent elements. If you have light text on a dark page background, text inside a light colored container will be unreadable unless you explicitly set dark text color for that container. 2. Custom bullet/list styling : If you override default list styles, bullets may not contrast well on all container backgrounds. 3. Icons not rendering : If Font Awesome fails to load, you'll see empty squares or nothing where icons should be. 4. Overflow edge cases : The script catches most overflow, but complex nested layouts occasionally slip through. 5. Unexpected text wrap : Text that you expected to fit on one line actually overflows to two lines. This is especially common in column layouts, where the header of one column may wrap while the rest don't, making things uneven. Re capture specific slides after fixes: Then re examine the updated screenshots to verify fixes. The new timestamped folder makes it easy to compare with the previous version. Step 7: Suggest Browser Editing After completing the presentation, let the user know they can edit text directly in the browser using the included editor script: This opens the presentation in a local server where they can click any text to edit it inline, then save changes back to the file. It's useful for wordsmithing, fixing typos, or tweaking copy without needing to edit raw HTML. Always mention this at the end of a presentation as a suggestion, e.g.: To fine tune the wording, you can edit text directly in the browser: Click any text to edit, press Escape to deselect, then click Save. Press Ctrl+C to stop the server when done. CSS Components Reference Blockquotes Icons (Font Awesome) Font Awesome is included in the scaffold. Usage: Advanced Features For fragments (progressive reveal), speaker notes, custom backgrounds, auto animate, and transitions, see [references/advanced features.md](references/advanced features.md). Reveal.js Configuration Note on center : Default is false (content aligns to top), which works best for content heavy slides. Set to true for minimal/creative presentations where you want content vert