present by yohayetsion/product-org-os

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

Vision to Value 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

<!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