Reusable global skill for editable, offline HTML presentations built with Reveal.js 6.0.2 + Anime.js 4.5.0. Canonical name normalizes the user typo presentation-htlm.

Quick start

Run from this package directory:

python3 scripts/build.py
# Open dist/presentation-html-demo-0.3.0.html directly, fully offline.
npm ci --ignore-scripts
npx playwright install chromium
npm test

Python builds with no network and no npm installation. npm/Chromium are needed only for browser tests. To use an existing compatible Chromium, set CHROMIUM_EXECUTABLE to its full path. Runtime playback has no external dependencies. The first dependency/browser installation needs network; the subsequent test runs disable browser networking.

Package

SKILL.md: operating workflow and verification gates.
references/: dated official-source research, established-example catalog and QA contract.
assets/starter.html, assets/app.js: original editable starter and lifecycle behavior.
assets/vendor/: complete required libraries/fonts and their licenses.
scripts/build.py: reproducible single-file build.
scripts/test.mjs: real offline Chromium interaction checks (default npm test).
dist/: ready-to-open six-slide example and hash manifest.
evidence/: exact-artifact test report and individually rendered slides.
SOURCE.md, vendor-manifest.json, package-lock.json: provenance and integrity.

Use six slides as examples, not a fixed narrative. Copy the package to a deck workspace before editing. Adapt test inventory when slide/node counts change. Work Sans is optional example typography. Channel-specific preferences and authority remain outside this global skill.

Explanatory mechanism example

For architecture decomposition, modular products and inspect/reassemble interactions, first read the mechanism reference. It explains when to choose the pattern, what was observed in the Anime.js showcase, and what must not be inferred or copied.

assets/mechanism.html is an original editable SVG example. Build it with python3 scripts/build-mechanism.py, then open dist/mechanism-demo-0.2.0.html. All four state controls and all three components are covered by scripts/test-mechanism.mjs; npm test runs both the original deck and this new example.

Runnable Anime.js library

Element registry: SVG draw, motion path and spatial stagger.
Composition registry: dependency flow and assemble/explode/reassemble.
assets/animejs/examples.js: editable configurations; gallery.js: shared renderer and lifecycle; index.html: local source preview.

Build with python3 scripts/build-gallery.py and open dist/animejs-gallery-0.5.0/index.html. This portable offline gallery includes Play, Replay, Settle and Seek for all five examples. npm test runs the deck, motion, mechanism and gallery suites. Registry coverage and source links are validated so new examples cannot silently go unlisted. Existing deck and mechanism artifact versions remain available.

Licenses and scope

Original code/documentation: MIT, RootAtSkic and Hermes Agent. Reveal.js and Anime.js: MIT; Work Sans: SIL OFL 1.1. Notices are preserved alongside vendor bytes and embedded in the output. No copyrighted showcase artwork was scraped into the distributable. Research documents disclose unavailable pages and link-only references. See references/examples.md for attribution and reuse decisions.

Local Chromium verification is included; no hosted CI or cross-browser certification is claimed. No automation credentials belong in this repository.

Gallery hierarchy (0.5.0)

Open dist/animejs-gallery-0.5.0/index.html for all five previews, or elements/index.html and compositions/index.html inside that package. Each gallery embeds examples/<id>.html through relative iframe src and links to that same file. Each individual page is self-contained (CSS, configuration, renderer, pinned Anime.js and full license embedded), so it also plays offline by itself. Breadcrumb links require keeping the package hierarchy together. Extract the complete package before opening its index; no server is needed. Previous version artifacts are retained.

The editable hierarchy mirrors this under assets/animejs/, sharing examples.js, gallery.js, gallery.css and assets/vendor/. Edit the configuration/renderer once, not the generated dist pages. Individual source documents select exactly one configuration using body[data-example]; unknown IDs fail explicitly, with no query-string fallback. Galleries never mount a renderer themselves. Every embedded document owns its lifecycle.

python3 scripts/build-gallery.py inlines local dependencies and records every page hash plus source hashes in dist/animejs-gallery-manifest.json. scripts/test-gallery.mjs tests both editable and built hierarchies, iframe identity, navigation, all five examples in normal/reduced motion and deterministic hold/cleanup behavior. Screenshots and exact page hashes are recorded under evidence/.