# Vscode Playwright

Capture VS Code screenshots and self-contained browser animation scenes through...

- Repository: https://github.com/microsoft/hve-core (1591 stars)
- Category: Design
- License: MIT
- Last updated: 2026-11-01
- Runs scripts: yes, review before use

## Install

Claude Code: `npx skills add microsoft/hve-core --skill vscode-playwright -g -a claude-code -y`
Codex: `npx skills add microsoft/hve-core --skill vscode-playwright -g -a codex -y`
Cursor: `npx skills add microsoft/hve-core --skill vscode-playwright -g -a cursor -y`
Gemini CLI: `npx skills add microsoft/hve-core --skill vscode-playwright -g -a gemini-cli -y`

## Description

Capture VS Code screenshots and self-contained browser animation scenes through Playwright. Use for editor evidence, slide imagery, or silent WebM scene clips.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# VS Code and Browser Capture Skill

Captures VS Code editor views, code walkthroughs, and Copilot Chat examples, and
records self-contained browser animation scenes as silent WebM clips.

## 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.

Two paths share the same constraints. Prefer the scripted path for any repeatable or unattended capture, including CI. Use the interactive Playwright MCP path for exploratory or one-off captures.

## Scripted Capture

`scripts/capture_vscode.py` runs a YAML capture plan headless: it starts `serve-web`, applies capture settings, opens each file in Monaco, measures the rendered font, and writes one screenshot per capture. It drives Playwright directly, so it needs no MCP server and runs on a CI runner.

```bash
uv sync
uv run playwright install --with-deps chromium
uv run python scripts/capture_vscode.py --plan capture-plan.yml --workspace /path/to/repo
```

A plan names each capture's `id`, a workspace-relative `file`, and an `output` path relative to the plan directory, or to `--output-root` when given. An `id` is one filename-safe token of letters, digits, `.`, `_`, or `-`. An `output` is a relative `.png` path with `/` separators and no `..`, and the script refuses to write outside the output root or through a symlink:

```yaml
resolution: 1920x1080
min_font_pt: 18
font_size: 26
theme: Default Dark Modern
captures:
  - id: marketplace-catalog
    file: .github/plugin/marketplace.json
    output: frames/marketplace-catalog.png
```

The rest: https://github.com/microsoft/hve-core/blob/HEAD/.github/skills/experimental/vscode-playwright/SKILL.md