scenario-kitlisted

Drive this project's real UI with scenario-kit scenarios for three jobs - branded demo videos (run, Playwright recording + Remotion compositing), annotated PNG screenshots for release notes or docs (shots), and a post-implementation smoke pass that records a run while detecting runtime errors (smoke). Use when asked to create, update, or regenerate a demo video, capture product screenshots, add a scenario, or verify a feature end-to-end in the browser after implementing or changing it.
mizulba-dev/dev-method · ★ 0 · Code & Development · score 73

Install: claude install-skill mizulba-dev/dev-method

# scenario-kit `scenario-kit` records a product demo by driving a real browser (Playwright), then composites the recording into a branded mp4 (Remotion): intro card → rounded browser window → outro card. This project's demo config and scenarios live in `scenario-kit/` at the project root: ``` scenario-kit/ config.json brand + output settings scenarios/ <name>.json one or more recording scenarios assets/ brand assets such as logo.png (referenced from config.json) out/ generated recordings, screenshots and mp4s (gitignored) ``` ## Commands ```bash npx scenario-kit run <name> # record + render in one step npx scenario-kit record <name> # record only -> scenario-kit/out/recordings/<name>.webm npx scenario-kit render <name> # convert + composite only -> scenario-kit/out/<name>-demo.mp4 npx scenario-kit shots <name> # capture PNG screenshots -> scenario-kit/out/shots/<name>/ (no video, no ffmpeg) npx scenario-kit smoke <name> # record + detect runtime issues -> scenario-kit/out/smoke/<name>/{video.mp4,report.json,*.png} npx scenario-kit login [url] # save a logged-in session for recording pages behind a login npx scenario-kit init # scaffold scenario-kit/ in a new project npx scenario-kit --help # full command and steps reference ``` If a command from this document is missing from `npx scenario-kit --help` output, the project has an older scenario-kit installed — run it with an explicit version (`