/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").
$ npx -y skills add ucsandman/marketing-studio --skill product-demo --agent claude-codeHow it fires
How this skill gets triggered: by you, by Claude, or both.
- Fires itselfAuto-invocation. Claude auto-loads it when your prompt matches the work.Auto-invocation is when the right skill fires by itself at the right moment, driven by a FLOW.md router and a hook, instead of you invoking it by name. It is the difference between a skill being installed and a skill actually getting used.Read the full definition →
- You can call itInvoke it directly when you want it.
- Slash command
/product-demo
Context preview
The summary Claude sees to decide when to auto-load this skill.
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").
SKILL.md
product-demo.SKILL.mdname: product-demo
description: 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").
Product Demo
**REQUIRED BACKGROUND:** marketing-studio skill. Work in `C:\Projects\animations`.
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
1. Toolchain + brand check per marketing-studio. The product's app must be RUNNING (ask the user to start it; never start their stack yourself). 2. Capture script: `feeders/capture/record-<brand>-demo.mjs`. For a new product copy `record-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. 3. Run the capture; verify `capture OK` + the props JSON it writes. 4. 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). 5. Proof stills of the `ProductDemo` composition at one frame per view; check camera framing, cursor plausibility, captions, brightness. 6. 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).
Read more
name: product-demo description: 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").
Product Demo
**REQUIRED BACKGROUND:** marketing-studio skill. Work in `C:\Projects\animations`.
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
1. Toolchain + brand check per marketing-studio. The product's app must be RUNNING (ask the user to start it; never start their stack yourself). 2. Capture script: `feeders/capture/record-<brand>-demo.mjs`. For a new product copy `record-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. 3. Run the capture; verify `capture OK` + the props JSON it writes. 4. 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). 5. Proof stills of the `ProductDemo` composition at one frame per view; check camera framing, cursor plausibility, captions, brightness. 6. 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).
An agent-driven marketing studio for Claude Code. You type /marketing in your product's repo; the agent onboards your brand, films your app, renders a full marketing asset suite in this engine, and copies the finished files back to you.
Repo: ucsandman/marketing-studio
Other skills on marketing-studio.
- /audio-track
Use when the user wants music, voiceover, narration, or a soundtrack added to a video asset, OR wants standalone generated audio for any purpose (e.g. "/audio-track", "add music to the launch video", "narrate the demo", "make a 30 second music sting", "generate a voiceover mp3",
Open skill - /de-vibe
Audit and fix the tells that software was vibe-coded / AI-generated, then give it a small distinctive identity, so it ships looking handcrafted and professional. Use whenever the user says "de-vibe", "does this look AI-generated / vibe coded?", "make this look shippable /
Open skill - /frontend-verify
Verify frontend changes end to end after editing a web app, instead of manually clicking through pages. Use this whenever you have changed UI code and need to confirm nothing broke: "verify my frontend", "check the site after these edits", "did my UI break", "did my changes
Open skill - /launch-video
Use when the user wants a full launch video / hero video / 30-90s product announcement composing demo footage, logo, and copy (e.g. "/launch-video", "make the launch video for DashClaw").
Open skill - /launch
Use when a product or feature is ready to go public — after shipping, when the user says "launch it", "announce it", "go live", or wants a release marketed end to end.
Open skill - /logo-reveal
Use when the user wants a logo reveal / logo animation / brand intro video for any product (e.g. "/logo-reveal", "make a logo reveal for DashClaw", "animated logo for the landing page").
Open skill