Skill Canvas
GitHub
Install
Skill Canvas is a free VS Code extension. Draw how the work should flow, answer a few plain questions for each step, and it writes the agent and skill files that Claude Code and GitHub Copilot run. No YAML, no folder rules to learn.
Or from a terminal:
code --install-extension alaturqua.skill-canvas
.claude/agents/fix-test.md--- name: fix-test description: Fixes a reported bug and runs the tests. Use for bug reports. tools: Read, Edit, Bash skills: - write-pr-notes --- You fix bugs. 1. Reproduce the bug. 2. Fix it with the smallest change. 3. Run the tests.
.claude/skills/loop-example/SKILL.md--- name: loop-example description: Fix a reported bug, retrying up to three times until the tests pass. --- # loop-example Fix a reported bug, retrying up to three times until the tests pass. Follow these steps. "Go to step N" means continue from that step. 1. **Start: Bug report.** The user provides: A bug report with steps to reproduce. Then go to step 2. 2. **Loop: Up to 3 tries.** Repeat up to 3 times, counting iterations. Each iteration, go to step 3; a step that leads back here starts the next iteration. When the loop ends, go to step 6. 3. **Fix & test.** Delegate to the `fix-test` subagent. Then go to step 4. 4. **Decide: Tests pass?** Check: All tests pass. If yes, go to step 5. If no, go to step 2. 5. **Finish: Pull request.** Deliver: A pull request with a short summary. Stop here. 6. **Finish: Escalate.** Deliver: What was tried and why it failed. Stop here.
This is the real editor, running in your browser. Drag a block in, connect it, press Arrange. Select a block to fill it in on the right, and its Claude Code and Copilot files reprint below. Nothing leaves this page.
Export here only shows what it would save. The extension writes the files.
.claude/agents/fix-test.md--- name: fix-test description: Fixes a reported bug and runs the tests. Use for bug reports. tools: Read, Edit, Bash skills: - write-pr-notes --- You fix bugs. 1. Reproduce the bug. 2. Fix it with the smallest change. 3. Run the tests.
.github/agents/fix-test.agent.md--- name: fix-test description: Fixes a reported bug and runs the tests. Use for bug reports. tools: - Read - Edit - Bash --- You fix bugs. 1. Reproduce the bug. 2. Fix it with the smallest change. 3. Run the tests. When it helps, use these skills: `write-pr-notes`.
Five steps, all inside VS Code.
Drag blocks onto the board: Input, Agent, Skill, Tool, If, Loop and Output. Or start from a ready-made starter.
Each block asks plain questions: what it's for, its instructions, which tools it may use. The preview shows the file it becomes.
Arrows set the order. A dotted uses link gives an agent a skill or tool. If and Loop handle yes, no and retries. Arrange tidies it all left to right or top to bottom.
Save to this project or to all your projects. Skill Canvas lists every file before writing, and updates the ones it wrote last time.
Type the workflow's command, like /loop-example, in Claude Code or GitHub Copilot Chat.
Import brings them onto the board from .claude or .github in your project, or from your user folder. Skills an agent preloads arrive already linked. Edit them on the board, export, and the same files update in place.
Standard locations, so the tools find them without Skill Canvas installed.
| For | Agents | Skills and workflows |
|---|---|---|
| Claude Code, this project | .claude/agents/<name>.md | .claude/skills/<name>/SKILL.md |
| Claude Code, all projects | ~/.claude/agents/<name>.md | ~/.claude/skills/<name>/SKILL.md |
| GitHub Copilot, this project | .github/agents/<name>.agent.md | .github/skills/<name>/SKILL.md |
| GitHub Copilot, all projects | ~/.copilot/agents/<name>.agent.md | ~/.copilot/skills/<name>/SKILL.md |
Free and open source under the Apache License 2.0.
Or from a terminal:
code --install-extension alaturqua.skill-canvas