skills.rest
microsoft
microsoftOFFICIAL
Explore all skills by this author →
Website𝕏@OpenAtMicrosoftGitHub

vscode-playwright

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
One-click install
npx skills add https://github.com/microsoft/hve-core --skill vscode-playwright
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
Bitterbot-AIBitterbot-AI
2.5k

mcporter

List, configure, authenticate, and call MCP servers and tools via CLI.

Official
Intermediate
AntonySilverhandAntonySilverhand

imagegen

Generate and edit presentation images via the Google Gemini API.

Community
Intermediate
kateuszkateusz
13

editor-panel-creation

Create ImGui editor panels with DryIoc DI and UI Elements.

Community
Intermediate
hussain9491hussain9491

browsing-with-playwright

Automate browser interactions via Playwright MCP server commands.

Community
Advanced