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: Fixes a reported bug, retrying up to three times until the tests pass. Use when the user reports a bug. --- # loop-example Fixes a reported bug, retrying up to three times until the tests pass. Use when the user reports a bug. Copy this checklist and check off each step as you go: ``` - [ ] 1. Start: Bug report - [ ] 2. Loop: Up to 3 tries - [ ] 3. Fix & test - [ ] 4. Decide: Tests pass? - [ ] 5. Finish: Pull request - [ ] 6. Finish: Escalate ``` 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 template: the Templates button opens them at any time, and Clear board starts over.
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. Steps can hand work over in files: one writes plan.md, the next reads it. 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.
Start from a shape that works, then make it yours. The bigger ones come with their instructions filled in. Press Try it on the board on any note to load it into the live board above.
One agent for one kind of request.
An agent that follows a reusable playbook.
Looks at the work, but can't change anything.
Does the work, checks it, retries up to 3 times.
Follows a playbook, checks the result, fixes it.
Separate agents plan, build and review, up to 3 rounds.
Facts with sources first, then text only from them.
A spec in spec.md you approve, then built and checked scenario by scenario.
Three helpers answer on their own; a chair ranks the answers and merges them.
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.
Plugins you installed in Claude Code are linked as they are, by names like superpowers:brainstorming, and never changed.
GitHub and marketplaces: enter a repository like anthropics/skills and pick agents and skills to copy onto the board. Each one remembers where it came from.
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