メニュー
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").
デフォルトでは、最初にソースを確認する Prompt が選択されています。直接コマンドに切り替えるか、ローカルコピーをダウンロードすることもできます。
インストールを決める前に、SKILL.md と SkillsMP に表示されている付属ファイルをお読みください。
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
直接コマンドでは確認用 Prompt が省略されます。実行前にソースを確認してください。
npx skills add https://github.com/ucsandman/marketing-studio --skill product-demoコマンドは1行のまま表示されます。コピー前に横へスクロールして全体を確認してください。
ローカルで確認しますか？SkillsMP が現在取得できるファイルをダウンロードできます。
SOC 職業分類に基づく
SKILL.md を表示中
| 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"). |
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.
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.capture OK + the props JSON it writes.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).ProductDemo composition at one frame per view; check camera
framing, cursor plausibility, captions, brightness.