Presentation Generator

Create production-grade HTML single-file presentations following the Vercel/Apple dark mode aesthetic.

Before Starting

CRITICAL: This skill depends on two other skills for quality output:

1. Use frontend-design skill - For distinctive, production-grade interfaces
2. Use web-design-guidelines skill - For Vercel Web Interface Guidelines compliance

Invoke both skills before generating the presentation to ensure design quality.

Arguments

Parse $ARGUMENTS for:

• Topic: Main subject of the presentation
• Slide count: Number of slides (default: 8)
• Style variant: dark (default), light, or custom
• Language: pt-BR (default) or en

Example: /presentation "Claude Code features" 10 slides dark en

Output Requirements

Generate a single HTML file containing:

• All CSS inline in <style> tag
• All JavaScript inline in <script> tag
• No external dependencies except Google Fonts (Geist)
• Responsive design (mobile to projector)

Visual Style Guide

See style-guide.md for complete visual specifications.

Quick reference:

• Background: #0a0a0a (primary), #141414 (cards)
• Text: #fafafa (primary), #a0a0a0 (secondary), #777 (tertiary)
• Accents: #3b82f6 (blue), #22c55e (green), #f59e0b (amber)
• Borders: #2a2a2a (default), #404040 (hover)
• Border radius: max 14px
• Typography: Geist (sans), Geist Mono (code)

Component Library

See components.md for reusable HTML/CSS patterns:

• Cards, grids (2/3/4 columns)
• Flow diagrams, progress bars
• Tables, badges, code blocks
• Terminal mockups, comparison cards
• Stats, quotes, feature lists

Slide Structure

Each presentation follows this hierarchy:

1. Hero          - Title, subtitle, CTA
2. Problem       - Pain points, before/after
3. Solution      - How it works, workflow
4. Features      - Grid of capabilities (3-6 items)
5. Demo/Example  - Code, terminal, visual proof
6. Stats         - Numbers that matter
7. Details       - Table, components, specs
8. CTA           - Call to action, next steps

Adapt based on content. Not all slides are required.

Technical Implementation

Navigation

• Scroll-snap: scroll-snap-type: y mandatory
• Keyboard: Arrow keys, Space, PageUp/Down, Home/End
• Touch: Swipe gestures for mobile
• Progress bar: 1px at top
• Slide counter: Bottom right, monospace

Animations

• Entry: fadeUp (translateY 30px → 0), scaleIn, slideRight
• Stagger: 100-150ms delay between elements
• Trigger: Intersection Observer on scroll
• Duration: 0.2-0.4s with ease
• Continuous: pulse for indicators only

Accessibility

• Semantic HTML (section, nav, button)
• ARIA labels on navigation
• Focus states with outline
• Sufficient color contrast
• Keyboard-navigable

Example Reference

See examples/minimal-dark.html for a complete working example.

Checklist Before Delivery

• Single HTML file, no external JS/CSS
• All 8 core slides present (or adapted)
• Dot grid background with fade
• Keyboard navigation working
• Touch/swipe support
• Progress bar updating
• Animations triggering on scroll
• Responsive on mobile
• No emojis
• No gradients or glassmorphism