From html-presentations
Generates HTML presentations from markdown specs with slides for titles, bullets, quotes, images, mermaid diagrams, and galleries. Auto-activates on presentation or slideshow requests.
npx claudepluginhub dexhorthy/slopfiles --plugin html-presentationsThis skill uses the workspace's default tool permissions.
Convert a markdown spec file into an HTML presentation using the Poimandres-themed template.
examples/spec.mdscripts/create_standalone.shtemplate/Riptide-Icon-Black-PNG.pngtemplate/Riptide-Icon-Electric-Blue-PNG.pngtemplate/Riptide-Icon-Light-Blue-PNG.pngtemplate/Riptide-Icon-White-PNG.pngtemplate/Riptide-Logo-Black-PNG.pngtemplate/Riptide-Logo-Electric-Blue-PNG.pngtemplate/Riptide-Logo-Light-Blue-PNG.pngtemplate/Riptide-Logo-White-PNG.pngtemplate/example.svgtemplate/index.htmlCreates Slidev presentations with markdown slides, Vue components, modular imports, layouts, themes, animations, code highlighting, and best practices for developers.
Generates zero-dependency HTML slide presentations with inline CSS/JS and animations. Use for new decks from scratch, PPT/PPTX conversions, or enhancing existing HTML presentations.
Creates zero-dependency, animation-rich HTML presentations from scratch or by converting PPT/PPTX files into self-contained slides for talks, pitches, or tutorials.
Share bugs, ideas, or general feedback.
Convert a markdown spec file into an HTML presentation using the Poimandres-themed template.
{SKILLBASE}/template/index.html{SKILLBASE}/examples/spec.md{SKILLBASE}/scripts/create_standalone.shRead the spec markdown file (e.g., spec.md)
Read the template at {SKILLBASE}/template/index.html
Parse the spec file:
* * * to get individual slides# Title = title slide (use <h1>)## Heading = slide heading (use <h2>)- item = bullet list (use <ul><li>)**bold** = emphasis (use <span class="accent"> or <span class="green">)> quote = blockquote (use <blockquote class="quote">)<img src="..."> = image (keep as-is, add class="shadow" if appropriate)```mermaid ``` = mermaid diagram (wrap in <div class="mermaid-wrapper"><pre class="mermaid">)<!-- image gallery - VERTICAL --> = split images into separate slides (one per slide)<!-- comment --> = other layout hints (e.g., <!-- big quote -->)Generate HTML slides:
<section class="slide"> (add centered class for title/image slides)Write output to index.html in the same directory as the spec, offer to open it using Bash for the user
OPTIONAL Create standalone shareable HTML:
FOLDERNAME-standalone.html (e.g., 2026-01-05-luciq-presentation-standalone.html){SKILLBASE}/scripts/create_standalone.sh /path/to/presentation/folder
<section class="slide centered">
<h1>Presentation Title</h1>
<p class="subtitle">Subtitle here</p>
</section>
<section class="slide">
<h2>Slide Title</h2>
<ul>
<li>Point with <span class="accent">emphasis</span></li>
<li>Another point</li>
</ul>
</section>
<section class="slide centered">
<blockquote class="quote">
"The quote text here"
</blockquote>
</section>
<section class="slide centered">
<h2>Diagram Title</h2>
<div class="mermaid-wrapper">
<pre class="mermaid">
graph LR
A[Start] --> B[End]
</pre>
</div>
</section>
<section class="slide centered">
<h2>Image Title</h2>
<img src="./image.png" alt="Description" class="shadow" />
</section>
<section class="slide">
<h2>Gallery Title</h2>
<div class="columns">
<div class="column">
<p class="muted">Caption 1</p>
<img src="./image1.png" alt="Image 1" />
</div>
<div class="column">
<p class="muted">Caption 2</p>
<img src="./image2.png" alt="Image 2" />
</div>
</div>
</section>
When spec contains <!-- image gallery - VERTICAL -->, split each image into its own slide:
<section class="slide centered">
<h2>Section Title</h2>
<p class="muted">Caption 1</p>
<img src="./image1.png" alt="Image 1" class="shadow" style="max-height: 55vh;" />
</section>
<section class="slide centered">
<h2>Section Title</h2>
<p class="muted">Caption 2</p>
<img src="./image2.png" alt="Image 2" class="shadow" style="max-height: 55vh;" />
</section>
.slide - base slide.slide.centered - center content.slide.top - align to top.accent - light blue (#ADD7FF).green - mint green (#5DE4c7).yellow - soft yellow (#fffac2).pink - pink (#d0679d).cyan - cyan (#89ddff).muted - dim gray.columns - two-column grid.split - image + text side by side.gallery - flex gallery for multiple images.subtitle - smaller subtitle text.small - smaller text.quote - styled blockquote.big-number - large stat/number.badge - tag/badge element.reveal - progressive reveal item (use with data-progressive)Add data-progressive to a slide to reveal content one item at a time on advance.
How it works:
<li> and .reveal elements hiddenNote: Progressive slides use padding-top: 15vh instead of vertical centering to prevent layout shift as items reveal.
<section class="slide" data-progressive>
<h2>Key Points</h2>
<ul>
<li>First point (revealed on first advance)</li>
<li>Second point (revealed on second advance)</li>
<li>Third point (revealed on third advance)</li>
</ul>
</section>
Use .reveal class for non-list items:
<section class="slide centered" data-progressive>
<h2>Before & After</h2>
<div class="reveal">
<p class="muted">Before</p>
<div class="mermaid-wrapper">
<pre class="mermaid">graph LR; A-->B</pre>
</div>
</div>
<div class="reveal">
<p class="muted">After</p>
<div class="mermaid-wrapper">
<pre class="mermaid">graph LR; A-->B-->C-->D</pre>
</div>
</div>
<p class="reveal muted">Summary text revealed last</p>
</section>
<section class="slide centered" data-progressive>
<h2>Feature Walkthrough</h2>
<div style="display: flex; gap: 30px; justify-content: center;">
<div class="reveal" style="text-align: center;">
<p class="muted">Step 1</p>
<img src="./step1.png" class="shadow" />
</div>
<div class="reveal" style="text-align: center;">
<p class="muted">Step 2</p>
<img src="./step2.png" class="shadow" />
</div>
<div class="reveal" style="text-align: center;">
<p class="muted">Step 3</p>
<img src="./step3.png" class="shadow" />
</div>
</div>
</section>