Menu
Create animation-rich HTML presentations from scratch or by converting PowerPoint files.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
Plan a huge chunk of work — more than one agent session can hold — as a shared map of decision tickets on your issue tracker, and resolve them one at a time until the way is clear. On ticket close, may offer ADRs (promotion into docs/adr/) when ADR-POLICY criteria hold.
Sharpen a plan or design against this codebase via grilling + domain-modeling (CONTEXT.md / ADR offers). May offer /wayfinder when fog appears. Invoke with `/grill-with-docs`.
Applies Dockerfile, Docker Compose, BuildKit, and container security patterns for local development and hardened deployable images. Use when authoring Dockerfiles or compose files, wiring secrets (runtime vs build-time), reproducible bases, PID 1 and healthchecks, volumes and networking, supply-chain hygiene, or troubleshooting compose stacks.
Routes Go work to the right reference guides and conventions for the task. Use when working on Go architecture, implementation, refactoring, concurrency, error handling, testing, performance, or code review.
PostgreSQL database patterns for query optimization, schema design, indexing, and security. Use when writing SQL or migrations, designing schemas, troubleshooting slow queries, implementing Row Level Security, tuning connection pooling, or reviewing database changes. Based on Supabase-leaning Postgres practice.
Applies Python idioms, PEP 8 norms, typing, packaging, concurrency, tooling, and performance discipline to everyday Python code. Use when writing, reviewing, refactoring, or packaging Python; when the user names type hints, dataclasses, pytest, ruff/black/mypy, asyncio, concurrency, EAFP vs LBYL, or Python idioms; or asks for a Python-specific code-quality pass.
| name | frontend-slides |
| description | Create animation-rich HTML presentations from scratch or by converting PowerPoint files. |
| disable-model-invocation | true |
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.
When you need a discrete decision with a small set of clear options (about 2–6), prefer the AskQuestion tool so the user gets structured choices. Ask one decision at a time when this skill already sequences questions that way.
If AskQuestion is unavailable in the current environment, ask the same choices in ordinary chat (same options, same ordering).
Use plain chat (not forced multiple-choice) when the answer is inherently free-form—for example pasted logs, a paragraph describing a custom tracker workflow, or an open-ended design explanation.
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