vscode-playwright

The vscode-playwright skill provides an automated pipeline for generating professional-grade screenshots of the VS Code editor. Designed for developers, technical writers, and product teams, this tool simplifies the process of embedding live editor views into slide decks, project documentation, and marketing materials. By utilizing the Playwright MCP (Model Context Protocol) tools and the serve-web proxy, it creates an ephemeral, isolated environment to ensure consistent, clean, and distraction-free visual assets every time. The tool handles the entire lifecycle, from launching the VS Code server with specific workspace settings to fine-tuning the editor's UI appearance for maximum readability.

• Automated lifecycle management of VS Code server instances, including ephemeral data directory creation to prevent state pollution.

• Programmatic UI cleanup capabilities, including closing tabs, notifications, sidebars, and panels via Command Palette integration.

• Precision viewport configuration to match specific aspect ratios and resolutions required for PPTX templates and documentation layouts.

• Enhanced readability settings, such as global zoom application (1.5x–1.75x) to maintain font legibility in downscaled imagery.

• Compatibility with standard VS Code CLI variants, including core VS Code and VS Code Insiders, using automated environment detection.

• Flexible file navigation and editor interaction using headless browser automation.

• Ensure the Playwright MCP tools (mcp_microsoft_pla_browser_*) are configured and accessible before initiating the workflow.

• Use the provided bash-based detection logic to select the correct code or code-insiders CLI depending on the environment.

• Always set specific width and height dimensions in pixels to match target presentation placeholders rather than defaulting to generic monitor resolutions.

• Leverage the Command Palette pattern via page.keyboard.press commands to interact with internal VS Code functionalities like Go to File or Toggle Do Not Disturb.

• The tool requires curl for server readiness checks; verify that the serve-web service is responding on the local port 8765 before issuing browser commands.

• For best results, use the settings pre-seeding feature to enforce a consistent theme (e.g., Default Dark Modern) and disable telemetry or auto-restore features that might introduce unwanted visual noise.