From lawvable-awesome-legal-skills
Builds VS Code extensions from templates or converts JS/React/Vue apps. Supports commands, webviews (React/Vue), custom editors, tree views, AI agent integration via file-bridge, and .vsix packaging.
npx claudepluginhub joshuarweaver/cascade-business-ops --plugin lawvable-awesome-legal-skillsThis skill uses the workspace's default tool permissions.
Build VS Code extensions from scratch or convert existing web apps into portable, shareable extensions.
LICENSE.txtassets/basic-command/esbuild.jsassets/basic-command/package.jsonassets/basic-command/src/extension.tsassets/basic-command/tsconfig.jsonassets/custom-editor/esbuild.jsassets/custom-editor/package.jsonassets/custom-editor/src/editorProvider.tsassets/custom-editor/src/extension.tsassets/custom-editor/tsconfig.jsonassets/file-bridge/esbuild.jsassets/file-bridge/package.jsonassets/file-bridge/src/extension.tsassets/file-bridge/src/fileBridge.tsassets/file-bridge/tsconfig.jsonassets/tree-view/esbuild.jsassets/tree-view/package.jsonassets/tree-view/src/extension.tsassets/tree-view/src/treeProvider.tsassets/tree-view/tsconfig.jsonCreates isolated Git worktrees for feature branches with prioritized directory selection, gitignore safety checks, auto project setup for Node/Python/Rust/Go, and baseline verification.
Executes implementation plans in current session by dispatching fresh subagents per independent task, with two-stage reviews: spec compliance then code quality.
Dispatches parallel agents to independently tackle 2+ tasks like separate test failures or subsystems without shared state or dependencies.
Build VS Code extensions from scratch or convert existing web apps into portable, shareable extensions.
VS Code extensions run in two contexts:
Build stack: TypeScript + esbuild (extension) + Vite (webviews)
assets/ based on your needs (see decision tree below)package.json: name, displayName, publisher, descriptionnpm install then npm run build| 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/ |
Register actions triggered via Command Palette, keyboard shortcuts, or menus.
vscode.commands.registerCommand('myExt.doSomething', () => {
vscode.window.showInformationMessage('Done!');
});
See references/api-reference.md for common APIs.
Full HTML/CSS/JS UIs in panels or sidebar. Use React for complex interfaces.
const panel = vscode.window.createWebviewPanel(
'myView', 'My Panel', vscode.ViewColumn.One,
{ enableScripts: true }
);
panel.webview.html = getWebviewContent();
See references/webview-patterns.md for React setup, messaging, and CSP.
Hierarchical data in the sidebar (file explorers, outlines, lists).
vscode.window.registerTreeDataProvider('myTreeView', new MyTreeProvider());
See references/tree-view-patterns.md for TreeDataProvider patterns.
Replace the default editor for specific file types.
vscode.window.registerCustomEditorProvider('myExt.myEditor', new MyEditorProvider());
See references/custom-editor-patterns.md for document sync and undo/redo.
To convert a JS/React/Vue app into an extension:
| Web API | VS Code Equivalent |
|---|---|
localStorage | context.globalState / context.workspaceState |
fetch() | vscode.workspace.fs or keep fetch for external APIs |
| Router | Multiple webview panels or sidebar views |
alert() | vscode.window.showInformationMessage() |
prompt() | vscode.window.showInputBox() |
confirm() | vscode.window.showWarningMessage() with options |
See references/conversion-guide.md for detailed step-by-step process.
Extension code — Use esbuild (fast, simple):
// esbuild.js
esbuild.build({
entryPoints: ['src/extension.ts'],
bundle: true,
outfile: 'dist/extension.js',
external: ['vscode'],
format: 'cjs',
platform: 'node',
});
Webview code — Use Vite (HMR, React support):
// vite.config.ts
export default defineConfig({
build: {
outDir: '../dist/webview',
rollupOptions: { output: { entryFileNames: '[name].js' } }
}
});
See references/build-config.md for complete configurations.
Essential fields:
{
"name": "my-extension",
"displayName": "My Extension",
"publisher": "your-publisher-id",
"version": "0.0.1",
"engines": { "vscode": "^1.85.0" },
"main": "./dist/extension.js",
"activationEvents": [],
"contributes": {
"commands": [{ "command": "myExt.hello", "title": "Hello" }]
}
}
The contributes section defines commands, menus, views, settings, keybindings, and more.
See references/contribution-points.md for all contribution types.
Use postMessage for bidirectional communication:
// Extension → Webview
panel.webview.postMessage({ type: 'update', data: {...} });
// Webview → Extension
panel.webview.onDidReceiveMessage(msg => {
if (msg.type === 'save') { /* handle */ }
});
Use file-based IPC for communication with Claude Code or other agents:
// Watch for command files
fs.watch(commandDir, (event, filename) => {
if (filename.endsWith('.json')) {
const command = JSON.parse(fs.readFileSync(path.join(commandDir, filename)));
processCommand(command);
}
});
See references/ai-integration.md for the file-bridge pattern.
npm install -g @vscode/vsce
vsce package
This creates my-extension-0.0.1.vsix.
Exclude unnecessary files:
.vscode/**
node_modules/**
src/**
*.ts
tsconfig.json
esbuild.js
vite.config.ts
code --install-extension file.vsixvsce publish (requires Microsoft account)For extensions with native dependencies:
vsce package --target win32-x64
vsce package --target darwin-arm64
vsce package --target linux-x64
| File | When to Read |
|---|---|
| api-reference.md | Implementing extension features |
| contribution-points.md | Configuring package.json contributes |
| webview-patterns.md | Building React webviews |
| tree-view-patterns.md | Implementing tree views |
| custom-editor-patterns.md | Building custom file editors |
| build-config.md | Configuring esbuild/Vite |
| conversion-guide.md | Converting web apps |
| ai-integration.md | Integrating with AI agents |
| Template | Description |
|---|---|
| basic-command/ | Minimal extension with one command |
| webview-react/ | React webview panel with messaging |
| tree-view/ | Sidebar tree view with provider |
| custom-editor/ | Custom editor for specific file types |
| file-bridge/ | File-based IPC for AI agents |