skills.rest
miethe
mietheCOMMUNITY
Explore all skills by this author →
Website𝕏@MietheGitHub

vscode-extension-builder-lawvable

Build or convert VS Code extensions with TypeScript, webviews, and VSIX packaging.

Updated May 3, 2026
Search Tags:#typescript#react#ai integration#webviews#vscode extensions#custom editors#vsix packaging
One-click install
npx skills add https://github.com/miethe/boxbrain-2 --skill vscode-extension-builder-lawvable-miethe
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vscode-extension-builder-lawvable
Source: https://github.com/miethe/boxbrain-2/tree/main/.claude/skills/vscode-extension-builder-lawvable
Command: npx skills add https://github.com/miethe/boxbrain-2 --skill vscode-extension-builder-lawvable-miethe

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) and assets (resource) components.

What problem does it solve?

This Skill streamlines the creation and conversion of VS Code extensions, removing the complexity of wiring extension-host logic, webviews, editors, views, builds, packaging, and AI-agent communication.

Core Features & Use Cases

  • Extension Development: Build commands, tree views, custom editors, sidebar interfaces, and React or Vue webviews with TypeScript.
  • App Conversion: Adapt existing JavaScript, React, Vue, or other web applications into VS Code extensions by mapping browser APIs to VS Code APIs.
  • AI Integration: Implement file-based bridge IPC between extensions and terminal-based AI agents, with command validation, path sanitization, and rate limiting.
  • Build and Distribution: Configure esbuild and Vite, establish development workflows, package extensions as VSIX files, and prepare them for marketplace distribution.
  • Use Case: Convert an existing React dashboard into a VS Code sidebar extension with persistent state, extension commands, and a production-ready webview build.

Quick Start

Use this Skill to create or convert a VS Code extension, selecting the appropriate template and implementing the required commands, webviews, views, editors, or AI integration.

Frequently Asked Questions about vscode-extension-builder-lawvable

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

FAQPage Schema
How do I convert an existing React application into a VS Code extension?▼

To convert a React application into a VS Code extension, you map browser APIs to VS Code APIs and configure Vite for webview builds. This process adapts your existing JavaScript or React dashboard into a sidebar interface with persistent state.

How does file-based IPC bridge communication work for VS Code AI integration?▼

File-based IPC bridge communication connects VS Code extensions with terminal-based AI agents using file passing. It includes command validation, path sanitization, and rate limiting to ensure secure interactions between the extension host and external AI tools.

What is the best way to package and distribute a TypeScript VS Code extension?▼

The best way to package a TypeScript VS Code extension is using esbuild for bundling and creating a VSIX file. You configure the contribution-point manifest and prepare the VSIX package for direct marketplace distribution.

Can I use Vue for webviews in VS Code extensions?▼

Yes, you can use Vue for webviews in VS Code extensions. The Skill supports building sidebar interfaces and custom editors with both React and Vue, utilizing Vite for the webview build process and postMessage for communication.

How do I implement custom editors and tree views in a VS Code extension?▼

To implement custom editors and tree views, you define contribution points in the manifest and wire extension-host logic using TypeScript. This allows you to provide commands, sidebar interfaces, and custom document editing capabilities within VS Code.

Related Skills

Explore More Software Engineering Skills→
GemachDAOGemachDAO
4

gdex-ui-install-setup

Scaffold a React or Next.js project with a GDEX SDK provider.

Official
Intermediate
sergeyitalysergeyitaly
1

cursor-kiro-extension-publishing

Publish VS Code extension VSIX files to Open VSX for Cursor and Kiro IDEs.

Community
Intermediate
jhl-labsjhl-labs
50

LangGraph Agent Integration

Integrate LangGraph agents into SEPilot Desktop with IPC streaming.

Official
Advanced
LuminairPrimeLuminairPrime

vscode-extension-builder-lawvable

Build and convert VS Code extensions with TypeScript, Vite, and esbuild.

Community
Advanced