⏳ This skill is pending AI review.
Scores will appear once the review pipeline completes.
cutaway
Record polished browser workflow demos with animated zoom, a smooth cursor, motion blur, and local MP4 export, and frame screenshots with the same look. Use for web UI demos and tutorials in one Chromium tab, and for still evidence on cards or PRs.
Choose how to use this skill
You do not need every option. Choose the path your AI client supports. The stable page stays the same; versioned files are immutable.
1. Native installer
This listing has no registered native installer command. Use the complete package or source fallback below, depending on what your client supports.
Do not guess an installer command or replace an existing version without reviewing the diff.
2. Complete package recommended
Download the ZIP when available. It includes SKILL.md plus the references, security notes and version metadata.
No complete ProSkills package is published for this listing yet.3. Prompt-only
Copy the prompt above when the agent can read the stable page or when you want to adopt the workflow without installing a skill.
Need only the instruction file?
Download SKILL.md only if your client requires a single file. The complete ZIP is safer for a full installation because it preserves the references and release context.
No path installs or executes anything by itself. Your agent still needs access to the project files. Before updating, compare the installed version and review the diff.
// RATINGS
// README
🎬 Cutaway
Polished web app demos, recorded by your agent.
Animated zoom, a human cursor, motion blur and a macOS-style window, from a JSON plan to an MP4. Everything runs locally.
Quick start · Writing a plan · Phones · Export · Screenshots · How it works
✨ See it
https://github.com/user-attachments/assets/3d1e40e9-f6c2-49f3-bc12-51adb444362e
25 s, 1080p, 60 fps, unedited, from examples/web-dashboard.json on the shadcn/ui example dashboard. Zoom, cursor, pacing, the Safari window and background are the defaults.
https://github.com/user-attachments/assets/cb7a1724-a05c-490d-8715-fcab227f9b8b
25 s, 1080p, 60 fps, unedited, from examples/web-dashboard-dark.json: the same plan with "colorScheme": "dark". The window follows the page.
https://github.com/user-attachments/assets/7457e723-e6a7-431a-beb7-f1f46e12429d
29 s, 1080×1920, 60 fps, unedited, from examples/web-dashboard-mobile.json: touch indicators, drags, the iOS keyboard and the phone frame are the defaults for a phone device.
In dark mode, from examples/web-dashboard-mobile-dark.json:
https://github.com/user-attachments/assets/37528bf4-4422-4f7c-8679-c77df053f5fa
🧭 What you get
- A camera that follows the action. Screen Studio-style zoom on typing, menus and small results; the overview for anything that fills the screen.
- A cursor that moves like a person. Arcs, Fitts' law timing, varied pauses and a click that presses in.
- A finished scene. Wallpaper, a Safari-style browser window, shadow, motion blur and a shortcut pill.
- Honest timing. Dead time is sped up; clicks, typing and results play at real speed.
- Phones too. Touch input, a drawn device, status bar and on-screen keyboard.
- Stills too.
framegives any screenshot the same window or phone, for evidence that needs no video. See Screenshots.
No AI model, cloud service or upload is involved: Playwright drives Chromium, Skia composes, FFmpeg encodes.
[!NOTE] Screen Studio is the visual reference. Cutaway is not affiliated with it and does not match its editor.
🚀 Quick start
Requires Node.js 22+. Everything else, FFmpeg and Chromium included, comes with the install.
curl -fsSL https://raw.githubusercontent.com/half144/cutaway/master/install.sh | bash
The installer downloads Cutaway into ~/.cutaway, installs its dependencies and Chromium, and links the skill into Claude Code (~/.claude/skills) and Codex (~/.codex/skills) when they are installed. CUTAWAY_HOME changes the folder; a skill link that already points elsewhere is left alone.
Updates are automatic. Once a day, when the skill runs, the install fast-forwards to the latest master before anything loads, and reinstalls dependencies when they changed. Offline or with local edits it keeps the installed version. CUTAWAY_NO_UPDATE=1 turns it off, and running the installer again updates on the spot. Clones made by hand never update themselves.
Then ask your agent for a recording (/cutaway record the checkout flow in Claude Code, $cutaway in Codex), or run the demo yourself:
node ~/.cutaway/src/cli.mjs record ~/.cutaway/examples/demo.json --out /tmp/cutaway-demo
The demo opens a local mock app, edits a project name and shows the result. Use a new --out folder for every recording.
git clone https://github.com/half144/cutaway.git && cd cutaway
npm ci
npx playwright install chromium
npm run demo # → recordings/demo/video.mp4
node scripts/install-skill.mjs # links the skill into Codex
ln -s "$PWD/skills/cutaway" ~/.claude/skills/cutaway # links the skill into Claude Code
The skill runs the CLI through its link, so keep the clone where it is.
rm -rf ~/.cutaway ~/.claude/skills/cutaway ~/.codex/skills/cutaway
📝 Writing a plan
A plan is a JSON file: a URL and 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: CSS, role=…[name="…"], :has-text() and :text-is(). Each must match exactly one element.
Actions
| Action | Parameters | What it does |
|---|---|---|
click | selector | Aims like a person, clicks and waits for the interface to settle |
type | selector, text | Focuses the field, clears it and types at a human rhythm |
upload | selector, file | Clicks the control that opens the file chooser and hands it file (a path or array, relative to the plan); no native dialog opens |
focus | selector, duration | Frames an element without clicking; tall regions are read from the top |
scroll | y, duration | Relative scroll in pixels: starts fast and glides to a stop |
press | key | A key or shortcut on the focused element (Enter, ControlOrMeta+K) |
wait | duration | Pause in seconds |
Step options
| Option | What it does |
|---|---|
expect | A selector that must become visible: the real success indicator, not an always-present container. The camera frames it with the control. |
pause | Seconds to hold after the step. Leave it out: the recorder picks a human rhythm and holds results long enough to read. |
hold | Seconds to keep a click or tap pressed (0.05–5), for a long press. |
Plan options
| Option | Default | What it does |
|---|---|---|
url | required | http:, https: or file: (file:./page.html is relative to the plan) |
viewport | 1440×810 | Browser size, 16:9 like the export |
device | none | A phone from Playwright's device list; see Phones |
captureScale | 2 (3 on phones) | Source pixel density; 3 for 4K exports |
hide | none | CSS selectors removed from every frame, such as the Next.js dev badge |
timeout | 10000 | Action time limit in milliseconds (up to 120000) |
colorScheme | light | dark opens the page in dark mode, for apps that follow the system appearance |
Ambiguous selectors, missing elements and unmet expectations stop the recording, and export refuses incomplete sessions. For an app behind a login, pass --storage-state /path/session.auth.json with a saved Playwright state; --headed shows the browser.
[!WARNING] The recorder really performs each step. A local frontend can still point at a production API or database, so
// HOW IT'S BUILT
KEY FILES