presentation-html/README.md

presentation-html

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

Start with the discovery guide. Choose by explanatory question and technique, then read only the relevant industry registry. Version 0.6.0 adds 24 substantial conceptual scenarios across oil and gas, pharma, government, retail, logistics, manufacturing, energy, healthcare, finance, telecom, agriculture and infrastructure. Twelve sectors is this release, not a ceiling. Values are illustrative, not verified operating procedures or engineering/clinical advice.

• 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.7.0/index.html. This portable offline gallery includes Play, Replay, Settle and Seek for all 33 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.

Presentation-derived patterns (0.7.0)

Four reusable generic examples preserve the authorized reference’s expressive silver robot, split approval barrier, parallel-design delivery cycle and connected-memory relationships. Read the presentation-patterns registry for provenance, use/avoid guidance, bounded parameters and actual lifecycle integration. The full library now has 33 examples, 15 registries and 49 HTML pages. Vendored runtime pins and prior versioned dist packages are unchanged.

Gallery hierarchy (0.7.0)

Open dist/animejs-gallery-0.7.0/index.html for all 33 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 generated catalog-data.js, gallery.js, gallery.css and assets/vendor/. Industry descriptors in catalogs/*.json and renderer registrations in industries/*.js are the editable sources; the builder generates all wrappers without duplicated labels. Legacy configs remain in examples.js. 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 33 examples in normal/reduced motion and deterministic hold/cleanup behavior. A compact representative screenshot set and exact page hashes are recorded under evidence/. Every normal-motion example gets actual early playback, then accelerated natural completion at engine speed 12; representative legacy/industry examples also complete at speed 1. The report explicitly distinguishes these. Default build/tests fail on missing release sectors; --allow-partial is development-only and reports missing coverage. The complete release has 33 individual pages, 15 registry galleries, and the overall index: 49 HTML pages.