validate-ui-scenario

Drives a real VS Code window through scripted scenarios and captures video, screenshots, and trace evidence.

Updated Sep 3, 2026
One-click install
npx skills add https://github.com/az0512124155azz-sys/CodeForge --skill validate-ui-scenario-az0512124155azz-sys
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: validate-ui-scenario
Source: https://github.com/az0512124155azz-sys/CodeForge/tree/main/.github/skills/validate-ui-scenario
Command: npx skills add https://github.com/az0512124155azz-sys/CodeForge --skill validate-ui-scenario-az0512124155azz-sys

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Reproducing a reported UI bug or proving a fix works requires manually driving VS Code and assembling evidence by hand. This Skill automates that by running a scripted scenario against a real VS Code window and producing a captioned video, per-step screenshots, a Playwright trace, and an HTML report ready to attach to an issue or pull request. ## Core Features & Use Cases - End-to-end scenario execution: Write a small JavaScript scenario file with steps that drive the workbench via Playwright, then run it against an installed Insiders/Stable build, a dev build, a specific install, or web. - Automatic evidence capture: Every run produces an annotated MP4 with per-step captions, per-step screenshots, a Playwright trace, a manifest.json, and a report.html. - Honest handling of unautomatable steps: Steps that need a human or a missing harness capability are explicitly skipped, recorded, and surfaced in the report rather than silently dropped. - Use Case: Given a GitHub issue claiming Settings search fails to match a setting by its description, write a scenario that opens the Settings editor, searches, scrolls the virtualized list, and asserts the setting appears — then attach the failing run's video to the issue as reproduction proof. ## Quick Start Ask the AI to reproduce a specific VS Code issue by writing and running a UI scenario, for example: reproduce issue 250159 and attach the recorded evidence.

Frequently Asked Questions about validate-ui-scenario

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

FAQPage Schema
How do I reproduce a VS Code UI bug with an automated scenario?▼

Write a JavaScript scenario file defining steps that drive the workbench via Playwright, then run it with node test/scenario/out/runScenario.js. The runner launches VS Code, records video and screenshots, and writes an HTML report you can attach to the issue.

How do I validate an unmerged VS Code change with UI automation?▼

Run the scenario with the --dev flag against a checkout containing your change, after running npm run electron and npm run transpile-client. An installed build only reproduces shipped behavior, so --dev is required for unmerged code.

Why is my scenario video missing step captions?▼

Captions require ffmpeg and ffprobe on PATH. Without them the run still completes and keeps the raw recording, but the video is not annotated. Install ffmpeg and re-render with renderEvidenceChapters.js.

Why does my scenario fail to find a setting in the Settings editor?▼

The settings tree is virtualized, so only rows near the viewport exist in the DOM. Scroll the entire list while collecting titles before concluding a setting is absent, otherwise the assertion is unreliable.

When should I use a UI scenario instead of a smoke test?▼

Use this skill for one-off, issue-derived validation such as reproducing a bug or attaching evidence to a pull request. For deterministic regression coverage that runs on every build, write a smoke test instead.