xarunoba/skills

html-slideshow

A responsive slideshow bundled into one self-contained, minified .html. Author slides in HTML; the engine (assets/base.css + base.js) plus a Bun build produce the final file. Requires Bun.

Workflow

1. Check the runtime — bun --version (install from bun.sh if missing; verified with 1.4.0).
2. Copy the template — copy assets/base.html, assets/base.css, and assets/base.js into a deck folder in the user's workspace (side by side). The .html can be renamed freely (e.g. my-deck.html); base.css and base.js are referenced by relative path from the .html, so renaming them requires updating those references.
3. Set title — in the .html, edit <title>. The deck renders dark by default; printing switches to a forced light palette automatically.
4. Add slides — in <main id="deck">, one <section class="slide"> per slide:

   <section class="slide">
     <h2>Quarterly results</h2>
     <ul><li>Revenue up 24%</li></ul>
   </section>
   

5. Custom CSS/JS — linked files only, never inline. Do not add <style> or <script> blocks to the .html — it holds only the page skeleton and slide content; the build inlines the linked files into the final self-contained file, which keeps the source editable and the engine single-source. Two sanctioned homes for custom code: edit base.css / base.js directly, or — for deck-specific styling/behavior isolated from the engine — add <link rel="stylesheet" href="extra.css"> / <script src="extra.js" defer></script> (the build inlines them; keep base.* unmodified where possible — see references/bundling-assets.md). (Recipes in references/slide-patterns.md follow this.)
6. Size with container units — never px. Each slide is a CSS query container, so use cqw/cqh/cqmin and clamp() and content scales to any screen. px/pt break responsiveness — don't use them (the outer frame uses svh). This is the one rule agents get wrong; full guide in references/responsive-units.md. Portrait viewports are handled for you: slides render at their landscape canvas and scale to fit, so wide tables/grids never overflow a phone screen (--slide-w/--slide-h on :root, default 16/9).
7. Build — run the skill's build script: bun scripts/build.js my-deck.html (wraps bun build --compile --target=browser --minify my-deck.html --outdir dist; runs on any OS Bun does) → dist/my-deck.html: a single, minified, self-contained file with the CSS, JS, and any referenced assets inlined. This is the file you distribute.
8. Verify the built file in a browser tool (a file:// URL to dist/my-deck.html). Pass: controls render; ArrowRight advances the counter to "2 / N" and sets location.hash to #2; a ~400×800 viewport still shows one fully visible letterboxed slide; O toggles the overview; print-media emulation yields one slide per page. Signals are documented in references/using-the-deck.md. If no browser tool is available, say visual verification was skipped.
9. Clean up — nothing beyond the build output is created; keep my-deck.html, base.css, and base.js (the editable source) beside dist/my-deck.html (the file you distribute). If the user wants only the single file, move dist/my-deck.html wherever they expect the deck and keep the deck folder as its source.

Reference index

Load on demand — not all up front:

• references/using-the-deck.md — setup, the slide contract, full navigation, deep links (#5 opens slide 5; #some-id opens the slide holding that id; use for citations → sources), the build, and print.
• references/slide-patterns.md — ready-made slide recipes + authoring guidance.
• references/responsive-units.md — the no-px fluid-sizing guide.
• references/bundling-assets.md — inline SVG / data-URI assets (the build also inlines relative refs).
• references/engine-anatomy.md — map of the engine (base.html / base.css / base.js) for changing it.
• examples/quickstart.html — a filled deck (source; build it for a self-contained file).
• examples/README.md — the example deck's two forms (readable source vs built standalone) and how to rebuild the standalone after edits.

When to use

When the output should be shown one full screen at a time: a talk, lesson, demo, status update, or pitch. Not for scrolling prose or documents.