bounce12340/josh-video-skills

screen-record: Public Web Page Operation Recording (Reel Material)

Josh 2026-10-11 Approved Installation. Sole purpose: Record the operation screen of public web pages as video material for IG Reels. The publishing workflow remains completely unchanged (IG/Threads still use the box browser method); this tool does not handle posting.

Hard Rules (Must Follow Every Time)

1. Always use a fresh, temporary, in-memory browser (chromium.launch() + newContext(), no userDataDir).
2. Never point to a box logged-in browser profile; never use --extension, attach, CDP/wsEndpoint to connect to the box browser; never load cookies or storageState; do not use --persistent/--profile.
3. Do not log in to any website, do not input text, do not submit forms, do not post, do not comment, do not like.
4. Only record public pages (http/https, not localhost/internal network). For IG, Threads, and FB, only view public pages in an "unauthenticated" state; if you encounter a login wall, change the source, do not attempt to log in.
5. record.mjs has built-in protections: it immediately rejects specs containing storageState/cookies/userDataDir/profile/cdp/extension/login/password/fill/type fields; all POST/PUT/PATCH/DELETE requests are blocked (log will show blocked POST ..., normal); it refuses to click form submit buttons; non-http(s) or internal network URLs are rejected.
6. Do not modify record.mjs to bypass protections. If you truly need a post-login screen, stop and ask Josh.

Installed

• Playwright (Node library) 1.64.0: Installed in this folder node_modules/ (Apache-2.0)
• Playwright CLI @playwright/cli 0.1.22: Global command playwright-cli (~/.local/bin, Apache-2.0). Default session is an in-memory profile, can be used temporarily to manually view pages or take screenshots; do not add --persistent, --profile, attach --extension.
• Chromium: npx playwright install chromium (~/.cache/ms-playwright/chromium-1248, chromium_headless_shell-1248)
• @playwright/mcp is not installed (CLI + this script is sufficient; Microsoft also recommends agents use CLI).

Usage

cd <SKILLS_DIR>/screen-record
node record.mjs spec.json                 # Output to spec.out
node record.mjs spec.json --out /path/x.mp4
./contact_sheet.sh x.mp4 x_sheet.jpg 4 3  # 4x3 thumbnail grid, use Read to view

Example: examples/playwright-mcp.json (test clip: <YOUR_WORKSPACE>/media-team/03-drafts/screen-record-test/test.mp4, 19.8 seconds, 4.1 MB).

spec.json

{
  "url": "https://github.com/microsoft/playwright-mcp",
  "out": "<YOUR_WORKSPACE>/media-team/03-drafts/<Topic>/work/screen/clip01.mp4",
  "viewport": {"width": 720, "height": 1280},
  "outSize": {"width": 1080, "height": 1920},
  "hide": [".cookie-banner"],
  "steps": [
    {"action": "chapter", "title": "Playwright MCP", "description": "github.com/microsoft/playwright-mcp", "ms": 2200},
    {"action": "scroll", "by": 500, "ms": 2000},
    {"action": "scroll", "role": "heading", "name": "Key Features", "ms": 2000},
    {"action": "highlight", "role": "heading", "name": "Key Features", "label": "Key Features", "ms": 2500},
    {"action": "hover", "text": "Getting started"},
    {"action": "click", "text": "Apache-2.0 license"},
    {"action": "goto", "url": "https://playwright.dev"},
    {"action": "wait", "ms": 1000}
  ]
}

• Element selection: choose one of three: selector (CSS), role + name (most stable), text (can add exact).
• scroll: by pixels, or use to/role/text to scroll to a specific element (offset defaults to 25% from the top), ms scroll duration (ease-in-out).
• highlight: yellow box with optional label, removed after ms.
• chapter: Playwright native chapter card (blurred background + title).
• click, hover have Playwright native showActions: animated cursor + target outline + action description ("showActions": false can be disabled).
• Other options: fps (default 30), crf (default 23), mobile (mobile simulation), colorScheme, locale, tail, keepWebm.

Screen Dimensions

Playwright's screencast records in CSS pixels (deviceScaleFactor does not affect the video), so:

• Default: record at viewport 720x1280, then upscale to 1080x1920 using Lanczos: layout resembles a large phone, text is large enough, image quality is slightly soft but sufficient for Reels.
• For maximum sharpness: "viewport": {"width":1080,"height":1920} (desktop layout, smaller text).
• To record horizontally and then crop to vertical: "viewport": {"width":1280,"height":720}, "cropTo916": true (can add "cropX": 200 to specify crop start), output is still 1080x1920, but only retains the middle strip; usually not as good as directly using a vertical viewport.

Incorporating into Final Cut

• stock-footage-reel: In the shots.json for that shot, write "pick": {"source":"file","path":"/abs/clip01.mp4","license":"Screen recording of <site>","author":"<site owner>"}
• OpenMontage (via openmontage-house): Use as a local clip in the asset list, or as a real recording source in the screen-demo workflow.
• Home rules remain: vertical 1080x1920, Sarah Explains voiceover, Traditional Chinese main subtitles with small English text, B-roll Vox cover image, final IG video under 45 MB.
• Add one entry to credits.json: {"source":"screen-record","credit":"Screen recording of <site>","url":"<URL>","recorded":"YYYY-MM-DD"}; in the end credits, write "Screen recording of ".
• Recording someone else's website: use only as introductory/review footage; do not record pages containing personal information, private messages, or paywalled content.