
Vscode Dev Workbench
Run the local vscode.dev server against sibling microsoft/vscode sources and exercise the web workbench or Agents window in a browser.
Install
npx skills add https://github.com/microsoft/vscode --skill vscode-dev-workbenchWhat is this skill?
- Starts dev server from vscode-dev (not vscode)—documents npm Missing script: dev footgun
- Serves workbench from ../vscode via vscode-sources with ?vscode-quality=dev
- Agents window route at /agents with optional local mock agent host wiring
- Requires sibling layout: workRoot/vscode and workRoot/vscode-dev
- Fast path to validate web-only workbench changes without shipping Insiders
Adoption & trust: 59 installs on skills.sh; 186k GitHub stars; 3/3 security scanners passed (skills.sh audits).
Recommended Skills
Frontend Designanthropics/skills
Vercel React Best Practicesvercel-labs/agent-skills
Remotion Best Practicesremotion-dev/skills
Vercel Composition Patternsvercel-labs/agent-skills
Develop Userscriptsxixu-me/skills
Next Best Practicesvercel-labs/next-skills
Journey fit
Common Questions / FAQ
Is Vscode Dev Workbench safe to install?
skills.sh reports 3 of 3 security scanners passed. Review the Security Audits panel on this page before installing in production.
SKILL.md
READMESKILL.md - Vscode Dev Workbench
# Running vscode.dev Against Local VS Code Sources The `vscode-dev` repo is the `vscode.dev` server. When run locally with `?vscode-quality=dev`, it serves the VS Code web workbench (or Agents window at `/agents`) from the **sibling** `microsoft/vscode` checkout. This is the fastest way to validate web-only changes to the workbench without shipping an Insiders build. ## Layout assumption `vscode-dev` and `vscode` must be sibling folders: ``` <workRoot>/ vscode/ # microsoft/vscode checkout vscode-dev/ # microsoft/vscode-dev checkout ``` If your paths differ, check `server/` in `vscode-dev` for the source root resolution — the `/vscode-sources/*` route maps to `../vscode`. ## Start the dev server **Critical:** Run `npm run dev` from the **`vscode-dev`** folder, NOT from `vscode`. The `vscode` repo has no `dev` script and will fail with `npm error Missing script: "dev"`. Terminal tools that simplify/strip leading `cd` into separate commands will silently keep the cwd of a previous terminal — always use an absolute `pushd` or verify with `pwd` before `npm run dev`. ```bash cd /path/to/vscode-dev # NOT /path/to/vscode npm run dev # runs watch + nodemon; serves https://127.0.0.1:3000 ``` If you're driving this through an agent/terminal tool, prefer: ```bash pushd /absolute/path/to/vscode-dev >/dev/null && pwd && npm run dev ``` On first start you may see one crash like `Cannot find module './indexes'` — it's the watcher racing the first build. nodemon restarts automatically once `out/` finishes compiling. The server is ready when `curl -sk -o /dev/null -w "%{http_code}" https://127.0.0.1:3000/` returns `200`. ## URLs - `https://127.0.0.1:3000/?vscode-quality=dev` — main workbench, local dev sources - `https://127.0.0.1:3000/agents?vscode-quality=dev` — Agents window, local dev sources - `https://127.0.0.1:3000/?vscode-version=<commit>` — pinned production commit - Add `&vscode-log=trace` for verbose client logging ## Interacting via the integrated browser Use `open_browser_page` and the standard browser tools. ### Enter inserts a newline in the chat input The chat input is a Monaco editor — `page.keyboard.press('Enter')` inserts a newline. To send, click the **Send** button (`a[aria-label^="Send"]`) or use the send keybinding. ### Hard-reloading after a rebuild The service worker caches client assets aggressively. A plain reload can still serve stale modules: ```js await page.evaluate(async () => { const regs = await navigator.serviceWorker?.getRegistrations() ?? []; await Promise.all(regs.map(r => r.unregister())); const keys = await caches?.keys() ?? []; await Promise.all(keys.map(k => caches.delete(k))); }); await page.reload({ waitUntil: 'domcontentloaded' }); ``` ### Simulating mobile (only when explicitly requested) The integrated browser panel clamps width, so `page.setViewportSize()` and CDP `setDeviceMetricsOverride` narrow the viewport only as far as the panel allows. User-Agent override and touch emulation work fine: ```js const client = await page.context().newCDPSession(page); await client.send('Emulation.setUserAgentOverride', { userAgent: 'Mozilla/5.0 (iPhone; CPU iPhone OS 17_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.0 Mobile/15E148 Safari/604.1', platform: 'iPhone' }); await client.send('Emulation.setTouchEmulationEnabled', { enabled: true, maxTouchPoints: 5 }); await client.send('Emulation.setDeviceMetricsOverride', { width: 393, height: 852, deviceScaleFactor: 3, mobile: true, screenOrientation: { type: 'portraitPri