A Claude Code plugin

How It Works

Tutorials that can't go stale. Write one storyboard. It clicks through your real product and delivers a guide, GIFs, and narrated videos, checked before they ship.

34 seconds, sound on.Built from footage, narration, and diagrams that How It Works produced. No timeline editor.

Install in Claude Code

Add the marketplace, install the plugin, then run setup once. Setup adds Chromium and the Kokoro voice, which is about 1 GB and cached in ~/.cache/how-it-works.

Claude Code

/plugin marketplace add junixlabs/how-it-works
/plugin install how-it-works@how-it-works
/how-it-works:setup

Then ask

Use How It Works to make a tutorial for
https://demo.playwright.dev/todomvc: add two
tasks, complete one, then filter to the
completed list. Guide with GIFs, plus a
narrated video, wide and vertical.

A real delivery, as it came out

This is the architecture explainer that ships as the built-in demo. One storyboard and one command produced the diagram tour, the narration, the captions, and the guide. It was not trimmed or touched up afterwards.

Storyboard: architecture-explainer.json
Command: hiw demo ./out
Quality gates: 14/14 passed
Run time: 5 min 47 s, video 58.5 s
Diagram: Archify workflow, 9 nodes

One storyboard, four outputs

Guide step GIF with a numbered callout on the real input box — **Guide + GIFs**Every bold UI label is checked against the page.

Frame from a narrated 16:9 video with word-timed captions — **Narrated 16:9**Captions timed to each word, and the camera follows each click.

Frame from the 9:16 vertical cut — **Vertical 9:16**The same run, recut for Shorts and Reels.

Architecture explainer frame with two nodes in focus — **Architecture explainers**Animated tours of Archify diagrams.

Checked before it ships

A real browser runs every step. The outputs replace the last delivery only when every gate passes, and the run writes a receipt with SHA-256 hashes. These are the gates from the release example:

PASS guide: UI labels exist in product 3/3 labels PASS guide: gif covers action add-tasks 14.20s vs 11.88s PASS video-16x9: no black gaps none PASS video-16x9: loudness -14 LUFS ±2 -15.8 LUFS PASS video-16x9: caption speed add-tasks 15.2 chars/s PASS video-9x16: spec 1080x1920 1080x1920 h264 30/1 ... 29/29 passed · receipt.json sha256 dea843c2…