How do I install the Vscode Extension skill?

Run npx skillmds@latest add tomevault-io/vscode-extension in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Vscode Extension safe to use?

This skill has not completed SkillMD's automated safety review yet. Independent scanners report: SkillSpector: PASS, Skill Scanner: PASS. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Vscode Extension?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Vscode Extension free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Vscode Extension?

tomevault-io (@tomevault-io) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Vscode Extension by tomevault-io — Agent Skill

Name: Vscode Extension
Author: tomevault-io

File contents

VS Code Extension Development

Architecture

Directory	Purpose
`src/extension.ts`	Entry point, command registration
`src/completion/`	Autocomplete for `provider:` and `kind:`
`src/diagnostics/`	YAML validation, error highlighting
`src/ops/`	CLI detection, server management
`snippets/figram.json`	YAML snippets

Build

cd packages/vscode
bun run build:dev    # Development with sourcemaps
bun run dev          # Watch mode
bun run build        # Production
bun run package      # Create .vsix

Debug: F5 in VS Code → Extension Development Host

Commands

ID	Title
`figram.init`	Init diagram.yaml
`figram.build`	Build JSON
`figram.serve.start`	Start Serve
`figram.serve.stop`	Stop Serve
`figram.serve.restart`	Restart Serve
`figram.serve.quickPick`	Serve Actions
`figram.refreshDiagnostics`	Refresh Diagnostics

Configuration

Setting	Default	Description
`figram.cli.command`	null	Custom CLI command
`figram.serve.host`	127.0.0.1	Server host
`figram.serve.port`	3456	Server port
`figram.serve.allowRemote`	false	Allow remote
`figram.serve.secret`	""	Auth secret
`figram.diagnostics.enabled`	true	Enable diagnostics
`figram.diagnostics.debounceMs`	300	Debounce delay

Adding Features

New Command

Add to package.json → contributes.commands
Register in extension.ts with vscode.commands.registerCommand()
Add to context.subscriptions

New Configuration

Add to package.json → contributes.configuration.properties
Read with vscode.workspace.getConfiguration("figram.xxx")

New Completion Provider

Create class implementing vscode.CompletionItemProvider
Register with vscode.languages.registerCompletionItemProvider()

New Snippet

Add to snippets/figram.json
Update docs (docs/en/vscode-extension.md, docs/ja/vscode-extension.md)

Converted and distributed by TomeVault — claim your Tome and manage your conversions.

---name: vscode-extensiondescription: VS Code extension development workflow. Use when adding/modifying completion providers, diagnostics, CLI integration, server management, snippets, or building/packaging the extension. Use when this capability is needed.---# VS Code Extension Development## Architecture| Directory | Purpose ||-----------|---------|| `src/extension.ts` | Entry point, command registration || `src/completion/` | Autocomplete for `provider:` and `kind:` || `src/diagnostics/` | YAML validation, error highlighting || `src/ops/` | CLI detection, server management || `snippets/figram.json` | YAML snippets |## Build```bashcd packages/vscodebun run build:dev # Development with sourcemapsbun run dev # Watch modebun run build # Productionbun run package # Create .vsix```Debug: F5 in VS Code → Extension Development Host## Commands| ID | Title ||----|-------|| `figram.init` | Init diagram.yaml || `figram.build` | Build JSON || `figram.serve.start` | Start Serve || `figram.serve.stop` | Stop Serve || `figram.serve.restart` | Restart Serve || `figram.serve.quickPick` | Serve Actions || `figram.refreshDiagnostics` | Refresh Diagnostics |## Configuration| Setting | Default | Description ||---------|---------|-------------|| `figram.cli.command` | null | Custom CLI command || `figram.serve.host` | 127.0.0.1 | Server host || `figram.serve.port` | 3456 | Server port || `figram.serve.allowRemote` | false | Allow remote || `figram.serve.secret` | "" | Auth secret || `figram.diagnostics.enabled` | true | Enable diagnostics || `figram.diagnostics.debounceMs` | 300 | Debounce delay |## Adding Features### New Command1. Add to `package.json` → `contributes.commands`2. Register in `extension.ts` with `vscode.commands.registerCommand()`3. Add to `context.subscriptions`### New Configuration1. Add to `package.json` → `contributes.configuration.properties`2. Read with `vscode.workspace.getConfiguration("figram.xxx")`### New Completion Provider1. Create class implementing `vscode.CompletionItemProvider`2. Register with `vscode.languages.registerCompletionItemProvider()`### New Snippet1. Add to `snippets/figram.json`2. Update docs (`docs/en/vscode-extension.md`, `docs/ja/vscode-extension.md`)---> Converted and distributed by [TomeVault](https://tomevault.io/claim/7nohe) — claim your Tome and manage your conversions.

Frequently asked questions

Vscode Extension