Cutaway

What does this agent do, and when should you use it?

Cutaway turns a JSON plan into a finished screen recording: Playwright drives Chromium through click, type, upload, scroll and press steps, Skia composes the scene, and FFmpeg encodes an MP4 — no AI model, cloud service or upload involved. The installer drops the repo at ~/.cutaway and links the skill into Claude Code and Codex, so you can just ask your agent for a recording (/cutaway record the checkout flow, $cutaway in Codex). Each session writes video.mp4, poster.png, lossless frames/*.png plus timeline.json, camera.json, render.json and workflow.json. The CLI has three subcommands: record (capture and export), render (re-export a saved capture with different look options) and frame (wrap a plain screenshot in the same browser or phone chrome). Desktop browser and portrait Playwright phone devices are both supported, and every step really executes against the target page.

src/cli.mjs exposes record, render and frame. record reads a JSON plan with url, viewport (default 1440×810), device, captureScale, hide, timeout, colorScheme, then launches Chromium via Playwright and executes steps in order: click, type, upload, focus, scroll, press, wait on desktop, plus tap and swipe on phones. Steps accept expect (a selector that must become visible or the recording stops), pause and hold (0.05–5s long press). The camera auto-zooms on typing, menus and small results; the cursor uses arcs, Fitts' law timing and a press-in click; dead time is sped up while clicks, typing and results play at real speed. render re-exports a saved capture and takes --width/--height (320–3840, even), --fps (24–60), --quality, --zoom (1–3), --blur, --cursor-size, --padding, --preset, --window, --keys and --pacing. frame takes an external screenshot and adds the Safari-style window on the wallpaper or a drawn phone frame. Recording writes timeline.json, camera.json and workflow.json; export writes video.mp4, poster.png and frames/*.png alongside render.json.

1. Attach a PR demo: record a UI change and export with --width 1280 --height 720 --quality standard to stay under GitHub's 10 MB attachment limit.
2. Reproduce a bug for review with an expect selector so the recording stops at the exact failing step instead of silently skipping it.
3. Show a mobile layout: set device to "iPhone 15 Pro" and write tap/swipe steps to get 1080×1920 with touch indicators and an iOS keyboard.
4. Let Claude Code or Codex demo its own work by asking /cutaway record the checkout flow or $cutaway.
5. Produce still evidence for a design review: screenshot a viewport, then run the frame subcommand to add the browser window and wallpaper.
6. Validate the toolchain offline against the bundled mock apps in examples/demo.json or examples/mobile-demo.json.

How do you install or deploy this agent?

Requires Node.js 22+. FFmpeg and Chromium come with the install.

curl -fsSL https://raw.githubusercontent.com/half144/cutaway/master/install.sh | bash

The installer downloads Cutaway into ~/.cutaway, installs dependencies and Chromium, and links the skill into Claude Code (~/.claude/skills) and Codex (~/.codex/skills) when they are installed. Set CUTAWAY_HOME to change the folder. Updates are automatic once a day; CUTAWAY_NO_UPDATE=1 turns that off.

From a clone:

git clone https://github.com/half144/cutaway.git && cd cutaway
npm ci
npx playwright install chromium
npm run demo
node scripts/install-skill.mjs
ln -s "$PWD/skills/cutaway" ~/.claude/skills/cutaway

Uninstall:

rm -rf ~/.cutaway ~/.claude/skills/cutaway ~/.codex/skills/cutaway

How do you use this agent?

Write a plan as JSON — a URL plus the steps a person would take:

{
  "url": "http://localhost:3000",
  "hide": ["nextjs-portal"],
  "steps": [
    { "action": "click", "selector": "#edit" },
    { "action": "type", "selector": "role=textbox[name=\"Title\"]", "text": "New title" },
    { "action": "upload", "selector": "button:has-text(\"Choose cover\")", "file": "cover.jpg" },
    { "action": "click", "selector": "#save", "expect": "#saved-message" },
    { "action": "focus", "selector": "#updated-title", "duration": 1.5 }
  ]
}

Selectors are Playwright locators; each must match exactly one element. For an app behind a login, pass --storage-state /path/session.auth.json.

Run the whole thing:

node ~/.cutaway/src/cli.mjs record ~/.cutaway/examples/demo.json --out /tmp/cutaway-demo

Capture only, or re-export a saved session with a different look:

node src/cli.mjs record plan.json --out recordings/take --capture-only
node src/cli.mjs render recordings/take --width 1280 --height 720
node src/cli.mjs render recordings/take --preset midnight --zoom 2

Frame a still screenshot:

agent-browser set viewport 1440 810 2
agent-browser open https://app.example.com/reports
agent-browser screenshot /tmp/reports.png
node src/cli.mjs frame /tmp/reports.png --url https://app.example.com/reports

What are this agent's strengths and limitations?

How does this agent compare with similar options?

Key facts side by side with the most closely related agents.

How does FollowAgents rate this agent?

FAQ