name: interactive-presentation-generator
description: Generate interactive presentation from an outline or brief. Creates markdown-based presentations (Marp/Slidev/reveal.js) or standalone HTML presentations. Use when user asks to create slides, make a presentation, or generate a deck from an outline.

Interactive Presentation Generator

Generate professional interactive presentations with customizable styles, supporting markdown or standalone HTML formats.

Supported Formats

Primary Format (Recommended):
- reveal.js HTML: Standalone, full-featured HTML presentation with custom styling, themes, transitions, and interactive elements. Works in any browser, no build required.

Alternative Formats:
- Marp: Lightweight markdown with YAML frontmatter, PDF export capability (best for text-heavy slides)
- Slidev: Vue-powered presentations with interactive components and live coding (best for technical talks)

Available Styles

✨ This skill includes 20 professionally designed styles - ready to use out of the box!

All styles are bundled in the ./styles/ directory. No additional setup required.

You can also use custom styles by:
- Setting environment variable: $STYLE_YAML_DIR to point to your own style directory
- Specifying external path at runtime

Included style directory structure:

styles/
├── editorial/        (3 styles)
├── minimalist/       (3 styles)
├── technical/        (2 styles)
├── traditional/      (4 styles)
├── creative/         (1 style)
├── energetic/        (1 style)
├── material/         (1 style)
├── artistic/         (1 style)
├── experimental/     (1 style)
├── avant-garde/      (1 style)
├── product/          (1 style)
└── futuristic/       (1 style)

Style Categories:

• Editorial (3 styles): fashion-layout, red-editorial, kinfolk-editorial
• Minimalist (3 styles): blue-mono, japanese-minimal, swiss-clean
• Technical (2 styles): blueprint, cyber-neon
• Traditional (4 styles): byobu, kabuki-gold, ukiyo-e, japonism-flow
• Creative (1 style): digital-pop
• Energetic (1 style): sports-active
• Material (1 style): stone-glass
• Artistic (1 style): oneline-chic
• Experimental (1 style): sculpture-pop
• Avant-garde (1 style): neon-collage
• Product (1 style): premium-mockup
• Futuristic (1 style): digital-twin

Workflow

Step 1: Gather Requirements

Ask the user (using AskUserQuestion if needed):
- Content source: Direct text, outline, or topic to develop
- Presentation purpose: Conference talk, internal meeting, educational, product launch, etc.
- Target audience: Technical, business, general public, creative professionals
- Estimated duration: 5min, 15min, 30min, 1hour
- Visual assets:
- Cover image: URL, file path, or use style default
- Ending image: URL, file path, or use style default
- Logo: Optional, URL or file path
- Footer settings:
- Company name
- Author name
- Custom text
- Enable/disable footer

Step 2: Choose Style

1. List available styles by reading YAML files from style directory
2. Present style options grouped by category, showing:
3. Style name (English, Traditional Chinese, Japanese)
4. Description
5. Tags (to help user understand the aesthetic)
6. Recommended use cases (if available)
7. Allow user to select or provide custom style YAML path
8. Load style YAML and extract design settings:
9. Color palette
10. Typography (fonts, sizes, weights)
11. Layout rules and safe areas
12. Visual motifs and decorative elements

Step 3: Choose Output Format

Recommend reveal.js HTML for best results with style customization.

Alternative formats available:
- Marp: For straightforward presentations (5-15 slides) with PDF export needs
- Slidev: For technical presentations with code examples and live coding demos

If user chooses reveal.js HTML (recommended), the style YAML will be fully applied with:
- Custom CSS for colors, fonts, and layouts
- Background images for cover and ending slides
- Footer with template variables
- Decorative elements from visual motifs

Step 4: Generate Content Structure

Develop a complete slide plan based on the selected style's layout variations:

Title Slide (follows style's "Title Slide" layout)
- Presentation title
- Subtitle (optional)
- Author/date
- Cover image (user-provided or style default)
- No footer (as per requirement)

Content Slides (follows style's "Content Slide" layout)
For each main point:
- Clear, action-oriented title
- 3-6 bullet points (or visual content)
- Speaker notes
- Full footer with variables:
- {{PAGE_NUMBER}} / {{TOTAL_PAGES}}
- {{COMPANY_NAME}}
- {{AUTHOR}}
- {{DATE}}
- Custom text

Special Slides
- Agenda/Overview (for longer presentations)
- Section dividers (follows style guidelines)
- Data slides (follows style's "Data Slide" layout if available)
- Summary/Key Takeaways (follows style's "Summary Slide" layout)
- Q&A/Contact slide (ending image, no footer or simplified)

Ending Slide
- Thank you message or final CTA
- Contact information
- Ending image (user-provided or style default)
- No footer or simplified version

Step 5: Generate Files

Based on the chosen format, create:

For Marp:

---
marp: true
theme: default
paginate: true
---

# Title
Subtitle

---

## Slide Title
- Point 1
- Point 2

For Slidev:

---
theme: default
background: https://picsum.photos/collection/94734566/1920x1080
class: text-center
highlighter: shiki
---

# Title
Subtitle

---

## Slide Title
Content here

For reveal.js Markdown:

# Title
Subtitle

---

## Slide Title
- Point 1
- Point 2

---

For reveal.js HTML (Primary Format):

Create a complete standalone HTML file with custom styling from YAML:

1. HTML Head with Custom Styling:
- Load reveal.js v5.0.4+ from CDN
- Extract and apply colors from color_palette in YAML
- Extract and apply typography from YAML (font families, sizes, weights)
- Add decorative elements from visual_motifs (grids, lines, patterns)
- Implement footer styling with template variables

2. Slide Structure:
- Title slide: class="no-footer", background image, follows "Title Slide" layout from YAML
- Content slides: Full footer, follows "Content Slide" layout from YAML
- Data slides: If applicable, follows "Data Slide" layout from YAML
- Summary slide: Follows "Summary Slide" layout from YAML
- Ending slide: class="no-footer", ending background image

3. Footer Implementation:
- Fixed position footer with three zones: left, center, right
- Template variables replaced: {{COMPANY_NAME}}, {{AUTHOR}}, {{DATE}}, {{PAGE_NUMBER}}, {{TOTAL_PAGES}}
- Hidden on title and ending slides via CSS class .no-footer
- Styled according to YAML or sensible defaults

4. JavaScript Configuration:
- Initialize reveal.js with plugins (notes, highlight, zoom, search)
- Custom slidechanged event to update page numbers in footer
- Respect safe areas from YAML layout variations

Template Variables to Replace:
- {{TITLE}}, {{SUBTITLE}}, {{AUTHOR}}, {{DATE}}
- {{COMPANY_NAME}}, {{CONTACT_INFO}}
- {{COVER_IMAGE}}, {{ENDING_IMAGE}}
- Color variables from YAML (with fallbacks)
- Font variables from YAML (with fallbacks)
- Safe area variables (default to 60px if not specified)

Critical: Provide Default Values
- All CSS variables must have fallback values to prevent invalid CSS
- If YAML is missing a color key (e.g., accent_2), use sensible default (e.g., #999999)
- If safe area values are missing, default to 60px for all sides
- If font family is missing, fallback to web-safe fonts (e.g., Arial, sans-serif)
- Example: {{COLOR_PRIMARY}} → if missing, use #000000

Step 6: Add Enhancements

Based on content type and style YAML, include:

Code Examples (if technical content)
- Syntax highlighting using reveal.js highlight plugin
- Line numbers
- Line highlighting for emphasis
- Use monospace fonts from YAML or defaults

Visual Elements
- Images (user-provided or Unsplash placeholders)
- Charts following style's color palette
- Diagrams respecting visual motifs from YAML
- Tables styled with YAML colors

Interactive Features (HTML only)
- Fragment animations (reveal items one by one)
- Vertical slides for detailed breakdowns
- Speaker notes for all major slides
- PDF export capability via print

Styling from YAML
- Apply decorative elements from visual_motifs
- Implement grid systems if specified
- Add patterns, lines, or other decorative elements
- Respect safe areas and content zones
- Follow spacing philosophy and alignment principles

Step 7: Provide Instructions

Include a brief guide at the end of generation:

For reveal.js HTML:
- Open: Double-click the HTML file or open in any modern browser
- Present: Press 'F' for fullscreen, 'S' for speaker view with notes
- Navigate: Arrow keys, space bar, or on-screen controls
- Overview: Press 'O' to see all slides at once
- Search: Press Ctrl+Shift+F to search in slides
- Export to PDF:
1. Open in Chrome/Chromium
2. Add ?print-pdf to the URL (e.g., file:///path/slides.html?print-pdf)
3. Print to PDF (Ctrl/Cmd+P)
- Customize: Edit the HTML file to modify content, colors, or layout
- Keyboard shortcuts: Press '?' to see all available shortcuts

For Alternative Formats:
- Marp: npx @marp-team/marp-cli@latest --preview slides.md (preview), export to PDF/HTML
- Slidev: npx slidev slides.md (dev server), npx slidev build (production build)

Content Guidelines

Slide Design Principles

• One idea per slide: Don't overcrowd
• Visual hierarchy: Title → key point → details
• Consistent style: Same fonts, colors, spacing
• Readable text: Minimum 24pt font size
• High contrast: Dark text on light background or vice versa

Writing Guidelines

• Use short, punchy sentences (max 15 words per bullet)
• Avoid paragraphs (use 3-6 bullets per slide)
• Action-oriented titles (verbs, not nouns)
• Include transitions between major sections
• Add speaker notes for points that require >30 seconds to explain

Technical Content

• Show code in focused snippets (max 15 lines per slide)
• Explain each code block's purpose
• Use syntax highlighting with language tags
• Consider live coding for demos (Slidev only)

Example Prompts

• "Create a 15-minute presentation on microservices architecture"
• "Generate slides for my product launch in reveal.js"
• "Make a Marp presentation about Python best practices"
• "Turn this outline into an interactive HTML presentation"

Style YAML Integration

Loading Style YAML

1. Locate style directory:
2. Check environment variable $STYLE_YAML_DIR
3. If not set, use ./styles/ within skill directory
4. If not found, ask user for style directory path
5. List available styles by using Glob tool on ${STYLE_DIR}/**/*.yaml
6. Present options grouped by category directory (editorial, minimalist, technical, etc.)
7. Read selected YAML using Read tool
8. Parse YAML and extract:
9. template_metadata: id, name, description, tags
10. overall_design_settings.color_palette: All color variables
11. overall_design_settings.typography: Fonts, sizes, weights, line heights
12. overall_design_settings.visual_motifs: Decorative elements, grids, patterns
13. layout_variations: Specific layouts for different slide types

Applying Style to HTML

CSS Variables with Fallbacks:

:root {
  --color-base: /* from color_palette.base, fallback: #FAFAFA */;
  --color-primary: /* from color_palette.primary, fallback: #000000 */;
  --color-text: /* from color_palette.text, fallback: #1A1A1A */;
  --color-background: /* from color_palette.background, fallback: #FFFFFF */;
  --color-accent-1: /* from color_palette.accent_1, fallback: #E63946 */;
  --color-accent-2: /* from color_palette.accent_2, fallback: #999999 */;
  --color-highlight: /* from color_palette.highlight, fallback: #F1F1F1 */;

  --font-heading: /* from typography.heading.font_family, fallback: Arial, sans-serif */;
  --font-body: /* from typography.body.font_family, fallback: Arial, sans-serif */;
  /* ... other typography settings with fallbacks */
}

CRITICAL: Handle Missing YAML Keys
When extracting values from YAML:
1. Check for key existence before accessing
2. Provide sensible defaults for all missing values:
- Colors: Use neutral grays or high-contrast defaults
- Fonts: Use web-safe font stacks
- Sizes: Use standard values (16pt body, 40-48pt heading, 12pt footer)
- Spacing: Use 60px as standard safe area
3. Log warnings (mentally note) when using fallbacks
4. Never generate empty CSS values (e.g., color: ;)

Visual Motifs Implementation:
- If grid type: Add CSS background grid pattern
- If line type: Add decorative borders or dividers
- If pattern type: Add SVG or CSS patterns as backgrounds
- Use specified colors and opacity from YAML

Image Assets Management

Default Image Sources:
- Unsplash collections for placeholder images
- Use relevant keywords based on style category
- Example: Technical styles → https://picsum.photos/1920x1080/?technology,blueprint

User-Provided Images:
- Accept file paths (relative or absolute)
- Accept URLs (http/https)
- Validate image format (jpg, png, svg, gif)
- Apply as data-background-image in reveal.js

Logo Placement:
- Position based on user preference or style defaults
- Common positions: top-right, bottom-right, bottom-left
- Size constraints: max 100px height for balance

Footer Variables Reference

Footer Layout Zones:
- Left: Typically company name or event name
- Center: Author or presentation title
- Right: Date and page numbers

Style Preview (Optional Feature)

When presenting style options, include:
- Style name in all supported languages
- Description highlighting key characteristics
- Tags showing aesthetic keywords
- Recommended use cases (if available in YAML)
- Example: "Blueprint - Technical drawing aesthetic with grid systems. Recommended for: engineering presentations, technical documentation."

This helps users make informed decisions without needing full previews.

Error Handling

File Operations

1. Style YAML Loading:
2. Check if style directory exists before globbing
3. Handle file read errors gracefully
4. Provide clear error message: "Style directory not found at [path]. Please set $STYLE_YAML_DIR or use default location."

5. If YAML parsing fails, inform user which file has syntax errors

6. Image Assets:

7. Validate image URLs/paths before using
8. Check file extensions: .jpg, .jpeg, .png, .svg, .gif, .webp
9. For URLs: Verify protocol is http or https
10. For file paths: Check file exists and is readable
11. Fallback: Use placeholder service if validation fails

12. Error message: "Image at [path] is invalid or inaccessible. Using placeholder instead."

13. Template Variable Replacement:

14. Never leave unreplaced variables (e.g., {{UNDEFINED_VAR}})
15. If a required variable is missing, use sensible default or empty string
16. Log (mentally note) which variables were not provided

User Input Validation

1. Content Input:
2. Check that outline/content is not empty
3. Minimum requirement: 1 slide title

4. If too vague, ask clarifying questions before generating

5. File Paths:

6. Validate absolute vs relative paths
7. Check for directory traversal attempts (../, ..\\)

8. Normalize paths before use

9. URLs:

10. Validate URL format before using
11. Allow only http, https, file protocols
12. Reject javascript:, data:, or other potentially malicious schemes

Generation Errors

1. CSS Generation:
2. Validate color hex codes (must start with # and be 3, 4, 6, or 8 characters)
3. Validate font family names (no special characters except hyphens, spaces, commas)

4. Ensure all CSS values have proper units (px, pt, em, rem, %)

5. HTML Generation:

6. Escape special HTML characters in user content (<, >, &, ", ')
7. Validate that generated HTML is well-formed (matching tags)
8. Check for unclosed tags or malformed attributes

Security Considerations

Input Sanitization

1. XSS Prevention:
2. Critical: Escape all user-provided content before injecting into HTML
3. Use HTML entity encoding for: < → <, > → >, & → &, " → ", ' → '
4. Never allow raw <script> tags from user input

5. Sanitize slide titles, bullet points, speaker notes, footer text, company name, author name

6. URL Safety:

7. Validate all user-provided URLs
8. Reject dangerous protocols: javascript:, data:, vbscript:
9. Allow only: http:, https:, file: (for local images)

10. Example check: URL must match pattern ^(https?|file):\/\/.+

11. File Path Safety:

12. Prevent directory traversal attacks
13. Reject paths containing ../ or ..\
14. For local files, ensure paths are within expected directories
15. Never execute or eval file contents

Content Safety

1. Style YAML:
2. YAML files are trusted (assumed to be from legitimate source)

3. However, validate extracted values before using:

   • Colors must be valid hex codes or CSS color names
   • Fonts must not contain executable code
   • URLs in visual motifs must be validated

4. Generated HTML:

5. The generated HTML is a local file, not served publicly
6. Risk of XSS is low (user would be attacking themselves)
7. However, still apply sanitization as best practice

8. Consider adding CSP (Content Security Policy) meta tag:
   html <meta http-equiv="Content-Security-Policy" content="default-src 'self' https://cdn.jsdelivr.net; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; font-src 'self' https://fonts.gstatic.com; script-src 'self' 'unsafe-inline' https://cdn.jsdelivr.net; img-src 'self' https: data:;">

9. Speaker Notes:

10. Speaker notes may contain sensitive information
11. Remind user that speaker notes are visible in HTML source
12. Suggest not including passwords, API keys, or confidential data

Dependencies

1. CDN Integrity:
2. Consider adding Subresource Integrity (SRI) hashes for CDN resources
3. Example: <script src="..." integrity="sha384-..." crossorigin="anonymous"></script>

4. This prevents tampering if CDN is compromised

5. Google Fonts:

6. Loading fonts from Google is generally safe
7. However, privacy-conscious users may prefer self-hosted fonts
8. Provide option to use system fonts only

Notes

• Always ask for clarification if the outline is too vague
• Expand minimal outlines (< 3 bullet points per topic) into complete slides with 5-7 bullet points
• Suggest visual elements (charts, diagrams, images) for data-heavy or conceptual slides
• Include speaker notes for topics requiring >30 seconds to explain
• Provide both the presentation file and usage instructions
• For HTML presentations, ensure they're self-contained and work offline
• When applying YAML styles, respect the design philosophy and tone specified
• Test that all template variables are properly replaced before delivery
• Ensure generated HTML is valid and works across modern browsers