VS Code Playwright Screenshot Skill

Captures VS Code editor views, code walkthroughs, and Copilot Chat examples using Playwright MCP tools with serve-web.

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.

Prerequisites

• VS Code or VS Code Insiders CLI (code or code-insiders)
• Playwright MCP tools available (mcp_microsoft_pla_browser_*)
• curl for server readiness checks

Architecture

The serve-web CLI is a Rust-based proxy ("server of servers") that downloads the VS Code Server release and proxies connections to the inner Node.js server. The outer CLI accepts a limited set of flags; --server-data-dir is the key flag that controls where all server data (settings, extensions, state) is stored.

Quick Start