# 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:

```sh
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](references/explanatory-mechanisms.md). 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](references/registry-animejs-elements.md): SVG draw, motion path and spatial stagger.
- [Composition registry](references/registry-animejs-compositions.md): 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.4.0.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.