// 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.
| 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.
.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 deckInteractive 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.
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.
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.
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.