{"id":"5bfc5f74-8a58-4d8f-be31-dffb24e8e0d7","shortId":"9ZMmU3","kind":"skill","title":"vscode-extension-builder-lawvable","tagline":"Build VS Code extensions from scratch or convert existing JS/React/Vue apps. Supports commands, webviews (React/Vue), custom editors, tree views, and AI agent integration via file-bridge IPC. Use when user wants to create a VS Code extension, convert a web app to an extension, ad","description":"# VS Code Extension\n\nBuild VS Code extensions from scratch or convert existing web apps into portable, shareable extensions.\n\n## Architecture\n\nVS Code extensions run in two contexts:\n\n1. **Extension Host (Node.js)** — Backend logic, file access, VS Code APIs\n2. **Webviews (browser sandbox)** — Custom UIs with HTML/CSS/JS (React, Vue, vanilla)\n\nBuild stack: **TypeScript + esbuild** (extension) + **Vite** (webviews)\n\n## Quick Start\n\n1. Choose a template from `assets/` based on your needs (see decision tree below)\n2. Copy the template to your project directory\n3. Update `package.json`: name, displayName, publisher, description\n4. Run `npm install` then `npm run build`\n5. Press F5 in VS Code to launch Extension Development Host\n\n## Template Decision Tree\n\n| Need | Template |\n|------|----------|\n| Simple command/action | `assets/basic-command/` |\n| Custom UI panel (React) | `assets/webview-react/` |\n| Sidebar file tree | `assets/tree-view/` |\n| Custom file editor | `assets/custom-editor/` |\n| AI agent integration | `assets/file-bridge/` |\n\n## Extension Types\n\n### Commands\n\nRegister actions triggered via Command Palette, keyboard shortcuts, or menus.\n\n```typescript\nvscode.commands.registerCommand('myExt.doSomething', () => {\n  vscode.window.showInformationMessage('Done!');\n});\n```\n\nSee [references/api-reference.md](references/api-reference.md) for common APIs.\n\n### Webviews\n\nFull HTML/CSS/JS UIs in panels or sidebar. Use React for complex interfaces.\n\n```typescript\nconst panel = vscode.window.createWebviewPanel(\n  'myView', 'My Panel', vscode.ViewColumn.One,\n  { enableScripts: true }\n);\npanel.webview.html = getWebviewContent();\n```\n\nSee [references/webview-patterns.md](references/webview-patterns.md) for React setup, messaging, and CSP.\n\n### Tree Views\n\nHierarchical data in the sidebar (file explorers, outlines, lists).\n\n```typescript\nvscode.window.registerTreeDataProvider('myTreeView', new MyTreeProvider());\n```\n\nSee [references/tree-view-patterns.md](references/tree-view-patterns.md) for TreeDataProvider patterns.\n\n### Custom Editors\n\nReplace the default editor for specific file types.\n\n```typescript\nvscode.window.registerCustomEditorProvider('myExt.myEditor', new MyEditorProvider());\n```\n\nSee [references/custom-editor-patterns.md](references/custom-editor-patterns.md) for document sync and undo/redo.\n\n## Converting Existing Apps\n\nTo convert a JS/React/Vue app into an extension:\n\n1. **Assess** — What does the app do? What VS Code features does it need?\n2. **Map APIs** — Replace web APIs with VS Code equivalents\n3. **Restructure** — Move UI into webview, logic into extension host\n4. **Connect** — Wire up postMessage communication\n\n| Web API | VS Code Equivalent |\n|---------|-------------------|\n| `localStorage` | `context.globalState` / `context.workspaceState` |\n| `fetch()` | `vscode.workspace.fs` or keep `fetch` for external APIs |\n| Router | Multiple webview panels or sidebar views |\n| `alert()` | `vscode.window.showInformationMessage()` |\n| `prompt()` | `vscode.window.showInputBox()` |\n| `confirm()` | `vscode.window.showWarningMessage()` with options |\n\nSee [references/conversion-guide.md](references/conversion-guide.md) for detailed step-by-step process.\n\n## Build System\n\n**Extension code** — Use esbuild (fast, simple):\n\n```javascript\n// esbuild.js\nesbuild.build({\n  entryPoints: ['src/extension.ts'],\n  bundle: true,\n  outfile: 'dist/extension.js',\n  external: ['vscode'],\n  format: 'cjs',\n  platform: 'node',\n});\n```\n\n**Webview code** — Use Vite (HMR, React support):\n\n```javascript\n// vite.config.ts\nexport default defineConfig({\n  build: {\n    outDir: '../dist/webview',\n    rollupOptions: { output: { entryFileNames: '[name].js' } }\n  }\n});\n```\n\nSee [references/build-config.md](references/build-config.md) for complete configurations.\n\n## package.json Manifest\n\nEssential fields:\n\n```json\n{\n  \"name\": \"my-extension\",\n  \"displayName\": \"My Extension\",\n  \"publisher\": \"your-publisher-id\",\n  \"version\": \"0.0.1\",\n  \"engines\": { \"vscode\": \"^1.85.0\" },\n  \"main\": \"./dist/extension.js\",\n  \"activationEvents\": [],\n  \"contributes\": {\n    \"commands\": [{ \"command\": \"myExt.hello\", \"title\": \"Hello\" }]\n  }\n}\n```\n\nThe `contributes` section defines commands, menus, views, settings, keybindings, and more.\n\nSee [references/contribution-points.md](references/contribution-points.md) for all contribution types.\n\n## IPC Patterns\n\n### Extension ↔ Webview\n\nUse `postMessage` for bidirectional communication:\n\n```typescript\n// Extension → Webview\npanel.webview.postMessage({ type: 'update', data: {...} });\n\n// Webview → Extension\npanel.webview.onDidReceiveMessage(msg => {\n  if (msg.type === 'save') { /* handle */ }\n});\n```\n\n### Extension ↔ External Tools (AI Agents)\n\nUse file-based IPC for communication with Claude Code or other agents:\n\n```typescript\n// Watch for command files\nfs.watch(commandDir, (event, filename) => {\n  if (filename.endsWith('.json')) {\n    const command = JSON.parse(fs.readFileSync(path.join(commandDir, filename)));\n    processCommand(command);\n  }\n});\n```\n\nSee [references/ai-integration.md](references/ai-integration.md) for the file-bridge pattern.\n\n## Packaging & Distribution\n\n### Package as .vsix\n\n```bash\nnpm install -g @vscode/vsce\nvsce package\n```\n\nThis creates `my-extension-0.0.1.vsix`.\n\n### .vscodeignore\n\nExclude unnecessary files:\n\n```\n.vscode/**\nnode_modules/**\nsrc/**\n*.ts\ntsconfig.json\nesbuild.js\nvite.config.ts\n```\n\n### Distribution Options\n\n1. **Direct sharing** — Send .vsix file, install via `code --install-extension file.vsix`\n2. **VS Marketplace** — Publish with `vsce publish` (requires Microsoft account)\n3. **Open VSX** — Alternative registry for open-source extensions\n\n### Platform-Specific Builds\n\nFor extensions with native dependencies:\n\n```bash\nvsce package --target win32-x64\nvsce package --target darwin-arm64\nvsce package --target linux-x64\n```\n\n## Reference Files\n\n| File | When to Read |\n|------|--------------|\n| [api-reference.md](references/api-reference.md) | Implementing extension features |\n| [contribution-points.md](references/contribution-points.md) | Configuring package.json contributes |\n| [webview-patterns.md](references/webview-patterns.md) | Building React webviews |\n| [tree-view-patterns.md](references/tree-view-patterns.md) | Implementing tree views |\n| [custom-editor-patterns.md](references/custom-editor-patterns.md) | Building custom file editors |\n| [build-config.md](references/build-config.md) | Configuring esbuild/Vite |\n| [conversion-guide.md](references/conversion-guide.md) | Converting web apps |\n| [ai-integration.md](references/ai-integration.md) | Integrating with AI agents |\n\n## Asset Templates\n\n| Template | Description |\n|----------|-------------|\n| [basic-command/](assets/basic-command/) | Minimal extension with one command |\n| [webview-react/](assets/webview-react/) | React webview panel with messaging |\n| [tree-view/](assets/tree-view/) | Sidebar tree view with provider |\n| [custom-editor/](assets/custom-editor/) | Custom editor for specific file types |\n| [file-bridge/](assets/file-bridge/) | File-based IPC for AI agents |","tags":["vscode","extension","builder","lawvable","awesome","legal","skills","agent-skills","automation","law","legal-work","workflows"],"capabilities":["skill","source-lawvable","skill-vscode-extension-builder-lawvable","topic-agent-skills","topic-automation","topic-law","topic-legal-work","topic-workflows"],"categories":["awesome-legal-skills"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/lawvable/awesome-legal-skills/vscode-extension-builder-lawvable","protocol":"skill","transport":"skills-sh","auth":{"type":"none","details":{"cli":"npx skills add lawvable/awesome-legal-skills","source_repo":"https://github.com/lawvable/awesome-legal-skills","install_from":"skills.sh"}},"qualityScore":"0.605","qualityRationale":"deterministic score 0.60 from registry signals: · indexed on github topic:agent-skills · 310 github stars · SKILL.md body (7,089 chars)","verified":false,"liveness":"unknown","lastLivenessCheck":null,"agentReviews":{"count":0,"score_avg":null,"cost_usd_avg":null,"success_rate":null,"latency_p50_ms":null,"narrative_summary":null,"summary_updated_at":null},"enrichmentModel":"deterministic:skill-github:v1","enrichmentVersion":1,"enrichedAt":"2026-05-02T18:53:57.116Z","embedding":null,"createdAt":"2026-04-18T22:04:46.168Z","updatedAt":"2026-05-02T18:53:57.116Z","lastSeenAt":"2026-05-02T18:53:57.116Z","tsv":"'/dist/extension.js':449 '/dist/webview':414 '0.0.1':444 '1':78,109,296,576 '1.85.0':447 '2':89,123,310,589 '3':131,320,599 '4':138,330 '5':146 'access':85 'account':598 'action':186 'activationev':450 'ad':51 'agent':27,179,503,516,683,735 'ai':26,178,502,682,734 'ai-integration.md':678 'alert':359 'altern':602 'api':88,205,312,315,337,351 'api-reference.md':643 'app':16,47,65,287,292,301,677 'architectur':70 'arm64':630 'assess':297 'asset':114,684 'assets/basic-command':164,691 'assets/custom-editor':177,718 'assets/file-bridge':181,728 'assets/tree-view':173,709 'assets/webview-react':169,700 'backend':82 'base':115,507,731 'bash':552,618 'basic':689 'basic-command':688 'bidirect':482 'bridg':32,545,727 'browser':91 'build':6,55,100,145,377,412,612,655,665 'build-config.md':669 'builder':4 'bundl':390 'choos':110 'cjs':397 'claud':512 'code':8,42,53,57,72,87,151,305,318,339,380,401,513,584 'command':18,184,189,452,453,461,520,530,537,690,696 'command/action':163 'commanddir':523,534 'common':204 'communic':335,483,510 'complet':424 'complex':217 'configur':425,650,671 'confirm':363 'connect':331 'const':220,529 'context':77 'context.globalstate':342 'context.workspacestate':343 'contribut':451,458,473,652 'contribution-points.md':648 'conversion-guide.md':673 'convert':13,44,62,285,289,675 'copi':124 'creat':39,560 'csp':239 'custom':21,93,165,174,262,666,716,719 'custom-editor':715 'custom-editor-patterns.md':663 'darwin':629 'darwin-arm64':628 'data':243,490 'decis':120,158 'default':266,410 'defin':460 'defineconfig':411 'depend':617 'descript':137,687 'detail':371 'develop':155 'direct':577 'directori':130 'displaynam':135,435 'dist/extension.js':393 'distribut':548,574 'document':281 'done':199 'editor':22,176,263,267,668,717,720 'enablescript':227 'engin':445 'entryfilenam':417 'entrypoint':388 'equival':319,340 'esbuild':103,382 'esbuild.build':387 'esbuild.js':386,572 'esbuild/vite':672 'essenti':428 'event':524 'exclud':563 'exist':14,63,286 'explor':248 'export':409 'extens':3,9,43,50,54,58,69,73,79,104,154,182,295,328,379,434,437,477,485,492,499,587,608,614,646,693 'extern':350,394,500 'f5':148 'fast':383 'featur':306,647 'fetch':344,348 'field':429 'file':31,84,171,175,247,270,506,521,544,565,581,638,639,667,723,726,730 'file-bas':505,729 'file-bridg':30,543,725 'file.vsix':588 'filenam':525,535 'filename.endswith':527 'format':396 'fs.readfilesync':532 'fs.watch':522 'full':207 'g':555 'getwebviewcont':230 'handl':498 'hello':456 'hierarch':242 'hmr':404 'host':80,156,329 'html/css/js':96,208 'id':442 'implement':645,660 'instal':141,554,582,586 'install-extens':585 'integr':28,180,680 'interfac':218 'ipc':33,475,508,732 'javascript':385,407 'js':419 'js/react/vue':15,291 'json':430,528 'json.parse':531 'keep':347 'keybind':465 'keyboard':191 'launch':153 'lawvabl':5 'linux':635 'linux-x64':634 'list':250 'localstorag':341 'logic':83,326 'main':448 'manifest':427 'map':311 'marketplac':591 'menus':194,462 'messag':237,705 'microsoft':597 'minim':692 'modul':568 'move':322 'msg':494 'msg.type':496 'multipl':353 'my-extens':432 'my-extension-0.0.1.vsix':561 'myeditorprovid':276 'myext.dosomething':197 'myext.hello':454 'myext.myeditor':274 'mytreeprovid':255 'mytreeview':253 'myview':223 'name':134,418,431 'nativ':616 'need':118,160,309 'new':254,275 'node':399,567 'node.js':81 'npm':140,143,553 'one':695 'open':600,606 'open-sourc':605 'option':366,575 'outdir':413 'outfil':392 'outlin':249 'output':416 'packag':547,549,558,620,626,632 'package.json':133,426,651 'palett':190 'panel':167,211,221,225,355,703 'panel.webview.html':229 'panel.webview.ondidreceivemessage':493 'panel.webview.postmessage':487 'path.join':533 'pattern':261,476,546 'platform':398,610 'platform-specif':609 'portabl':67 'postmessag':334,480 'press':147 'process':376 'processcommand':536 'project':129 'prompt':361 'provid':714 'publish':136,438,441,592,595 'quick':107 'react':97,168,215,235,405,656,699,701 'react/vue':20 'read':642 'refer':637 'references/ai-integration.md':539,540,679 'references/api-reference.md':201,202,644 'references/build-config.md':421,422,670 'references/contribution-points.md':469,470,649 'references/conversion-guide.md':368,369,674 'references/custom-editor-patterns.md':278,279,664 'references/tree-view-patterns.md':257,258,659 'references/webview-patterns.md':232,233,654 'regist':185 'registri':603 'replac':264,313 'requir':596 'restructur':321 'rollupopt':415 'router':352 'run':74,139,144 'sandbox':92 'save':497 'scratch':11,60 'section':459 'see':119,200,231,256,277,367,420,468,538 'send':579 'set':464 'setup':236 'share':578 'shareabl':68 'shortcut':192 'sidebar':170,213,246,357,710 'simpl':162,384 'skill' 'skill-vscode-extension-builder-lawvable' 'sourc':607 'source-lawvable' 'specif':269,611,722 'src':569 'src/extension.ts':389 'stack':101 'start':108 'step':373,375 'step-by-step':372 'support':17,406 'sync':282 'system':378 'target':621,627,633 'templat':112,126,157,161,685,686 'titl':455 'tool':501 'topic-agent-skills' 'topic-automation' 'topic-law' 'topic-legal-work' 'topic-workflows' 'tree':23,121,159,172,240,661,707,711 'tree-view':706 'tree-view-patterns.md':658 'treedataprovid':260 'trigger':187 'true':228,391 'ts':570 'tsconfig.json':571 'two':76 'type':183,271,474,488,724 'typescript':102,195,219,251,272,484,517 'ui':94,166,209,323 'undo/redo':284 'unnecessari':564 'updat':132,489 'use':34,214,381,402,479,504 'user':36 'vanilla':99 'version':443 'via':29,188,583 'view':24,241,358,463,662,708,712 'vite':105,403 'vite.config.ts':408,573 'vs':7,41,52,56,71,86,150,304,317,338,590 'vsce':557,594,619,625,631 'vscode':2,395,446,566 'vscode-extension-builder-lawv':1 'vscode.commands.registercommand':196 'vscode.viewcolumn.one':226 'vscode.window.createwebviewpanel':222 'vscode.window.registercustomeditorprovider':273 'vscode.window.registertreedataprovider':252 'vscode.window.showinformationmessage':198,360 'vscode.window.showinputbox':362 'vscode.window.showwarningmessage':364 'vscode.workspace.fs':345 'vscode/vsce':556 'vscodeignor':562 'vsix':551,580 'vsx':601 'vue':98 'want':37 'watch':518 'web':46,64,314,336,676 'webview':19,90,106,206,325,354,400,478,486,491,657,698,702 'webview-patterns.md':653 'webview-react':697 'win32':623 'win32-x64':622 'wire':332 'x64':624,636 'your-publisher-id':439","prices":[{"id":"c497c547-8479-4ef4-aed6-46058a93e6bd","listingId":"5bfc5f74-8a58-4d8f-be31-dffb24e8e0d7","amountUsd":"0","unit":"free","nativeCurrency":null,"nativeAmount":null,"chain":null,"payTo":null,"paymentMethod":"skill-free","isPrimary":true,"details":{"org":"lawvable","category":"awesome-legal-skills","install_from":"skills.sh"},"createdAt":"2026-04-18T22:04:46.168Z"}],"sources":[{"listingId":"5bfc5f74-8a58-4d8f-be31-dffb24e8e0d7","source":"github","sourceId":"lawvable/awesome-legal-skills/vscode-extension-builder-lawvable","sourceUrl":"https://github.com/lawvable/awesome-legal-skills/tree/main/skills/vscode-extension-builder-lawvable","isPrimary":false,"firstSeenAt":"2026-04-18T22:04:46.168Z","lastSeenAt":"2026-05-02T18:53:57.116Z"}],"details":{"listingId":"5bfc5f74-8a58-4d8f-be31-dffb24e8e0d7","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"lawvable","slug":"vscode-extension-builder-lawvable","github":{"repo":"lawvable/awesome-legal-skills","stars":310,"topics":["agent-skills","automation","law","legal-work","workflows"],"license":"other","html_url":"https://github.com/lawvable/awesome-legal-skills","pushed_at":"2026-03-03T11:25:06Z","description":"A curated list of awesome Agent Skills for automating legal work","skill_md_sha":"ab9624f1dc96553216ec22b2fb5606ac466aec89","skill_md_path":"skills/vscode-extension-builder-lawvable/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/lawvable/awesome-legal-skills/tree/main/skills/vscode-extension-builder-lawvable"},"layout":"multi","source":"github","category":"awesome-legal-skills","frontmatter":{"name":"vscode-extension-builder-lawvable","description":"Build VS Code extensions from scratch or convert existing JS/React/Vue apps. Supports commands, webviews (React/Vue), custom editors, tree views, and AI agent integration via file-bridge IPC. Use when user wants to create a VS Code extension, convert a web app to an extension, add webviews or custom UIs to VS Code, implement tree views, build custom file editors, integrate with AI agents, or package/publish extensions (.vsix)."},"skills_sh_url":"https://skills.sh/lawvable/awesome-legal-skills/vscode-extension-builder-lawvable"},"updatedAt":"2026-05-02T18:53:57.116Z"}}