vscode-playwright
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 (
codeorcode-insiders) - Playwright MCP tools available (
mcp_microsoft_pla_browser_*) curlfor 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
More from microsoft/hve-core
powerpoint
PowerPoint slide deck generation and management using python-pptx with YAML-driven content and styling - Brought to you by microsoft/hve-core
113hve-core-installer
Decision-driven installer for HVE-Core with 6 clone-based installation methods, extension quick-install, environment detection, and agent customization workflows - Brought to you by microsoft/hve-core
21owasp-top-10
OWASP Top 10 for Web Applications (2025) vulnerability knowledge base for identifying, assessing, and remediating security risks in web application environments - Brought to you by microsoft/hve-core.
20video-to-gif
Video-to-GIF conversion skill with FFmpeg two-pass optimization - Brought to you by microsoft/hve-core
16gitlab
Manage GitLab merge requests and pipelines with a Python CLI - Brought to you by microsoft/hve-core
15owasp-agentic
OWASP Agentic Security Top 10 vulnerability knowledge base for identifying, assessing, and remediating security risks in AI agent systems - Brought to you by microsoft/hve-core.
15