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