Web Product Demo Video

Create the demo from the target application's real behavior. Keep service-specific facts, selectors, actions, captions, and timing in the generated project; never add them to this Skill.

Required workflow

1. Read the target repository instructions and inspect its run commands.
2. Confirm the target URL, runtime limit, required features, authentication method, output directory, and whether captions or audio are wanted. Default to 1920x1080, CFR 60fps, H.264, captions on, and no audio.
3. Check for Node.js, Playwright, FFmpeg, FFprobe, and a usable Python 3 runtime. Reuse project dependencies when available.
4. Run scripts/init_demo_project.py OUTPUT_DIR to create an isolated demo project.
5. Inspect the real UI with Playwright or an existing signed-in browser. Record only verified routes, selectors, states, actions, and results in feature-inventory.json and recording-plan.json.
6. Run scripts/create_storyboard.py and then refine storyboard.json. Read references/storyboard-schema.md when editing the data contract.
7. Run scripts/validate_storyboard.py before recording. If it fails, fix the inventory or storyboard instead of bypassing the check.
8. Adapt the generated record-demo.mjs only where the target application needs custom interaction logic. Keep credentials in environment variables or a Playwright storage-state file outside the package.
9. Record the complete real interaction. Preserve action markers, but remove waiting, skeleton, error, and blank states from the edited timeline.
10. Rebuild the storyboard with --markers recording-markers.json, verify every trim visually, and run the storyboard validator with --require-media.
11. Render with scripts/render_video.py. Use direct cuts by default and restrained zoom only when a small interaction needs emphasis.
12. Validate with scripts/validate_video.py, inspect the generated contact sheet, and rerender until all checks pass.