skills/screencast/SKILL.md
Record your screen to video from Claude Code. Guided capture setup: pick a display, window, or screen region, then start/stop recording on demand. Uses ffmpeg — cross-platform (macOS, Linux, Windows). Produces MP4 with sensible defaults. Pairs with demo-narrate for voice-over. Triggers on: screencast, record screen, screen recording, capture screen, record window, record region, start recording, screen capture video.
npx skillsauth add catalan-adobe/skills screencastInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
Record your screen to an MP4 video. Guided setup to pick what to record (full screen, specific window, or custom region), then start/stop recording on demand.
All recording logic goes through the helper script bundled with
this skill at scripts/screencast.js.
Locating the script:
if [[ -n "${CLAUDE_SKILL_DIR:-}" ]]; then
SCREENCAST_JS="${CLAUDE_SKILL_DIR}/scripts/screencast.js"
else
SCREENCAST_JS="$(command -v screencast.js 2>/dev/null || \
find ~/.claude -path "*/screencast/scripts/screencast.js" -type f 2>/dev/null | head -1)"
fi
if [[ -z "$SCREENCAST_JS" || ! -f "$SCREENCAST_JS" ]]; then
echo "Error: screencast.js not found. Ask the user for the path." >&2
fi
Store in SCREENCAST_JS and use for all commands below.
node "$SCREENCAST_JS" deps # Check ffmpeg + platform
node "$SCREENCAST_JS" list-screens # List available displays
node "$SCREENCAST_JS" list-windows # List open windows with geometry
node "$SCREENCAST_JS" start [flags] # Start recording
node "$SCREENCAST_JS" stop # Stop recording
node "$SCREENCAST_JS" status # Check if recording
node "$SCREENCAST_JS" pick-window # macOS: click to select a window
node "$SCREENCAST_JS" pick-region # macOS: drag to select a region
Start flags:
--screen <index> — display to record (default: 0 = main)--region <x,y,w,h> — crop to a specific rectangle--window <id> — record a specific window (resolves geometry)--fps <N> — frame rate (default: 30)--output <path> — output file (default: screencast_<timestamp>.mp4)All commands return JSON output.
node "$SCREENCAST_JS" deps
macOS: terminal must have Screen Recording permission (System Settings > Privacy & Security).
If ffmpeg is missing, tell the user:
brew install ffmpegsudo apt install ffmpegwinget install ffmpeg or download from ffmpeg.orgCheck platform from the deps output.
On macOS, offer interactive selection (pick-window or pick-region) first.
If the user chooses interactive:
node "$SCREENCAST_JS" pick-window
# or
node "$SCREENCAST_JS" pick-region
Use the returned id with --window, or x,y,w,h with --region.
If the picker returns {cancelled: true}, ask what they'd like to do instead.
On all platforms (or if the user prefers manual selection):
Ask the user what they want to record. Three options:
Full screen (default):
node "$SCREENCAST_JS" list-screens
Present the list. If only one screen, use it automatically. Note the screen dimensions for reference.
Specific window:
node "$SCREENCAST_JS" list-windows
Present a numbered list showing app name, window title, and
dimensions. The user picks by number. Use the window's id
field with the --window flag.
Custom region:
The user provides coordinates as x,y,width,height. Offer the
screen dimensions as reference: "Your main display is 2560x1440.
Top-left is 0,0."
Confirm the target, FPS, and output path before starting.
When the user says start:
node "$SCREENCAST_JS" start --window <id> --output <path>
# or: start --region <x,y,w,h> --output <path>
# or: start --screen <index> --output <path>
Confirm recording is active. The conversation continues normally while recording runs in the background.
When the user says "stop" or "stop recording":
node "$SCREENCAST_JS" stop
Report: file path, duration, and file size.
status and remind them recording is still active.start reports a recording is already in progress, inform
the user and offer to stop the existing one first.stop finds a dead process, report it and note whether a
partial file exists.See the reference guide for macOS picker details, tips, and standalone installation.
tools
Reduce a webpage to a structural skeleton with semantic tokens. Two-phase pipeline: Phase 1 injects a browser script that tokenizes content ({TEXT}, {HEADING:n}, {IMAGE:WxH}, {CTA:label}, {LINK:label}, {INPUT:type}, {VIDEO}, {ICON}). Phase 2 applies LLM structural reasoning to collapse repeated patterns ({REPEAT:N}), remove decorative wrappers, strip utility classes, and produce skeleton.html + manifest.json. Use when migrating pages to EDS, analyzing page structure, extracting page blueprints, or preparing input for GenAI block generation. Triggers on: reduce page, page skeleton, page blueprint, extract structure, tokenize page, page reduction, structural skeleton, reduce URL.
tools
Capture a spatial hierarchy of rendered DOM elements from any webpage. Injects a pre-built script via playwright-cli that walks the DOM, detects layout grids, extracts backgrounds, prunes invisible nodes, promotes elements rendered outside their DOM parent (overlays, fixed navs, modals), and tags overlay nodes with occlusion metadata. Returns three outputs: LLM-friendly indented text, structured JSON tree, and a nodeMap mapping positional IDs to CSS selectors with background and overlay data. Use before page decomposition, overlay detection, brand extraction, or any workflow that needs structured page analysis. Triggers on: visual tree, capture tree, page structure, page hierarchy, DOM tree, capture visual, page analysis, extract tree.
tools
Summarize any video by analyzing both audio and visuals. Downloads via yt-dlp, extracts transcript (YouTube captions or Whisper), pulls scene-detected keyframes, and produces a multimodal summary with clickable timestamped YouTube links. Use this skill whenever the user wants to summarize a YouTube video, digest a talk or tutorial, get notes from a video, extract key points from a recording, or says things like "tl;dw", "summarize this video", "what's in this video", or pastes a YouTube URL and asks for a summary. Also triggers for non-YouTube URLs that yt-dlp supports.
development
Design and build web UIs with Adobe Spectrum 2 design system. Applies S2 layout principles, visual hierarchy, spacing, and component composition to produce accessible interfaces. Outputs vanilla CSS with Spectrum tokens (static pages) or Spectrum Web Components (interactive apps). Recommends tier based on complexity. Covers sp-theme setup, side-effect imports, overlay system, form patterns, --mod-* token customization, and 14 critical gotchas. Use for: spectrum 2 web, SWC, sp-button, sp-theme, build UI with spectrum, S2 layout, spectrum application, adobe design system, web component form, spectrum overlay.