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).
インストールする前に、エージェントに与えられる指示の中身を確認できます。
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 |
まだレビューはありません。使ってみた感想をお寄せください。
概要と使いどころ
Creates an Agent Authority Charter for enterprise or regulated AI agents before deployment. Use this Skill when a user needs to define what an AI agent is allowed to do, who delegated authority to it, what actions are permitted or prohibited, when human approval is required, what evidence must be preserved, and how the agent can be suspended, revoked, or escalated.
日本語の概要は準備中です。原文の説明を表示しています。
EU AI Act Knowledge Engine — authoritative regulatory Q&A grounded in 70 official EU source documents (including the 2026 Commission draft guidelines on Art. 6 high-risk classification — general principles, Annex I, Annex III). Answers any question about the AI Act with article-level citations from the full regulation text, Commission guidelines, EDPB/EDPS opinions, codes of practice, harmonised standards, FRIA guides, incident templates, and sector-specific guidance. This skill should be used when the user asks about the "EU AI Act", "AI Act regulation", "Regulation 2024/1689", "KI-Verordnung", asks to "explain an AI Act article", "what does Article X say", "AI Act requirements", "AI Act penalties", "AI Act timeline", "GPAI obligations", "high-risk AI", "prohibited AI practices", "AI Act and GDPR", "fundamental rights impact assessment", "AI Act standards", "AI Act national implementation", "AI literacy", "serious incident reporting", "Digital Omnibus", "AI regulatory sandbox", or any question about EU artificial intelligence regulation. Also triggers on German terms: "KI-Gesetz", "KI-Verordnung", "Hochrisiko-KI", "KI-Kompetenz", "Grundrechte-Folgenabschaetzung", "GPAI-Verhaltenskodex". For assessment workflows that produce a classification decision rather than a knowledge answer, offer to run a structured risk-tier classification in-session.
日本語の概要は準備中です。原文の説明を表示しています。
This skill builds a structured audit trail of an AI-assisted task: what the tool was asked to do, what materials it was given, what it produced, how the output was verified, and what was ultimately relied upon. It documents the workflow for supervision and later review without ruling on privilege or disclosure, so the record stays accurate rather than self-serving.
日本語の概要は準備中です。原文の説明を表示しています。
Use this skill when the user wants an AI governance, legal-risk, privacy, compliance, procurement, or vendor-risk review of an internal AI use case, an AI product feature, an LLM workflow, or a third-party AI vendor. The skill asks intake and clarifying questions first when facts or evidence are missing, identifies required documentation and missing evidence, maps the use case to AI governance frameworks and applicable legal domains, and produces a preliminary or final governance review with scorecards, findings, owners, remediation actions, and follow-up questions.
日本語の概要は準備中です。原文の説明を表示しています。
Turn an interpretive-ambiguity audit of a legal text — contract, statute, regulation, or judicial opinion — into a polished deliverable. Produces a multi-page website (default), a single-page interactive site, a Microsoft Word document, a PowerPoint deck, or a LaTeX/PDF. Use whenever a user has a stress-test result, ambiguity audit, or "where will this be litigated" scenarios and wants to publish, present, or share them. Triggers on "publish the audit," "make a report from this," "turn this into a website / deck / brief / Word doc," "make a Netlify site," "build slides of these ambiguities," "render the scenarios," "package this stress test," "produce a LaTeX version," and similar. Pairs with the ambiguity-stress-test skill (the underlying analysis) but works on any structured or semi-structured ambiguity analysis. Visual design is opinionated but the user can override colors, fonts, and brand label. Most formats need Python and a writable filesystem; single-file HTML works where the host has neither.
日本語の概要は準備中です。原文の説明を表示しています。
Adversarially stress-tests a legal text — a contract, statute, regulation, or judicial opinion — for interpretive ambiguity: it finds the seams where the people governed by it will later disagree about what it means and turns each into a concrete dispute scenario with both sides' arguments, the likely outcome, and a fix. Use it whenever someone wants to pressure-test, red-team, audit, or find weak spots, loopholes, gaps, ambiguities, or drafting problems in a legal document; whenever a drafter wants to tighten a contract, statute, regulation, or opinion before it issues; whenever a litigator wants to mine an opinion or contract for arguments; or whenever someone hands over a legal text and asks where it will be fought over or for issue-spotting. Trigger it for contract review, statutory-ambiguity analysis, judicial-opinion scope analysis, and drafting QA — even if the user never says "stress-test" or "ambiguity."
日本語の概要は準備中です。原文の説明を表示しています。