bounce12340/josh-video-skills

Record the operation screen of public web pages (scrolling, hovering, clicking links, highlighting key points, chapter cards) using Playwright, outputting a 1080x1920 vertical mp4 for Reel tools/site walkthrough materials. Trigger phrases: "Record a webpage operation," "Site walkthrough material," "Screen recording material," "screen record." Only records public pages; no login, no posting.

What is josh-video-skills?

This skill enables automated screen recording of interactions with public web pages, designed specifically for creating Reel-style vertical video content (1080x1920) for platforms like Instagram. Built on Playwright 1.64.0 with Chromium, it does not use persistent profiles, cookies, or extensions—every session is launched with a fresh, in-memory browser context for security and privacy. The `record.mjs` script enforces strict rules: it blocks any specification containing `storageState`, `cookies`, `userDataDir`, `profile`, `cdp`, `extension`, `login`, `password`, `fill`, or `type` fields; it blocks all POST/PUT/PATCH/DELETE requests; and it refuses form submission buttons, localhost, or internal network URLs. Users define a `spec.json` file with the target URL, viewport settings, and a series of actions (scroll, hover, click, highlight, chapter, goto, wait) that the script executes sequentially. The output is a high-quality MP4, optionally enlarged from 720x1280 to 1080x1920 using Lanczos resampling, suitable for use in video editing workflows like stock-footage-reel or OpenMontage. This skill is ideal for developers, content creators, and AI agent users who need to produce polished screen recordings of public websites without authentication or interaction.

Works with~Claude Code~Codex CLI~Cursor

npx skills add https://github.com/bounce12340/josh-video-skills/tree/HEAD/screen-record

Documentation

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)

Always use a fresh, temporary, in-memory browser (chromium.launch() + newContext(), no userDataDir).
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.
Do not log in to any website, do not input text, do not submit forms, do not post, do not comment, do not like.
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.
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.
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.