diorama: Skill for Claude Code

Record an extension demo with Diorama

Diorama records real Chrome extensions headlessly from a YAML beat sheet and composites a finished mp4 with a drawn browser frame, synthetic cursor, click ripples, and camera moves. No screen recording, no OS permissions.

Workflow

1. Check the environment: diorama doctor (or node <diorama>/packages/cli/dist/main.js doctor). Needs Chrome for Testing (DIORAMA_CHROME or a Playwright Chromium) and ffmpeg.
2. Find the extension's unpacked directory (contains manifest.json, must be Manifest v3). Read the manifest to learn the popup path and the extension name.
3. Write a beat sheet. Start from diorama init or this shape:

version: 1
title: My extension demo
viewport: { width: 1280, height: 860, scale: 2 }   # +100px toolbar = 4:3
extension:
  path: /abs/path/to/extension
  popup: { width: 600, height: 600, autoSize: true }
steps:
  - verb: goto
    url: https://the-page-the-extension-works-on.example
  - verb: wait
    selector: "css-or-text=selector"
  - verb: openPopup
  - verb: camera
    zoom: 1.35
    focus: popup
    ms: 700
  - verb: click
    target: popup
    selector: text=The Button Label
  - verb: wait
    target: popup
    expression: /done|complete/i.test(document.body.innerText)
  - verb: hold
    ms: 1200
  - verb: mark
    name: end

Verbs: goto, wait (selector | ms | expression), click, type, scroll, hover, openPopup, closePopup, camera (zoom 1-2.5, focus page|popup, ms), hold, mark. text= selectors match visible text case-insensitively. The last mark is the poster frame. Optional blocks: frame (theme dark|light|custom html path, url, title), profile (dir, seedStorage), cursor (scale, ripple, shadow), output (fps, endCard true|false|{title,subtitle}, posterAt, formats list).

1. Record: diorama record demo.beats.yaml --out out/ --keep-run.
2. Inspect the result before declaring success: extract frames with ffmpeg (ffmpeg -ss <t> -i out/<title>.mp4 -frames:v 1 check.jpg) and view them. Common fixes: add wait steps before clicks that miss, add holds so states breathe, adjust camera timing to land after UI settles.
3. Iterate by editing the sheet and re-running. Recordings are reproducible.