vscode-extension-builder-lawvable
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).
npx skills add lawve-ai/awesome-legal-skills --skill vs-code-extension-antoine-louis --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
# VS Code Extension Build VS Code extensions from scratch or convert existing web apps into portable, shareable extensions. ## Architecture VS Code extensions run in two contexts: 1. **Extension Host (Node.js)** — Backend logic, file access, VS Code APIs 2. **Webviews (browser sandbox)** — Custom UIs with HTML/CSS/JS (React, Vue, vanilla) Build stack: **TypeScript + esbuild** (extension) + **Vite** (webviews) ## Quick Start 1. Choose a template from `assets/` based on your needs (see decision tree below) 2. Copy the template to your project directory 3. Update `package.json`: name, displayName, publisher, description 4. Run `npm install` then `npm run build` 5. Press F5 in VS Code to launch Extension Development Host ## Template Decision Tree | Need | Template | |------|----------| | Simple command/action | `assets/basic-command/` | | Custom UI panel (React) | `assets/webview-react/` | | Sidebar file tree | `assets/tree-view/` | | Custom file editor | `assets/custom-editor/` | | AI agent integration | `assets/file-bridge/` | ## Extension Types ### Commands Register actions triggered via Command Palette, keyboard shortcuts, or menus. ```typescript vscode.commands.registerCommand('my
- Architecture
- Quick Start
- Template Decision Tree
- Extension Types
- Commands
- Webviews
- Tree Views
- Custom Editors
- Converting Existing Apps
- Build System
- package.json Manifest
- IPC Patterns
- Extension ↔ Webview
- Extension ↔ External Tools (AI Agents)
npm install -g @vscode/vsce vsce package vsce package --target win32-x64 vsce package --target darwin-arm64 vsce package --target linux-x64
What does the vscode-extension-builder-lawvable skill do?
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).
How do I install it?
Run `npx skills add lawve-ai/awesome-legal-skills --skill vs-code-extension-antoine-louis --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From lawve-ai/awesome-legal-skills, a repository with 618 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.