MySkillOS — Skill Visualizer (VS Code Extension)

The IDE companion to myskillos.com. Visualize and edit your Claude Code skills — the .claude/agents/*.md subagent files in your workspace — as an interactive delegation graph, right inside VS Code.

It works in parallel with the web editor: design on the web, refine in your IDE, or the other way around. Same model, same parameters, same file format.

What it does

A full editor with the same model as the web app — not just a viewer:

• All node types: 👑 master (chief/orchestrator), 🛠️ sub (specialist), and workflow containers 📝 sequential, ⚡ parallel, 🔁 loop — add any from the toolbar.
• Workflow containers visually hold their child agents (set an agent's Inside workflow in the Inspector) and support dynamic fan-out (∞) with a fan out over description.
• Typed connections between top-level nodes — drag from a node's bottom port to another node, then pick handoff, parallel, report-to, or shared. Click an edge to change its type or delete it.
• Interactive canvas: pan (drag background), zoom (wheel / −/+), drag nodes, Fit to screen (⊡) so nothing overflows. Delete removes the selected node/edge.
• Inspector edits every Claude parameter (description, model, effort, tools/disallowedTools, permissionMode, memory, maxTurns, background, isolation, color, system prompt) plus skill-level settings (name, target LLM, deployment target).
• Save writes the structure to .myskillos/skill.json (source of truth for master/containers/connections/positions) and regenerates runnable .claude/agents/*.md, preserving any nested hooks/skills/mcpServers. With no skill.json yet, the structure is synthesized from existing .claude/agents.
• One-click upload to myskillos — ↗ myskillos'a yükle sends the whole structure (every node + container + typed connection + fan-out) to your account via the import API, then offers to open the created project. First use asks for your API key (myskillos.com → Settings → Generate API key, or MySkillOS: Set API Key); stored in VS Code's encrypted SecretStorage.

New to the concepts (orchestrator, report-to, parallel, effort…)? See the Academy.

Usage

1. Open a folder for your skill (existing .claude/agents/… is auto-loaded).
2. Command Palette → MySkillOS: Open Skill Visualizer (or right-click a folder).
3. Add nodes from the toolbar, connect them by dragging ports, edit in the Inspector.
4. 💾 Save writes .myskillos/skill.json + .claude/agents/*.md.
5. ↗ myskillos'a yükle publishes the whole structure to the web app.

Develop / run locally

cd vscode-extension
npm install
npm run compile        # or: npm run watch

Then press F5 in VS Code (with this folder open) to launch an Extension Development Host window. Open a workspace that has .claude/agents and run the command.

Package (.vsix)

npm install -g @vscode/vsce
vsce package

This produces myskillos-skill-visualizer-0.1.0.vsix, installable via Extensions → … → Install from VSIX.

File format

A subagent is a Markdown file with YAML frontmatter:

---
name: code-reviewer
description: Use after code changes to review for quality and security.
model: sonnet
tools: Read, Grep, Glob
---

You are a code reviewer. When invoked, analyze the code and give specific,
actionable feedback on quality, security, and best practices.

The extension reads/writes exactly this format — the same one myskillos.com exports.