Product demo
Use when the user wants a product demo video / screen recording with zooms and cursor / dashboard walkthrough clip for any product (e.g. "/product-demo", "record a demo of the app", "Screen-Studio style demo").From its SKILL.md
npx -y skills add ucsandman/marketing-studio --skill product-demoAssembled from the repository path, not quoted from the project. Check it against their README if it does not work.
SKILL.md
1.7 KB, as published. Nobody here has run it
Product Demo
REQUIRED BACKGROUND: marketing-studio skill. Work in ${CLAUDE_SKILL_DIR}/../...
Produces: out/<brand>/demo.mp4 — real app footage with synthetic smooth cursor,
focus-driven camera zooms, and step captions, plus a brand end card.
Recipe
- Toolchain + brand check per marketing-studio. The product's app must be RUNNING (ask the user to start it; never start their stack yourself).
- Capture script:
feeders/capture/record-<brand>-demo.mjs. For a new product copyrecord-noban-demo.mjs: viewport wide enough for the app,deviceScaleFactor: 2, proven ready-locators per view, a step caption per view. Read the PLAYBOOK's capture gotchas FIRST — especially: camera focus rects are MEASURED from raw footage frames, never derived from click points, and must end before any app-side clipped edge. - Run the capture; verify
capture OK+ the props JSON it writes. - Measure/tune focus rects: extract raw frames
(
npx remotion ffmpeg -ss <t> -i studio/public/<brand>/demo.webm -frames:v 1 f.png), Read them, set focus {x,y,w,h} centers/sizes in the capture script, re-capture (~20s). - Proof stills of the
ProductDemocomposition at one frame per view; check camera framing, cursor plausibility, captions, brightness. - Render, deliver per marketing-studio. Known accepted aesthetic: cursor may leave frame during zoom holds (see PLAYBOOK for the redline options if the user objects).