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.
From clarcnpx claudepluginhub marvinrichter/clarc --plugin clarcThis skill uses the workspace's default tool permissions.
STYLE_PRESETS.mdDesigns and optimizes AI agent action spaces, tool definitions, observation formats, error recovery, and context for higher task completion rates.
Enables AI agents to execute x402 payments with per-task budgets, spending controls, and non-custodial wallets via MCP tools. Use when agents pay for APIs, services, or other agents.
Compares coding agents like Claude Code and Aider on custom YAML-defined codebase tasks using git worktrees, measuring pass rate, cost, time, and consistency.
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()