skills.rest
likec4
likec4OFFICIAL
Explore all skills by this author →
WebsiteGitHub

vscode-extension-screenshot-evidence

Capture before and after screenshots from a real VS Code Extension Development Host under Xvfb.

5.6k|377|Updated Mar 24, 2023
Search Tags:#visual regression#screenshot#Automation#VSCode#xvfb#extension testing#Pull request
One-click install
npx skills add https://github.com/likec4/likec4 --skill vscode-extension-screenshot-evidence
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vscode-extension-screenshot-evidence
Source: https://github.com/likec4/likec4/tree/main/.agents/skills/vscode-extension-screenshot-evidence
Command: npx skills add https://github.com/likec4/likec4 --skill vscode-extension-screenshot-evidence

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

VS Code extension bugs and visual regressions cannot be proven with browser-only screenshots; PRs and bug investigations need authentic before/after evidence captured from the actual VS Code extension host, which is tedious and error-prone to do manually.

Core Features & Use Cases

  • Automated VS Code capture: Launches an isolated Extension Development Host via --extensionDevelopmentPath under Xvfb, opens the LikeC4 preview through the command palette, and screenshots the window with xdotool and ImageMagick.
  • Before/after comparison workflow: Builds the extension from origin/main and the PR branch, captures both states against the same minimal .c4 fixture, and verifies the images show the broken and fixed states.
  • Safe PR publishing: Guides uploading screenshots via the gh image extension or a dedicated orphan asset branch, with checks for secrets, usernames, and unrelated windows before publishing.
  • Use Case: A contributor fixing an icon-color regression in the LikeC4 VS Code preview uses this Skill to produce verified before/after screenshots and embed them in the pull request body.

Quick Start

Capture before and after screenshots of the LikeC4 VS Code preview for my PR using the capture script under Xvfb and add them to the PR description.

Frequently Asked Questions about vscode-extension-screenshot-evidence

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

FAQPage Schema
How do I capture screenshots of a VS Code extension for a pull request?▼

Run the capture script under xvfb-run with the fixture folder, extension path, and output file. It launches an Extension Development Host with isolated user-data and extensions directories, opens the LikeC4 preview via the command palette, and screenshots the window with ImageMagick.

How do I take before and after screenshots for a VS Code extension fix?▼

Build the extension in a worktree from origin/main for the before image and in your PR branch for the after image. Run the capture script against both with the same fixture, then visually inspect both images before adding them to the PR.

Why can't I use browser screenshots as evidence for VS Code extension bugs?▼

VS Code extension and webview rendering bugs only reproduce inside the real editor host, so browser captures do not prove the fix. The screenshot must show enough surrounding VS Code UI to confirm it is not a browser-only rendering.

What tools are required to automate VS Code screenshots on Linux?▼

You need the code CLI, Xvfb for a virtual display, xdotool for window control, ImageMagick's import for capture, python3, and file. The script verifies DISPLAY belongs to an active Xvfb process unless --allow-live-display is passed.

How do I upload screenshots to a GitHub PR without committing them?▼

Use the gh image extension with a browser user_session cookie or GH_SESSION_TOKEN to get GitHub attachment URLs. If unavailable, push images to a dedicated orphan asset branch and embed the raw URLs in the PR body.

Related Skills

Explore More Software Engineering Skills→
joeblackwaslikejoeblackwaslike

vscode-extension-builder-lawvable

Build, bundle, test, and package VS Code extensions into .vsix files.

Community
Advanced
Clawdi-AIClawdi-AI
4

merge-pr

Merge GitHub pull requests via squash after validating checks and branch status.

Official
Advanced
zizzfizzixzizzfizzix

fix

Implement minimal code changes and add regression tests for GitHub issues.

Community
Advanced
aroidoaroido

Screenshot Automation

Automates application screenshots and creates GIFs via Playwright and ffmpeg.

Official
Intermediate