Development
Plugin
cc-wf-studio
You think visually. AI thinks in .md. CC Workflow Studio speaks both. Design workflows on a canvas. Export as Markdown your AI agent already understands. No more prompt-guessing. Why CC Workflow Studio? - Speaker Deck Link
Plugin Signal78/100Solid
maintained100
capable53
documented75
adopted79
Install
$ npx -y skills add breaking-brake/cc-wf-studio --agent claude-code
Run the curl in your terminal, the rest in Claude Code.
Stats
5,347
Stars
573
Forks
Active
Maintenance
TypeScript
Language
7h ago
Last commit
9mo ago
Created
Repo: breaking-brake/cc-wf-studio
What's inside
Skills
10/jira-driven-planningJiraใใฑใใใฎ่ฆไปถใจConfluenceใฎ้ข้ฃใใญใฅใกใณใใๅบใซใFrontend/Backend/Infrastructureใซๅๅฒใใๅฎ่ฃ
่จ็ปใ็ญๅฎใใใใฉใณใใณใฐในใญใซใJiraใใฑใใๆ
ๅ ฑใจConfluenceๆค็ดข็ตๆใๅๆฎตใงๅๅพๆธใฟใงใใใใจใๅๆใจใใๆง้ ๅใใใๅฎ่ฃ
่จ็ปใๅบๅใใใใใใฉใณใใณใฐใใๅฎ่ฃ
่จ็ป็ญๅฎใใใฟในใฏๅๅฒใใชใฉใฎๆ่ใงไฝฟ็จใ/next-ideaRun one unattended IDEATION iteration of the autonomous value-creation loop โ invent improvements a user of cc-wf-studio would notice, judge them against the value bar, and file the winners as locked `idea` issues. Never implements anything; the next-task skill builds from the/next-qa-ideaRun one unattended IDEATION iteration of the quality-assurance loop โ find the highest-value untested behavior in the codebase, judge it against the QA value bar, and file ONE locked `qa` issue specifying the test to write. Never writes code or tests; the next-qa skill builds/next-qaRun one unattended iteration of the QUALITY-ASSURANCE loop โ steward any in-flight QA PR, then build ONE queued `qa` issue (test infrastructure, unit tests, regression tests for known bugs) on a branch off auto-qa and open a PR that squash-merges on green CI. Adds tests and/next-taskRun one unattended IMPLEMENTATION iteration of the autonomous value-creation loop โ steward any in-flight PR, fix interrupts (red CI / security / human bugs), or else build ONE queued `idea` issue on a branch off auto-dev and open a PR that squash-merges on green CI. Ideation/pr-review-analysisAnalyze PR review comments from a GitHub PR URL. Fetch review comments, verify each finding against the actual codebase, assess validity (correct/incorrect/partial), present a structured summary with recommended actions, and optionally reply to each comment on GitHub. Use when
Show all 10 skillsShow fewer
/pr-to-main-cleanupClean up merged feature branches after PR to main is merged. Use when the user says "ใใฉใณใๅ้ค", "cleanup", "ใใผใธๅพใฎ็ไปใ", or wants to delete a merged branch./pr-to-mainCreate a PR to the main branch for feature/fix changes in this pnpm + Changesets monorepo. Use when the user says "PRใไฝๆ", "mainใซPR", or wants to submit changes for review. Always run this in the monorepo-aware way โ identify the affected package(s) and make sure a changeset/workflow-schema-tuningUse when modifying `resources/workflow-schema.json` in cc-wf-studio to influence how AI agents generate workflows via the cc-workflow-ai-editor skill. Triggers include "AIใ็นๅฎใฎใใผใใฟใคใใ้ธใใงใใใชใ", "ใฏใผใฏใใญใผ็ๆใฎใใคใขในใ่ชฟๆดใใใ", "ในใญใผใใฎ description ใๅคใใใ", "ๆฐใใใใผใใฟใคใใ่ฟฝๅ ใใใ",/ccwf-cliUse the `ccwf` CLI (from @cc-wf-studio/cli) to render, validate, preview, export, or run cc-wf-studio workflow JSON files from the terminal. Apply whenever the user mentions viewing, visualizing, checking, executing, or converting a workflow under `.vscode/workflows/` (or any
Badges
6
README
1CC Workflow Studio
You think visually. AI thinks in .md. CC Workflow Studio speaks both.
Design workflows on a canvas. Export as Markdown your AI agent already understands. No more prompt-guessing.
Supported Agents
| Agent | Export Format | Requires |
|---|---|---|
| Claude Code | .claude/agents/ .claude/commands/ | Claude Code |
| GitHub Copilot Chat | .github/prompts/ | Copilot Chat |
| GitHub Copilot CLI | .github/skills/ | Copilot CLI |
| OpenAI Codex CLI | .codex/skills/ | Codex CLI |
| Zoo Code (formerly Roo Code) | .roo/skills/ | Zoo Code |
| Gemini CLI | .gemini/skills/ | Gemini CLI |
| Antigravity | .agent/skills/ | Antigravity |
| Cursor | .cursor/agents/ .cursor/skills/ | Cursor |
Note: Agents other than Claude Code require activation from Toolbar's More menu.
Use it without VSCode, too
The VSCode extension is the most ergonomic editor, but it isn't the only entry point. The same workflow.json drives a CLI and an MCP server โ pick whichever interface fits the situation.
flowchart LR
Wf(["workflow.json"])
subgraph IDE["๐ช VSCode Extension"]
Canvas["React Flow canvas<br/>+ editor + Slack share"]
end
subgraph Mcp["๐ MCP Server"]
AIClient["Claude Code,<br/>MCP Inspector, ..."]
McpServer["@cc-wf-studio/mcp<br/>(stdio: <code>ccwf-mcp</code>)"]
AIClient --> McpServer
end
subgraph Cli["๐ป CLI"]
CliBin["@cc-wf-studio/cli<br/>(<code>ccwf render | validate | export | run | preview | canvas | mcp</code>)"]
end
Wf <-->|edit| Canvas
Wf <-->|read / write| McpServer
Wf <-->|read / write| CliBin
Canvas -.->|writes skills + agents| Output["Agent skills on disk<br/>(.claude/, .codex/, .cursor/, ...)"]
McpServer -.-> Output
CliBin -.-> Output
| Interface | Try it | Best for | Docs |
|---|---|---|---|
| VSCode extension | code --install-extension breaking-brake.cc-wf-studio | Designing workflows visually | packages/vscode |
CLI (ccwf) | npx @cc-wf-studio/cli --help | Terminal / CI / SSH / Codespaces โ render, validate, preview, export, run a workflow without VSCode | packages/cli |
MCP server (ccwf-mcp) | Add to your MCP client's .mcp.json so Claude Code (or any MCP client) can read and edit workflows over stdio | Letting an external AI client read and edit your workflows through MCP tools | packages/mcp |
There is no "VSCode-only" path: a workflow you draw in the canvas is the same file ccwf preview will render in a browser, and the same file an external Claude Code can edit through MCP.
Key Features
๐ Visual Workflow Editor - Intuitive drag-and-drop canvas for designing AI agent orchestrations without code
๐ค Agentic Engineering - Design multi-agent workflows with Sub-Agent orchestration, Agent Skills, and MCP tool integration โ the building blocks of agentic engineering
โจ Edit with AI - Iteratively improve workflows through conversational AI - ask for changes, add features, or refine logic with natural language feedback
โก One-Click Export & Run - Export workflows to ready-to-use formats and run directly from the editor
How to Use
Launch the Extension
- Click the icon in the top-right corner of the editor
- Or: Command Palette (
Cmd+Shift+P) โ "CC Workflow Studio: Open Editor"
Create a Workflow
- Add nodes from the palette and configure their settings, or use Edit with AI.
Save & Load
- Click Save button in the toolbar to store your workflow as
.vscode/workflows/*.json - Click Load button in the toolbar to open a saved
.jsonworkflow
Export & Run
- Click Export button in the toolbar to create a
.mdslash command or agent skill (use/workflow-namein AI coding agents) - Click Run button in the toolbar to run your workflow directly in AI coding agents
Edit with AI
- Click Edit with AI button in the toolbar to generate or refine workflows with natural language
- Native with MCP Server: Click an AI agent button in the Edit with AI panel to launch native AI editing. The MCP server starts automatically behind the scenes.
sequenceDiagram
actor User
box VS Code (CC Workflow Studio)
participant UI as Editor UI
participant MCP as MCP Server
end
participant Agent as AI Agent
User->>UI: Click agent button
UI->>MCP: Auto start server
UI->>Agent: Launch with editing skill
loop AI edits workflow
Agent->>MCP: get_workflow
MCP-->>Agent: workflow JSON
Agent->>MCP: apply_workflow
MCP->>UI: Update canvas
end
Usage Examples
Coming soon - Sample workflows and tutorials are under development.
License
The VSCode extension (cc-wf-studio) is licensed under the GNU Affero General Public License v3.0 (AGPL-3.0-or-later).
See the LICENSE file for the full license text.
The reusable libraries published to npm โ @cc-wf-studio/core, @cc-wf-studio/mcp, and @cc-wf-studio/cli โ are released under the more permissive MIT license. Each package ships its own LICENSE file, which takes precedence for that package.
Copyright (c) 2025 breaking-brake
Star History
Acknowledgments
Built with React Flow โข Powered by Claude Code โข Inspired by Dify
Made with CC Workflow Studio
File tree
619breaking-brake/cc-wf-studioView on GitHub
.changeset/
add-fable-model-ssot.md
config.json
khaki-berries-tan.md
mcp-port-auto-fallback.md
README.md
schema-driven-property-panel-phase0.md
schema-driven-property-panel-phase1.md
schema-driven-property-panel-phase2.md
schema-driven-property-panel-phase3.md
schema-driven-property-panel-phase4.md
.claude/
rules/
dialog-design.md
schema-driven-panels.md
translation.md
webview-patterns.md
skills/
jira-driven-planning/
references/
planning-template.md
SKILL.md
next-idea/
SKILL.md
next-qa/
next-qa-idea/
SKILL.md
SKILL.md
next-task/
SKILL.md
pr-review-analysis/
SKILL.md
pr-to-main/
pr-to-main-cleanup/
SKILL.md
assets/
feat-template.md
fix-template.md
improvement-template.md
SKILL.md
workflow-schema-tuning/
SKILL.md
.github/
dependabot.yml
ISSUE_TEMPLATE/
bug_report.yml
config.yml
feature_request.yml
question.yml
skills/
cc-workflow-ai-editor/
SKILL.md
workflows/
ci.yml
release-version-pr.yml
release.yml
scheduled-failure-issue.yml
security-scan.yml
stale.yml
.gitignore
.mcp.json
.roo/
mcp.json
skills/
cc-workflow-ai-editor/
SKILL.md
.snyk
.specify/
memory/
constitution.md
scripts/
bash/
check-prerequisites.sh
common.sh
create-new-feature.sh
setup-plan.sh
update-agent-context.sh
templates/
agent-file-template.md
checklist-template.md
plan-template.md
spec-template.md
tasks-template.md
.vscode/
launch.json
mcp.json
settings.json
tasks.json
workflows/
automated-pr-code-review-flow.json
daily-task-workflow.json
CLAUDE.md
docs/
architecture.md
progress-log.md
qa-log.md
quality/
01-product-value.md
02-feature-map.md
03-assurance-map.md
README.md
release-flow.md
task-automation.md
IMPLEMENTATION_PLAN.md
LICENSE
package.json
packages/
cli/
CHANGELOG.md
fixtures/
sample-workflow.json
LICENSE
package.json
README.md
skills/
ccwf-cli/
SKILL.md
src/
__tests__/
commands/
export.test.ts
render.test.ts
validate.test.ts
utils/
load-workflow.test.ts
canvas/
bootstrap.ts
handlers.ts
server.ts
cli.ts
commands/
canvas.ts
export.ts
install-skills.ts
mcp.ts
preview.ts
render.ts
run.ts
tour.ts
uninstall-skills.ts
validate.ts
index.ts
preview/
server.ts
watcher.ts
utils/
find-binary.ts
host-warning.ts
load-workflow.ts
tsconfig.json
tsconfig.test.json
vitest.config.ts
core/
CHANGELOG.md
LICENSE
package.json
README.md
resources/
workflow-schema.json
workflow-schema.toon
scripts/
generate-toon-schema.ts
src/
__tests__/
schema/
array-bounds-consistency.test.ts
authoring-guide-consistency.test.ts
nodes/
derive-updates.test.ts
panel-options-consistency.test.ts
services/
__fixtures__/
workflows.ts
agent-skill-export.test.ts
slash-command-frontmatter.test.ts
sub-agent-flow-agent-file.test.ts
workflow-export.test.ts
workflow-overview-formatter.test.ts
workflow-prompt-generator.test.ts
utils/
validate-workflow.test.ts
constants/
built-in-sub-agents.ts
index.ts
schema/
claude-code-only.ts
field.ts
index.ts
node-schema-registry.ts
nodes/
ask-user-question-schema.ts
branch-schema.ts
branch-session-schema.ts
codex-schema.ts
group-schema.ts
if-else-schema.ts
mcp-schema.ts
prompt-schema.ts
skill-schema.ts
sub-agent-flow-schema.ts
sub-agent-schema.ts
switch-schema.ts
queries.ts
targets.ts
warnings.ts
services/
agent-skill-export.ts
workflow-export.ts
workflow-overview-formatter.ts
workflow-prompt-generator.ts
types/
ai-metrics.ts
mcp-node.ts
sample-workflow.ts
workflow-definition.ts
utils/
migrate-workflow.ts
node-data-normalize.ts
schema-parser.ts
validate-workflow.ts
workflow-validator.ts
tsconfig.json
tsconfig.test.json
vitest.config.ts
mcp/
CHANGELOG.md
LICENSE
package.json
README.md
scripts/
smoke.mts
src/
__tests__/
__fixtures__/
workflows.ts
file-adapter.test.ts
tools.test.ts
factory.ts
file-adapter.ts
index.ts
mcp.ts
tools.ts
types.ts
tsconfig.json
tsconfig.test.json
vitest.config.ts
vscode/
.vscodeignore
biome.json
CHANGELOG.md
contracts/
extension-webview-messages.schema.json
mcp-cli.schema.json
workflow-mcp-node.schema.json
docs/
ai-coding-tools-config-reference.md
release-automation.md
schema-maintenance.md
LICENSE
package.json
README.md
resources/
ai-editing-process-flow.md
ai-editing-skill-template.md
deck-preview.png
demo_edit_with_ai.gif
demo_run_workflow.gif
generate-workflow-tour-template.md
hero.png
icon-export.png
icon-export.svg
icon-file-down.png
icon-file-down.svg
icon-large.png
icon-play.png
icon-play.svg
icon-save.png
icon-save.svg
icon-sparkles.png
icon-sparkles.svg
icon.png
import-skill-template.md
README.md
samples/
daily-dev-flow-with-worktree-sample.en.json
daily-dev-flow-with-worktree-sample.ja.json
daily-dev-flow-with-worktree-sample.ko.json
daily-dev-flow-with-worktree-sample.zh-CN.json
daily-dev-flow-with-worktree-sample.zh-TW.json
daily-dev-with-branch-sample.en.json
daily-dev-with-branch-sample.ja.json
daily-dev-with-branch-sample.ko.json
daily-dev-with-branch-sample.zh-CN.json
daily-dev-with-branch-sample.zh-TW.json
github-issue-planning-sample.json
scripts/
generate-editing-flow.ts
specs/
001-ai-skill-generation/
checklists/
requirements.md
contracts/
skill-scanning-api.md
data-model.md
plan.md
quickstart.md
research.md
spec.md
tasks.md
001-ai-workflow-generation/
checklists/
requirements.md
contracts/
ai-generation-messages.md
data-model.md
plan.md
quickstart.md
research.md
spec.md
tasks.md
001-ai-workflow-refinement/
checklists/
requirements.md
contracts/
refinement-messages.json
data-model.md
plan.md
quickstart.md
research.md
spec.md
tasks.md
001-cc-wf-studio/
checklists/
requirements.md
contracts/
extension-webview-api.md
vscode-extension-api.md
data-model.md
plan.md
quickstart.md
research.md
spec.md
tasks.md
001-mcp-natural-language-mode/
checklists/
requirements.md
contracts/
export-metadata.schema.json
mcp-node-extended.schema.json
data-model.md
extension-points.md
i18n-keys-plan.md
plan.md
quickstart.md
research.md
spec.md
tasks.md
001-mcp-node/
checklists/
requirements.md
contracts/
extension-webview-messages.schema.json
mcp-cli.schema.json
workflow-mcp-node.schema.json
data-model.md
plan.md
quickstart.md
research.md
spec.md
tasks.md
001-node-types-extension/
checklists/
requirements.md
data-model.md
plan.md
quickstart.md
research.md
spec.md
tasks.md
001-skill-node/
checklists/
requirements.md
contracts/
skill-messages.ts
data-model.md
plan.md
quickstart.md
research.md
spec.md
tasks.md
001-slack-workflow-sharing/
checklists/
requirements.md
contracts/
extension-host-api-contracts.md
slack-api-contracts.md
data-model.md
plan.md
quickstart.md
research.md
... 363 moreFAQ
cc-wf-studio is a Claude Code plugin with 10 hand-picked skills for development work, indexed on Flowy. Install it with the command on its page. It includes jira-driven-planning, next-idea, next-qa-idea. Its skills do not fire on their own yet. Request auto-invocation to have Flowy route them as you prompt. Free and open source.
- What is cc-wf-studio?
- You think visually. AI thinks in .md. CC Workflow Studio speaks both. Design workflows on a canvas. Export as Markdown your AI agent already understands. No more prompt-guessing. Why CC Workflow Studio? - Speaker Deck Link
- How do I install cc-wf-studio?
- Run these in Claude Code: npx -y skills add breaking-brake/cc-wf-studio --agent claude-code. Then prompt normally.
- Does cc-wf-studio auto-invoke its skills?
- Not yet. It is indexed on Flowy as a plain plugin. Request auto-invocation on its page and Flowy will route its skills for you as you prompt.
- Is cc-wf-studio free?
- Yes. Flowy is free and open source, with nothing gated. You can read every skill in full before you install.