Skill Canvas

Sketch how the work should flow. Skill Canvas writes the agent and skill files that Claude Code and GitHub Copilot run.

Draw the workflow with blocks and arrows, answer a few plain questions for each step, and export. No YAML, no folder rules to learn.

Try it in your browser · Website · Report an issue

Why Skill Canvas

• See the whole workflow. Steps, decisions and retries sit on one board, numbered in the order they run.
• Real files, not a new format. You get standard agent and skill files in the places Claude Code and GitHub Copilot look for them. They keep working without Skill Canvas installed.
• One sketch, two tools. Switch between Claude Code and GitHub Copilot at any time. The same board prints both.
• Bring what you have. Import the agents and skills you already wrote, edit them on the board, and export them back to the same files. Settings the board doesn't show are kept as they are. Link the plugins you installed in Claude Code, or copy agents and skills from any GitHub repository or marketplace.
• Start from a proven shape. Templates for every size of job, from a single agent to a spec-first build or a council of reviewers.
• Good skills by default. Every block is checked against Anthropic's skill authoring best practices, with plain tips on how to make it better.

Quick start

1. Create a canvas

Open a folder in VS Code. Then click New Canvas in the Skill Canvas view in the activity bar, or run Skill Canvas: New Canvas from the Command Palette (Ctrl+Shift+P, or Cmd+Shift+P on a Mac). Give it a name and it opens as <name>.skillcanvas in the folder.

Pick a template to begin with a working flow, or close the card and drag blocks in from the left. The templates are grouped by the size of the job. Click Templates in the block list to open them again at any time: on a board with blocks, the template goes below them. Clear board removes every block; undo brings them back.

The bigger templates come with their instructions filled in, so they work as they are. Change them to fit your project. Council uses a lead with helpers rather than separate steps, because a workflow runs its steps one after another. See Workflows, leads and helpers.

2. Sketch with blocks

3. Fill in each block

Select a block and the details panel on the right asks plain questions: what it's for, its instructions, and which tools it may use. Further down, the panel previews the exact file the block becomes. For an agent or a skill, switch to Edit file to change the Markdown yourself; your edits go back into the form. Drag the panel's left edge to make it wider or narrower.

A skill can also have:

• Extra files: details the AI only reads when it needs them, like a long reference or examples. They're saved next to the skill and linked from it, so the main instructions stay short.
• Test scenarios: real requests and what a good result does. Write at least three, then try them in chat. They're saved as evals/evals.json in the skill's folder.

Advanced holds the Claude Code settings:

• For a skill: who can start it, whether it runs on its own as a separate agent, its model and effort, and which files it's for.
• For an agent: its effort, a turn limit, permissions, tools it may never use, memory, and whether it works in a separate copy of the repository.

The toolbar counts anything still to fix, like an agent without instructions or a name Claude won't accept. When nothing is left to fix it says Ready, with the number of tips that could make it better. See Best-practice checks.

4. Connect the steps

• Order: drag from the dot on a block's outgoing edge to the next block. You can also pick the Next step in the details panel.
• Decisions and retries: an If block has a yes and a no path. A Loop has repeat and done.
• Skills and tools: drag from the small handle under an agent to a Skill or Tool block. The dotted uses link gives that agent the skill.
• Helper agents: drag from that handle to another Agent block, or use Agents it can hand work to in the details panel. The first agent becomes a lead that can pass parts of the work to its helpers. See Workflows, leads and helpers.
• Hand work over in files: fill in Reads files and Writes files on an agent or skill, like plan.md or spec.md. The workflow tells each step which files to read first and where to save its result. A step that reads a file no other step writes gets a tip.
• Tidy up: the Arrange buttons at the bottom right lay the board out left to right or top to bottom. The step numbers follow along.

5. Export

Choose Claude Code or GitHub Copilot in the toolbar and click Export. Skill Canvas asks where to save:

• This project: in the workspace, so you can commit the files and share them with your team.
• All my projects: in your user folder, so they're available everywhere.

Before anything is written, you see every file and whether it's new or an update. Files this canvas wrote last time are updated in place. A file that exists but wasn't written by this canvas starts unchecked. If you check it, the original goes to the trash before it's replaced.

6. Run it

Type the workflow's command in Claude Code or GitHub Copilot Chat, for example /loop-example. The command is shown at the top of the canvas; click it to copy it. The workflow hands each step to the agents you drew.

Import the agents and skills you already have

Click Import agents & skills in the block list, or run Skill Canvas: Import Agents & Skills. The list has three kinds of sources:

• Your files: .claude or .github in your project, and your user folder (~/.claude, ~/.copilot).
• Plugins you installed in Claude Code, linked rather than copied. See Use plugins you installed in Claude Code.
• A GitHub repository or marketplace, copied onto the board. See Download from GitHub or a marketplace.

Skills an agent already loads arrive linked to it. Edit them on the board, export, and the same files update in place.

Nothing is lost on the way back:

• Settings the board doesn't show, like hooks or mcpServers, are written back exactly as they were.
• Markdown files in a skill's folder become its extra files, and evals/evals.json becomes its test scenarios.
• Other files, like scripts, are listed and left alone.

Download from GitHub or a marketplace

Pick From a GitHub repository or marketplace… at the top of the import list, then enter a repository like anthropics/skills, a marketplace like anthropics/claude-plugins-official, or a link to a folder in one. Skill Canvas lists every agent and skill it finds, grouped by folder (one group per plugin in a marketplace), with the repository's license in the title.

What you pick is copied onto the board, where you can read and change it before you export:

• The agent or skill file, its other Markdown files and its test scenarios come along. Scripts and other files are named but not downloaded; get them from the repository if a skill needs them.
• Each block remembers the repository and commit it came from, shown at the top of its details.
• Nothing is written until you export. If a file with the same name is already in your project, the export asks before replacing it.

If you're signed in to GitHub in VS Code, that account is used, so private repositories work and the hourly limit is higher. Skill Canvas never asks you to sign in.

Use plugins you installed in Claude Code

Plugins you installed with /plugin install also appear in the import list, one group per plugin. Their agents and skills are linked, not copied. On the board they show the plugin's name, like Skill · superpowers, and the export refers to them as superpowers:brainstorming. Use them as steps, give them to an agent, or make them helpers. Skill Canvas never writes or changes a plugin's files, so updating the plugin keeps working.

Plugins are a Claude Code feature, so a board that uses them shows a warning when you switch to GitHub Copilot.

Best-practice checks

Skill Canvas checks every agent and skill against Anthropic's skill authoring best practices and the Claude Code reference.

• To fix: things Claude would reject or cut off.
  • A name that isn't lowercase letters, numbers and hyphens, or that contains "claude" or "anthropic".
  • A missing description, or one over 1,024 characters.
  • XML tags.
  • A model, effort or other setting Claude Code doesn't accept.
• Tips: the guide's advice. Tips never block an export.
  • Say when to use it ("Use when the user asks for release notes").
  • Describe it in the third person ("Writes release notes…", not "I can…").
  • Be specific, and avoid generic names like helper or utils.
  • Keep the instructions under 500 lines, moving details into extra files.
  • Use forward slashes in paths, and avoid dates that will go out of date.
  • Only link to files that exist.
  • Start extra files over 100 lines with a contents list, and link them from the main instructions rather than from each other.
  • Write at least three test scenarios.

The same checks run when you open a SKILL.md or agent file as text, including files you didn't make with the canvas. Things to fix show as warnings and tips as information in the Problems view. To turn this off, set skillCanvas.lint.enabled to false.

Workflows, leads and helpers

There are two ways to have several agents work together.

• A workflow (the usual way). Connect two or more steps and Skill Canvas writes a workflow skill, which you run as a /command. The main chat follows the numbered steps and hands each one to the right agent. It checks results at If blocks and retries in Loop blocks. This is the orchestration pattern Claude Code recommends, and you can see every step on the board.
• A lead with helpers. Link one agent to others. The lead gets the Agent tool and the names of its helpers, and decides itself when to pass work on. Helpers aren't steps of the workflow. Claude Code allows agents to start agents up to three levels deep.

A list after Agent, as in tools: Agent(worker, researcher), only limits which agents can be started when the agent runs as the main session (claude --agent lead). In a normal agent, the list is ignored.

Where the files go

Standard locations, so the tools find them without Skill Canvas installed.

A skill's extra files and test scenarios go in its folder, next to SKILL.md, for example reference/forms.md and evals/evals.json.

Keyboard shortcuts

Commands and settings

Export and Import are also buttons in the canvas's editor title bar.

Good to know

• Your canvas is a file. A .skillcanvas file is plain JSON. Commit it next to the files it makes, so your team can open and change the workflow too.
• Your work stays on your machine. Skill Canvas reads and writes files in your workspace and user folder. It only goes online when you import from GitHub, to download the list and the files you pick. Nothing is uploaded.
• It follows your theme, including high contrast themes.
• Requirements: VS Code 1.90 or later. To run what you export, you need Claude Code or GitHub Copilot.

Contributing

Bug reports and ideas are welcome in GitHub issues. To build and test the extension yourself, see CONTRIBUTING.md.

License

Apache License 2.0. Skill Canvas is not affiliated with Anthropic or GitHub.