vscode-playwright

Name: vscode-playwright
Availability: InStock
Author: Microsoft

Capture VS Code editor screenshots via Playwright MCP and serve-web.

1.3k|253|Updated Nov 2, 2025

Search Tags:#automation #vscode #documentation #screenshots #playwright #visual assets

Ready to run

npx skills add https://github.com/microsoft/hve-core --skill vscode-playwright

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: vscode-playwright
Source: https://github.com/microsoft/hve-core/tree/main/.github/skills/experimental/vscode-playwright
Command: npx skills add https://github.com/microsoft/hve-core --skill vscode-playwright

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill automates the capture of high-quality screenshots from the VS Code editor, streamlining the creation of visual assets for documentation and presentations.

Core Features & Use Cases

Automated Screenshot Capture: Generates clean, consistent screenshots of VS Code editor views, code snippets, and Copilot Chat interactions.
UI Cleanup: Intelligently hides UI elements like panels, notifications, and sidebars to focus on the content.
Customizable Viewports: Resizes the VS Code window to match specific aspect ratios required for slide decks or documentation placeholders.
Use Case: Quickly generate a series of screenshots showcasing a new VS Code feature for a blog post, ensuring all images have a uniform size and clean background.

Quick Start

Use the vscode-playwright skill to capture a screenshot of the current VS Code editor view.

Frequently Asked Questions about vscode-playwright

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I automate VS Code screenshots for documentation?▼

Automate VS Code screenshots for documentation by using Playwright MCP tools and serve-web to manage the server lifecycle, clean UI elements, and capture specific editor states into visual assets.

Can I capture VS Code editor views with Playwright?▼

Yes, you can capture VS Code editor views with Playwright by automating server readiness checks with curl, resizing viewports to specific aspect ratios, and hiding panels or sidebars for clean output.

Do I need VS Code CLI and curl to capture screenshots?▼

Yes, you need the VS Code CLI and curl to capture screenshots, as the CLI manages the serve-web instance and curl verifies server readiness before Playwright MCP interacts with the editor.

What's the best way to get clean code snippets for slide decks?▼

The best way to get clean code snippets for slide decks is to automate screenshot capture, which intelligently hides notifications and sidebars while resizing the VS Code window to match your required aspect ratios.

Why does my automated VS Code screenshot include UI panels?▼

Your automated VS Code screenshot includes UI panels if the UI cleanup step is not properly applied, which requires hiding sidebars, panels, and notifications to focus exclusively on the editor content.