// Create zero-dependency, animation-rich HTML presentations from scratch or by converting PowerPoint/PPTX files. Use when the user wants to build a presentation, convert a deck to web, or create slides for a talk/pitch.
Interactive installer for clarc — guides users through selecting and installing skills and rules to user-level or project-level directories, verifies paths, and optionally optimizes installed files.
Create zero-dependency, animation-rich HTML presentations from scratch or by converting PowerPoint/PPTX files. Use when the user wants to build a presentation, convert a deck to web, or create slides for a talk/pitch.
Create zero-dependency, animation-rich HTML presentations from scratch or by converting PowerPoint/PPTX files. Use when the user wants to build a presentation, convert a deck to web, or create slides for a talk/pitch.
Autonomous loop patterns for Claude — sequential pipelines, NanoClaw REPL, infinite agentic loops, continuous PR loops, De-Sloppify, and Ralphinho RFC-driven DAG orchestration. Pattern selection matrix and anti-patterns.
Write-time code quality enforcement using Plankton — auto-formatting, linting, and Claude-powered fixes on every file edit via hooks.
Use when auditing Claude skills and commands for quality. Supports Quick Scan (changed skills only) and Full Stocktake modes with sequential subagent batch evaluation.
| name | html-slides |
| description | Create zero-dependency, animation-rich HTML presentations from scratch or by converting PowerPoint/PPTX files. Use when the user wants to build a presentation, convert a deck to web, or create slides for a talk/pitch. |
Create zero-dependency, animation-rich HTML presentations that run entirely in the browser.
Inspired by the visual exploration approach showcased in work by zarazhangrui (credit: @zarazhangrui).
.ppt or .pptx slides into an HTML presentationBefore generating, read STYLE_PRESETS.md for the viewport-safe CSS base, density limits, preset catalog, and CSS gotchas.
Choose one path:
.ppt or .pptxAsk only the minimum needed:
If the user has content, ask them to paste it before styling.
Default to visual exploration.
If the user already knows the desired preset, skip previews and use it directly.
Otherwise:
.ecc-design/slide-previews/.Use the preset guide in STYLE_PRESETS.md when mapping mood to style.
Output either:
presentation.html[presentation-name].htmlUse an assets/ folder only when the deck contains extracted or user-supplied images.
Required structure:
STYLE_PRESETS.mdTreat this as a hard gate.
Rules:
.slide must use height: 100vh; height: 100dvh; overflow: hidden;clamp()Use the density limits and mandatory CSS block in STYLE_PRESETS.md.
Check the finished deck at these sizes:
If browser automation is available, use it to verify no slide overflows and that keyboard navigation works.
At handoff:
Use the correct opener for the current OS:
open file.htmlxdg-open file.htmlstart "" file.htmlFor PowerPoint conversion:
python3 with python-pptx to extract text, images, and notes.python-pptx is unavailable, ask whether to install it or fall back to a manual/export-based workflow.Keep conversion cross-platform. Do not rely on macOS-only tools when Python can do the job.
Include:
main, section, nav)prefers-reduced-motionUse these maxima unless the user explicitly asks for denser slides and readability still holds:
| Slide type | Limit |
|---|---|
| Title | 1 heading + 1 subtitle + optional tagline |
| Content | 1 heading + 4-6 bullets or 2 short paragraphs |
| Feature grid | 6 cards max |
| Code | 8-10 lines max |
| Quote | 1 quote + attribution |
| Image | 1 image constrained by viewport |
-clamp(...)frontend-patterns for component and interaction patterns around the deckliquid-glass-design when a presentation intentionally borrows Apple glass aestheticse2e-testing if you need automated browser verification for the final deck<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Slide: API Latency Fix</title>
<style>
/* Viewport-safe: fills exactly one screen, no scroll */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
width: 100vw;
height: 100vh;
overflow: hidden; /* No scroll — this is a slide */
font-family: system-ui, sans-serif;
}
.slide {
width: 100vw;
height: 100vh;
display: grid;
grid-template-rows: auto 1fr auto; /* header / content / footer */
padding: 4vh 5vw;
background: #0f172a;
color: #f8fafc;
}
.slide__title {
font-size: clamp(1.5rem, 4vw, 3rem); /* Scales with viewport */
font-weight: 700;
line-height: 1.2;
color: #38bdf8;
}
.slide__body {
display: flex;
align-items: center;
gap: 4vw;
}
.stat {
font-size: clamp(3rem, 10vw, 8rem);
font-weight: 900;
color: #34d399;
}
.stat__label {
font-size: clamp(0.9rem, 2vw, 1.5rem);
color: #94a3b8;
margin-top: 0.5em;
}
.slide__footer {
font-size: clamp(0.75rem, 1.5vw, 1rem);
color: #475569;
}
</style>
</head>
<body>
<div class="slide">
<h1 class="slide__title">API Latency — Before vs After</h1>
<div class="slide__body">
<div>
<div class="stat">800ms</div>
<div class="stat__label">Before (SEA users)</div>
</div>
<div style="font-size: clamp(2rem, 5vw, 4rem); color: #64748b;">→</div>
<div>
<div class="stat" style="color: #f59e0b;">240ms</div>
<div class="stat__label">After edge caching</div>
</div>
</div>
<footer class="slide__footer">
Engineering All-Hands · March 2026
</footer>
</div>
</body>
</html>
Key CSS patterns used:
overflow: hidden on html/body — prevents any scroll, enforces single-slideclamp(min, preferred, max) — scales all text and stats with viewport sizegrid-template-rows: auto 1fr auto — header/footer fixed, content fills middlevh/vw or clamp()