yarlson/scr
Overview
This skill automates terminal screenshots by running CLI/TUI commands in a headless terminal and capturing PNG sequences. It drives ttyd plus headless Chrome to execute scripted keypresses, timed sleeps, and typed input. Use it to generate reproducible visual documentation, test terminal UIs, or record command-output sequences.
How this skill works
It launches a terminal session exposed via ttyd, opens that session in headless Chrome, and takes PNG snapshots at a regular interval plus at start and end. You can provide a short script of actions (Type, Sleep, Key, Ctrl combinations) to simulate user interaction. Screenshots are saved in a numbered sequence so you can embed them in docs or review UI changes over time.
When to use it
- Creating step-by-step visual documentation for CLI tools or tutorials
- Testing and visually verifying TUI behavior across changes
- Capturing demo sequences of interactive programs like fzf, vim, or REPLs
- Recording build, test, or runtime output sequences for QA or audit
- Generating assets for marketing or release notes showing command outputs
Best practices
- Write concise scripts that mirror the user flow you want to show; prefer explicit Sleeps when waiting for output
- Use Type@<ms> to adjust typing speed for reproducible timing in fast UIs
- Increase timeout (-t) for long-running commands and use Sleep to capture intermediate states
- Choose a shorter interval (-i) for smoother sequences and a longer interval for static commands to reduce file count
- Validate that ttyd and Chrome/Chromium are installed and accessible before running
Example use cases
- Capture a quick command output: scr "ls -la" to produce a single screenshot
- Document an interactive flow: scr bash "Type 'echo hello' Enter" to show typed commands and results
- Record menu navigation: scr "seq 1 20 | fzf" "Down 5 Enter" to capture selection steps
- Save editor sessions: scr vim "Type 'i' Type 'Hello' Escape Type ':wq' Enter" to document in-editor changes
- Test TUI behavior under CI: run scr inside automation to produce PNGs for visual regression
FAQ
ttyd must be on PATH and Chrome/Chromium must be available for headless capture.
How are screenshots named and ordered?
Files are saved as screenshot_001.png, screenshot_002.png, etc., reflecting initial, periodic, and final snapshots.