VS Code and Browser Capture Skill

Captures VS Code editor views, code walkthroughs, and Copilot Chat examples, and records self-contained browser animation scenes as silent WebM clips.

Overview

This skill provides a complete workflow for capturing high-quality VS Code screenshots suitable for embedding in slide decks, documentation, and other visual media. It handles server lifecycle management, viewport configuration, UI cleanup, and screenshot validation.

Two paths share the same constraints. Prefer the scripted path for any repeatable or unattended capture, including CI. Use the interactive Playwright MCP path for exploratory or one-off captures.

Scripted Capture

scripts/capture_vscode.py runs a YAML capture plan headless: it starts serve-web, applies capture settings, opens each file in Monaco, measures the rendered font, and writes one screenshot per capture. It drives Playwright directly, so it needs no MCP server and runs on a CI runner.