Convert a document into an HTML Presentation using reveal.js.

V2V Phase

Cross-phase - Presentations can be created from deliverables in any phase.

Prerequisites: Source markdown document created Outputs used by: Stakeholder communication, decision meetings

Purpose

Every meaningful deliverable should have a presentation version for stakeholder communication.

Process

•Read the source markdown document
•
Extract key content:
- •Title and subtitle
- •Executive summary
- •Key sections
- •Tables and data
- •Metrics and KPIs
- •Conclusions and recommendations
•
Generate HTML slides:
- •Title slide with document name and date
- •Executive summary slide
- •Section slides (one per major section)
- •Data slides (tables as clean cards)
- •Metrics slides (KPIs as visual cards)
- •Summary/Next Steps slide
•Apply product-org theme styling
•Save as HTML file with same base name

Output Structure

html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>[Document Title]</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js@4/dist/reveal.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js@4/dist/theme/white.css">
    <style>
        /* Responsive styling */
        .reveal h1 { font-size: clamp(1.5rem, 5vw, 2.5rem); }
        .reveal h2 { font-size: clamp(1.2rem, 4vw, 2rem); }
        .reveal p, .reveal li { font-size: clamp(0.9rem, 2.5vw, 1.2rem); }
        .metric-card {
            background: linear-gradient(135deg, #f5f7fa 0%, #e4e8ec 100%);
            border-radius: 12px; padding: 20px; text-align: center;
        }
        .metric-value { font-size: 2.5rem; font-weight: bold; color: #2c5aa0; }
        .metric-label { font-size: 1rem; color: #666; }
    </style>
</head>
<body>
    <div class="reveal">
        <div class="slides">
            <!-- Slides generated from document -->
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/reveal.js@4/dist/reveal.js"></script>
    <script>Reveal.initialize({ touch: true, controls: true, progress: true });</script>
</body>
</html>

Slide Templates

Title Slide

•Document title
•Subtitle (if any)
•Date and author

Section Slide

•Section heading
•3-5 bullet points max
•Key takeaway

Metrics Slide

•3-4 metric cards
•Value prominently displayed
•Label underneath

Table Slide

•Clean table formatting
•Horizontal scroll on mobile
•Key insights highlighted

Summary Slide

•Key conclusions
•Recommended actions
•Next steps

Deliverables That Get Presentations

Deliverable	Auto-Present?
Strategic Bet	Yes
Decision Record	Yes
Decision Charter	Yes
Product Vision	Yes
Roadmap Theme	Yes
GTM Brief	Yes
Pricing Model	Yes
Competitive Analysis	Yes
Launch Readiness	Yes
Outcome Review	Yes
QBR	Yes
Feature Spec	On request
User Story	No

Instructions

•Specify the document path to convert
•The skill will read and parse the document
•Generate responsive HTML presentation
•Save with same base name but .html extension
•Presentation is immediately viewable in browser