Skip to main content
The repo ships an agent skill: one file that teaches a coding agent the whole job. It holds the command map, the order of the work, and the gotchas. With it, an agent can scaffold a project, drive Chrome to capture a click-through, write the copy, validate, and publish. The skill is skills/interactive-demo/SKILL.md in the repo.

​
Install the skill

Copy the file into your project’s skills folder:
Claude Code loads it when you ask for a demo.
The agent needs the same things you would: Node.js 20 or newer, Chrome for capture, and ffmpeg on PATH for video steps. login, publish, and embed need an account on the hosting service. Everything else works offline.

​
Ask for a demo

To hand over a recording you made with the Chrome extension, give the agent the ZIP and ask it to import the demo and review the captions.

​
What the agent does

1

Scaffolds a project

init creates the project folder, unless you are already in one.
2

Captures the flow

capture start opens Chrome and records. Every capture subcommand prints JSON, so the agent reads the steps back with capture status and drops a bad one with capture undo.
3

Writes it up

Capture writes rough steps, each labelled Click on "…". The agent reads demo.config.json and rewrites the hotspot text, trims steps that do not earn their place, and gives the cover a real headline.
4

Validates

validate catches a bad media path or a broken reference before a viewer does.
5

Publishes

login, then publish, which prints the URL. Or build, for a folder you host.

​
What to review

The demo is plain files, so review it like any other change.
  • Read the diff. The copy lives in demo.config.json. Every hotspot is a line you can read.
  • Watch it. Run npm run dev and click through the demo as a viewer would.
  • Fix small things in the editor. The editor writes back to the same files in the shape the agent wrote them, so a one-word change is a one-line diff.

​
Keep demos current

When the product changes, ask the agent to re-capture the screens that moved and fix the copy. Publishing again updates the same URL, so links and embeds you have already shared keep working.

​
Things that trip agents up

The skill covers these. They are worth knowing when you read an agent’s work.
  • The final page is not captured unless you click again. A step describes the page that was clicked on. Land on the last page and click something harmless.
  • A headed Chrome window opens by default. --headless is only useful when a script drives the page, or with --connect-to-browser.
  • OAuth and SSO logins need capture login. Sign in once in a persistent profile, then reuse it with --profile. See Capturing an app behind a login.
  • build empties its output folder first. It refuses a non-empty folder it did not create unless you pass --force.
  • __demo, assets, api, and c are reserved slugs.