Excalidraw Canvas Toolkit
lingzhi227/agent-research-skills
Draws and refines Excalidraw diagrams on a live canvas through MCP tools or a REST API, with screenshots, file import and export, snapshots and Mermaid conversion.
Teaches the agent to use the ccwf command line tool to validate, preview, render, export and run cc-wf-studio workflow JSON files without opening VS Code.
Install ccwf Workflow CLI
$ npx skills add breaking-brake/cc-wf-studio --skill ccwf-cli -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install breaking-brake/cc-wf-studio ccwf-cli --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/breaking-brake/cc-wf-studio.git skills-src && mkdir -p .claude/skills && cp -r skills-src/packages/cli/skills/ccwf-cli .claude/skills/ccwf-cli && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "ccwf-cli" agent skill from https://github.com/breaking-brake/cc-wf-studio/tree/main/packages/cli/skills/ccwf-cli into .claude/skills/ccwf-cli/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "ccwf-cli", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/breaking-brake/cc-wf-studio/tree/main/packages/cli/skills/ccwf-cliType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add breaking-brake/cc-wf-studio --skill ccwf-cli -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install breaking-brake/cc-wf-studio ccwf-cli --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/breaking-brake/cc-wf-studio.git skills-src && mkdir -p .agents/skills && cp -r skills-src/packages/cli/skills/ccwf-cli .agents/skills/ccwf-cli && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "ccwf-cli" agent skill from https://github.com/breaking-brake/cc-wf-studio/tree/main/packages/cli/skills/ccwf-cli into .agents/skills/ccwf-cli/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "ccwf-cli", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add breaking-brake/cc-wf-studio --skill ccwf-cli -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install breaking-brake/cc-wf-studio ccwf-cli --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/breaking-brake/cc-wf-studio.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/packages/cli/skills/ccwf-cli .cursor/skills/ccwf-cli && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "ccwf-cli" agent skill from https://github.com/breaking-brake/cc-wf-studio/tree/main/packages/cli/skills/ccwf-cli into .cursor/skills/ccwf-cli/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "ccwf-cli", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/breaking-brake/cc-wf-studio.git --path packages/cli/skills/ccwf-cli--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add breaking-brake/cc-wf-studio --skill ccwf-cli -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install breaking-brake/cc-wf-studio ccwf-cli --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/breaking-brake/cc-wf-studio.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/packages/cli/skills/ccwf-cli .gemini/skills/ccwf-cli && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "ccwf-cli" agent skill from https://github.com/breaking-brake/cc-wf-studio/tree/main/packages/cli/skills/ccwf-cli into .gemini/skills/ccwf-cli/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "ccwf-cli", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install breaking-brake/cc-wf-studio ccwf-cliInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add breaking-brake/cc-wf-studio --skill ccwf-cli -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/breaking-brake/cc-wf-studio.git skills-src && mkdir -p .github/skills && cp -r skills-src/packages/cli/skills/ccwf-cli .github/skills/ccwf-cli && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "ccwf-cli" agent skill from https://github.com/breaking-brake/cc-wf-studio/tree/main/packages/cli/skills/ccwf-cli into .github/skills/ccwf-cli/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "ccwf-cli", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add breaking-brake/cc-wf-studio --skill ccwf-cli -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install breaking-brake/cc-wf-studio ccwf-cli --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/breaking-brake/cc-wf-studio.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/packages/cli/skills/ccwf-cli .opencode/skills/ccwf-cli && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "ccwf-cli" agent skill from https://github.com/breaking-brake/cc-wf-studio/tree/main/packages/cli/skills/ccwf-cli into .opencode/skills/ccwf-cli/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "ccwf-cli", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
- Skill name
ccwf-cli- GitHub stars
- 5.4k
- Token cost
- ~3.3k tokens
- SKILL.md length
- 1,262 words
- Files
- 1
- Skills in repo
- 11
- Repo updated
- First seen
- Licence
- Custom licence
At a glance
Teaches the agent to use the ccwf command line tool to validate, preview, render, export and run cc-wf-studio workflow JSON files without opening VS Code.
- Works in 3 steps: ccwf validate — schema-check it. Exit 0… → ccwf preview — opens a read-only viewer… → ccwf export or ccwf run — materialises…
- Checking a cc-wf-studio workflow JSON file against its schema
- SKILL.md covers Prerequisites, Core workflow, Subcommand reference and Mapping user phrasing to…, plus 2 more sections
- Calls npx, pnpm and npm
What it does
ccwf is the terminal entry point to cc-wf-studio, a visual tool for agent workflows, and this skill tells the agent when to reach for it and which subcommand fits. validate checks a workflow file against the schema, preview opens a read-only browser viewer with a Mermaid chart and per-node Markdown, and render prints the same Markdown bundle to stdout so it can be piped into another tool or pasted into a pull request.
export and run turn a workflow into Skill files for Claude Code or another agent, and run goes on to start it with claude. Before anything else the agent confirms ccwf --version, and if the command is missing it installs @cc-wf-studio/cli globally with npm or prefixes commands with npx. Workflow files normally sit under .vscode/workflows, and the agent is told to stop and report the exact error if a step fails.
When your agent uses it
- Checking a cc-wf-studio workflow JSON file against its schema
- Previewing a workflow in the browser without VS Code
- Getting a Mermaid diagram of a workflow for a PR or chat message
- Converting a workflow into a Skill and running it
Example prompts
- “Validate .vscode/workflows/release-flow.json and tell me what is wrong with it.”
- “Show me what is inside my onboarding workflow as a Mermaid diagram.”
- “Export the triage workflow as a Claude Code Skill and run it.”
Requirements
- The ccwf CLI from @cc-wf-studio/cli, installed with npm or run through npx
- Pre-approved tools (allowed-tools): Bash(ccwf:*), Bash(npx @cc-wf-studio/cli:*)
Workflow steps
3 steps, taken from the first numbered list in SKILL.md.
- ccwf validate — schema-check it. Exit 0 = clean, exit 1 = errors. Run this first whenever you receive a workflow from elsewhere.
- ccwf preview — opens a read-only viewer (Mermaid + per-node Markdown) in the browser. Use this when the user says "show me" / "what's in…
- ccwf export or ccwf run — materialises the workflow as Claude Code (or another agent's) Skill files. Use run when the user wants the next…
What it can do on your machine
Read from SKILL.md and the folder at commit a7bf24a. It shows what the files ask for, not the result of running them.
Tool permissions
Pre-approves these tools, so the agent can use them without asking each time:
Bash(ccwf:*)Bash(npx @cc-wf-studio/cli:*)
From allowed-tools in the SKILL.md frontmatter.
Runs code
Shell commands in SKILL.md call:
npxpnpmnpm
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md. Its commands use npx, pnpm and npm, which can reach the network depending on how they are called.
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Context cost
ccwf Workflow CLI loads about 3.3k tokens when it runs. Until then it costs about 116 tokens; SKILL.md has 1,262 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
Safety
Auto-check passed
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.
SKILL.md
Its licence (Custom licence) doesn't allow us to republish the file, so here is its outline and opening line. It has 1,262 words (~3,272 tokens).
“ccwf is the command-line entry into cc-wf-studio — a visual AI-agent workflow tool. It treats .vscode/workflows/*.json workflow files as inputs and lets you render them as Markdown, validate the schema, open them in a browser-based viewer, convert them into Agent…”
- name
- ccwf-cli
- allowed-tools
- Bash(ccwf:*), Bash(npx @cc-wf-studio/cli:*)
Files
Just SKILL.md in packages/cli/skills/ccwf-cli of breaking-brake/cc-wf-studio.
Open the folder on GitHubat commit a7bf24a
Compare with similar skills
ccwf Workflow CLI next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| ccwf Workflow CLI this skillbreaking-brake/cc-wf-studio | 5.4k | — | ~3.3k | Automated safety check: Pass | Custom licence | |
| Excalidraw Canvas Toolkitlingzhi227/agent-research-skills | 383 | — | ~3.8k | Automated safety check: Pass | None | |
| Cl Executeclosedloop-ai/claude-plugins | 122 | — | ~6.4k | Automated safety check: Pass | Apache-2.0 | |
| Plannotator Visual Explainerbacknotprop/plannotator | 9.2k | — | ~1.7k | Automated safety check: Pass | Apache-2.0 | |
| Audit Flowzebbern/claude-code-guide | 4.6k | — | ~4.2k | Automated safety check: Pass | MIT | |
| Work Issuejoesaby/astro-mermaid | 123 | — | ~891 | Automated safety check: Pass | MIT |
Similar skills
Cl Execute
closedloop-ai/claude-plugins
Draft and upload ClosedLoop implementation plans with Mermaid scope flowcharts, then execute one ClosedLoop feature ticket or a parent-approved coherent multi-ticket feature end to end on Codex…
Plannotator Visual Explainer
backnotprop/plannotator
Builds self-contained HTML explainers for plans, pull requests and technical concepts in Plannotator's theme, then opens them in its annotation view.
Audit Flow
zebbern/claude-code-guide
Interactive system flow tracing across CODE, API, AUTH, DATA, NETWORK layers with SQLite persistence and Mermaid export.
Work Issue
joesaby/astro-mermaid
End-to-end workflow for resolving a GitHub issue in astro-mermaid — triages complexity, then runs brainstorm → TDD → implement → docs/spec → code review at the right depth.
Codebase Pathfinder
thedotmack/claude-mem
Maps a codebase into feature-grouped Mermaid flowcharts, finds duplicated concerns across features and proposes a unified architecture with handoff prompts for planning.
More from breaking-brake/cc-wf-studio
All 11 skills in this repoPR Review Analysis
breaking-brake/cc-wf-studio
Fetches review comments from a GitHub pull request, checks each one against the real code, rates it valid, invalid or partial, and can reply on GitHub.
CC Workflow Studio AI Editor
breaking-brake/cc-wf-studio
Creates and edits visual agent workflows in CC Workflow Studio through conversation, with the agent reading and writing the canvas over MCP.
Workflow Schema Tuning
breaking-brake/cc-wf-studio
Guides edits to cc-wf-studio's workflow schema so AI agents generate better workflows, treating schema text as prompt engineering rather than validation.
Changesets Pull Request to Main
breaking-brake/cc-wf-studio
Opens a pull request to main in a pnpm and Changesets monorepo, after working out which packages changed and making sure a changeset file exists.
PR Merge Branch Cleanup
breaking-brake/cc-wf-studio
Clean up merged feature branches after PR to main is merged. Use when the user says "ブランチ削除", "cleanup", "マージ後の片付け", or wants to delete a merged branch.
Next Idea Ideation Loop
breaking-brake/cc-wf-studio
Runs one unattended ideation round for cc-wf-studio: orient on plans and issues, invent user-visible improvements, judge them against a value bar and file the winners as locked idea issues.
Related
Works with
Categories
Questions about ccwf Workflow CLI
What does ccwf Workflow CLI do?
Teaches the agent to use the ccwf command line tool to validate, preview, render, export and run cc-wf-studio workflow JSON files without opening VS Code. ccwf is the terminal entry point to cc-wf-studio, a visual tool for agent workflows, and this skill tells the agent when to reach for it and which subcommand fits. validate checks a workflow file against the schema, preview opens a read-only browser viewer with a Mermaid chart and per-node Markdown, and render prints the same Markdown bundle to stdout so it can be piped into another tool or pasted into a pull request.
When should I use ccwf Workflow CLI?
ccwf Workflow CLI fits situations like: checking a cc-wf-studio workflow JSON file against its schema; previewing a workflow in the browser without VS Code; getting a Mermaid diagram of a workflow for a PR or chat message; converting a workflow into a Skill and running it.
How do I install ccwf Workflow CLI in Claude Code?
Run `npx skills add breaking-brake/cc-wf-studio --skill ccwf-cli -a claude-code`. Or copy the skill folder (packages/cli/skills/ccwf-cli in breaking-brake/cc-wf-studio) into .claude/skills/ccwf-cli in your project. Claude Code loads it when a task matches its description.
How do I install ccwf Workflow CLI in Codex?
Run `npx skills add breaking-brake/cc-wf-studio --skill ccwf-cli -a codex`. Or copy the skill folder (packages/cli/skills/ccwf-cli in breaking-brake/cc-wf-studio) into .agents/skills/ccwf-cli in your project. Codex loads it when a task matches its description.
Can I use ccwf Workflow CLI in Cursor, Gemini CLI or GitHub Copilot?
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add breaking-brake/cc-wf-studio --skill ccwf-cli -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/ccwf-cli, .gemini/skills/ccwf-cli, .github/skills/ccwf-cli and .opencode/skills/ccwf-cli in your project.
What does ccwf Workflow CLI need to run?
Going by SKILL.md and its folder, ccwf Workflow CLI needs the command-line tools its instructions call (npx, pnpm and npm). Our summary lists: The ccwf CLI from @cc-wf-studio/cli, installed with npm or run through npx. Its frontmatter pre-approves these tools: Bash(ccwf:*), Bash(npx @cc-wf-studio/cli:*).
Does ccwf Workflow CLI access the network?
SKILL.md contains no URLs. Its commands use npx and npm, which can reach the network depending on how they are called. This is read from the text; nothing was executed.
Is ccwf Workflow CLI safe to install?
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.
What licence does ccwf Workflow CLI use?
ccwf Workflow CLI has a licence file (the repository's licence) that doesn't match a standard licence. Read it on GitHub before reusing the skill.
How many tokens does ccwf Workflow CLI use?
About 3.3k tokens (SKILL.md is roughly 13k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.
What are the alternatives to ccwf Workflow CLI?
Skills that share tags, products or a category with ccwf Workflow CLI: Excalidraw Canvas Toolkit (lingzhi227/agent-research-skills, 383 stars), Cl Execute (closedloop-ai/claude-plugins, 122 stars), Plannotator Visual Explainer (backnotprop/plannotator, 9.2k stars) and Audit Flow (zebbern/claude-code-guide, 4.6k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains ccwf Workflow CLI?
breaking-brake (a GitHub user) maintains it in breaking-brake/cc-wf-studio, which has 5,391 GitHub stars. The repository holds 11 skills in this directory. The repository was last updated on October 7, 2026.
Source: breaking-brake/cc-wf-studio on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.