screencast
Skill20 starsChanged 13 days agoMITView on GitHub
Records reviewable browser videos — a cursor, click ring, and step captions drawn on the page, dead waits cut, H.264 mp4 out, a per-step timings file and contact sheet beside it — for a scripted scene list, a test runner's raw Playwright video, or a Chrome tab driven by another tool (recorded over the DevTools protocol). Triggers on "record this interaction", "screen recording", "make a video of", "/screencast".
2 other projects use a version of this.
Adopted by
Most recently taken up by
- iAskShahram/skillstheir own version, first seen Nov 1, 2026
- Vesely/skillstheir own version, first seen May 1, 2026
Other versions2 projects use a version of this.
Word for word · 0
None found.
Edited · 0
None found.
Wrote their own version · 2
- Vesely/skills★ 28same name
- iAskShahram/skills★ 4same name
How matches are found. Word for word: the exact same text. Edited: shares passages with this file (“99% same” means 99% of its five-word phrases also appear here; 10% or more counts). Their own version: similar meaning, or, weakest, the same name. We can’t tell which project had it first. Projects are counted among the 200 most-starred candidates, and mentions are links to the repository we found, up to 50 per site, so both counts are a floor.
In this repository48 other files it gives its agents.
- CLAUDE.mdCLAUDE.md
- skills/workflow/autonomous-workflow/CLAUDE.mdCLAUDE.md
- ideateSkill
- interviewSkill
- playwright-trace-analyzerSkill
- profile-optimizerSkill
- rum-trackingSkill
- video-analyserSkill
- youtube-transcriptSkill
- create-skillSkill
- docsSkill
- handoffSkill
- optimize-claude-mdSkill
- persistent-memorySkill
- attach-mediaSkill
- ci-auto-fixSkill
- create-prSkill
- github-actions-authorSkill
- resolve-conflictsSkill
- animations-nativeSkill
- animationsSkill
- behavioral-designSkill
- chartingSkill
- storybookSkill
- uxSkill
- visual-designSkill
- ai-engineeringSkill
- confidenceSkill
- criticalSkill
- impact-mapSkill
- jev-assertSkill
- measurableSkill
- optimize-approachSkill
- polishSkill
- pr-reviewSkill
- review-loopSkill
- tddSkill
- verify-behaviorSkill
- aw-verifySkill
- e2e-testing-mobileSkill
- e2e-testingSkill
- telemetry-verifySkill
- ui-verifySkill
- autonomous-workflowSkill
- aw-create-planSkill
- aw-create-walkthroughSkill
- fix-bugSkill
- implement-suggestionSkill
The file
We split this skill into the rules it gives an agent
2 rules. About 0 are common, 1 is distinctive, and 1 is very specific to this project.
≈0
Common · estimate
Many files like this have a rule of this kind.
≈1
Distinctive · estimate
This author's own choices. Worth a look.
1
Very specific
Tied to their project's names, files or tools. Probably skip.
- Common
- Distinctive
- Very specific
- Very specific: line 49
When step prints caption not drawn, the page blocked the script (a strict CSP).
- Distinctive: line 50
Write each label as what the viewer should notice, in the product's words ("The list keeps only slow requests"), not "Click Filter".
≈ “Common” is an estimate: at least 1 in 5 of the 350,495 skill files we read have a rule of the same kind, not the same words. “Very specific” is our guess from the words: it names a file, a command, a setting or the project itself.
Files
screencast
Scripts do the work; this file lists only what differs from a plain Playwright recordVideo + ffmpeg job.
| Script | Use |
scripts/record.mjs <recording.json> | Scripted scenes (caption + click/hover/type/press/scroll/wait steps); schema in the file header. Run from a directory where playwright resolves |
scripts/overlay.js | A test runner's own recording: context.addInitScript({ path }), then window.__rec.step(label) per step |
scripts/finish.mjs <raw.webm>... --out <id>.mp4 | Any raw video(s) + sibling <stem>.timings.json → the outputs below. --crop x,y,w,h, --max-width 768 for video-analyser, --no-trim |
scripts/capture.mjs launch [--port 9222] | disconnect | start --url <part> | step "<label>" | stop --out <id>.mp4 | A Chrome tab another tool drives (claude-in-chrome): streams its frames over the DevTools protocol through a relay that keeps one connection to Chrome, then runs finish.mjs on stop. disconnect closes that connection. launch opens a separate Chrome with a DevTools port, for when remote debugging at chrome://inspect is off. Usage and exit codes in the file header |
node "${CLAUDE_SKILL_DIR}/scripts/finish.mjs" spec-1-1.webm spec-1-2.webm --out .agent/feat-x/.aw-tester/recordings/spec-1.mp4Outputs (the contract other skills read)
<id>.mp4, <id>.timings.json (steps: [{ label, start, end, result }] in output seconds), and <id>.sheet.png (one frame per step), side by side.
Standalone runs write to .agent/{branch}/recordings/; a caller such as aw-tester keeps its own directory.
Deviations from the default
- Read
<id>.sheet.pngbefore any upload or claim. You cannot watch a video; the sheet is how you check it shows what you say it shows. - Record at 1x. Playwright video ignores
deviceScaleFactor: a 2x page lands in a corner of the frame. Upscale in ffmpeg if needed. - Hide the overlay in screenshots:
page.screenshot({ style: '#__screencast{display:none!important}' }), so evidence images show only the app. - A runner writes timings as it goes:
{ label, start, end, result }per step, seconds fromnewPage(); several launches → pass every segment tofinish.mjsin order, and it joins them and offsets their timings. - A failed recording is a
notesline, never a failed check. - Chrome driver (claude-in-chrome): no
recordVideo, so record withcapture.mjs, nevergif_creator: a GIF gets one frame per tool call and is ~20× larger than the mp4. It needs Chrome's remote debugging on once (chrome://inspect/#remote-debugging), and the user clicks Allow once per Chrome session: the firststartprintsconnecting to Chromeand waits, and later ones reuse the relay's connection.--wait 600when you start it before asking. Chrome paints only while the page changes and its window is visible, so the video starts at the first frame afterstart, andstopexits6if none came.startinjectsoverlay.jsinto the tab and every later navigation, andcapture.mjs step "<label>"draws that label as the bottom caption: never inject the overlay or call__rec.stepyourself. Whenstepprintscaption not drawn, the page blocked the script (a strict CSP); the video has no caption for that step, so say so innotes. Write each label as what the viewer should notice, in the product's words ("The list keeps only slow requests"), not "Click Filter". Exit6(no debugging, no matching tab, no frames) → fall back togif_creator, convert the GIF (ffmpeg -i x.gif -movflags +faststart -vf "scale=1280:-2,format=yuv420p" -c:v libx264 -crf 28 -an x.mp4), and add anotesline. - Narration is opt-in (
--narrate): each step'ssayline, spoken with macOSsayorSCREENCAST_TTS="<cmd with {text} and {out}>". Never by default — reviewers watch muted.
Exit codes: 2 bad arguments, 3 ffmpeg missing, encoding failed, or the mp4 failed its sanity check, 4 playwright does not resolve, 5 --narrate with no voice, 6 capture.mjs found no DevTools endpoint, tab, or frames.
Does it work?
Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.
No reviews yet
People and AI agents can review whether this works in practice. Say what you used it for, and whether it worked.
- It worked
- Partly
- It didn't
Using an agent? It can post a review for you after it has run the file: the MCP tool registry_write, action report. How to connect one.
Your trail
Files you open will collect here, so you can find them again.
Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.
Now do this for your own.
Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.

