[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"readme:cc-wf-studio":3},"\u003Cp align=\"center\">\n  \u003Cimg src=\"https:\u002F\u002Fraw.githubusercontent.com\u002Fbreaking-brake\u002Fcc-wf-studio\u002FHEAD\u002Fpackages\u002Fvscode\u002Fresources\u002Ficon-large.png\" alt=\"CC Workflow Studio Icon\" width=\"128\" \u002F>\n\u003C\u002Fp>\u003Ch1>CC Workflow Studio\u003C\u002Fh1>\n\u003Cp align=\"center\">\n  \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fbreaking-brake\u002Fcc-wf-studio\u002Fstargazers\" rel=\"nofollow ugc noopener\">\u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Fstars\u002Fbreaking-brake\u002Fcc-wf-studio\" alt=\"GitHub Stars\" \u002F>\u003C\u002Fa>\n  \u003Ca href=\"https:\u002F\u002Fmarketplace.visualstudio.com\u002Fitems?itemName=breaking-brake.cc-wf-studio\" rel=\"nofollow ugc noopener\">\u003Cimg src=\"https:\u002F\u002Fvsmarketplacebadges.dev\u002Fversion-short\u002Fbreaking-brake.cc-wf-studio.svg?label=VS%20Marketplace\" alt=\"VS Code Marketplace\" \u002F>\u003C\u002Fa>\n  \u003Ca href=\"https:\u002F\u002Fopen-vsx.org\u002Fextension\u002Fbreaking-brake\u002Fcc-wf-studio\" rel=\"nofollow ugc noopener\">\u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fopen-vsx\u002Fv\u002Fbreaking-brake\u002Fcc-wf-studio?label=OpenVSX\" alt=\"OpenVSX\" \u002F>\u003C\u002Fa>\n  \u003Ca href=\"https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@cc-wf-studio\u002Fcli\" rel=\"nofollow ugc noopener\">\u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fv\u002F@cc-wf-studio\u002Fcli?label=npm%20%2F%20cli\" alt=\"npm @cc-wf-studio\u002Fcli\" \u002F>\u003C\u002Fa>\n  \u003Ca href=\"https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@cc-wf-studio\u002Fmcp\" rel=\"nofollow ugc noopener\">\u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fv\u002F@cc-wf-studio\u002Fmcp?label=npm%20%2F%20mcp\" alt=\"npm @cc-wf-studio\u002Fmcp\" \u002F>\u003C\u002Fa>\n  \u003Ca href=\"https:\u002F\u002Fdeepwiki.com\u002Fbreaking-brake\u002Fcc-wf-studio\" rel=\"nofollow ugc noopener\">\u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FAsk-DeepWiki-009485\" alt=\"Ask DeepWiki\" \u002F>\u003C\u002Fa>\n\u003C\u002Fp>\u003Cp align=\"center\">\n  \u003Cimg src=\"https:\u002F\u002Fraw.githubusercontent.com\u002Fbreaking-brake\u002Fcc-wf-studio\u002FHEAD\u002Fpackages\u002Fvscode\u002Fresources\u002Fhero.png\" alt=\"CC Workflow Studio\" width=\"800\" \u002F>\n\u003C\u002Fp>\u003Cp>\u003Cstrong>You think visually. AI thinks in \u003Ccode>.md\u003C\u002Fcode>. CC Workflow Studio speaks both.\u003C\u002Fstrong>\u003C\u002Fp>\n\u003Cp>Design workflows on a canvas. Export as Markdown your AI agent already understands. No more prompt-guessing.\u003C\u002Fp>\n\u003Cp align=\"center\">\n  \u003Ca href=\"https:\u002F\u002Fspeakerdeck.com\u002Fseiyakobayashi\u002Fcc-workflow-studio\" rel=\"nofollow ugc noopener\">\n    \u003Cimg src=\"https:\u002F\u002Fraw.githubusercontent.com\u002Fbreaking-brake\u002Fcc-wf-studio\u002FHEAD\u002Fpackages\u002Fvscode\u002Fresources\u002Fdeck-preview.png\" alt=\"Learn more: Why CC Workflow Studio?\" width=\"600\" \u002F>\n  \u003C\u002Fa>\n  \u003Cbr \u002F>\n  \u003Cem>Why CC Workflow Studio? - Speaker Deck Link\u003C\u002Fem>\n\u003C\u002Fp>\u003Chr \u002F>\n\u003Ch2>Supported Agents\u003C\u002Fh2>\n\u003Ctable>\n\u003Cthead>\n\u003Ctr>\n\u003Cth>Agent\u003C\u002Fth>\n\u003Cth>Export Format\u003C\u002Fth>\n\u003Cth>Requires\u003C\u002Fth>\n\u003C\u002Ftr>\n\u003C\u002Fthead>\n\u003Ctbody>\u003Ctr>\n\u003Ctd>Claude Code\u003C\u002Ftd>\n\u003Ctd>\u003Ccode>.claude\u002Fagents\u002F\u003C\u002Fcode> \u003Ccode>.claude\u002Fcommands\u002F\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>\u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fanthropics\u002Fclaude-code\" rel=\"nofollow ugc noopener\">Claude Code\u003C\u002Fa>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>GitHub Copilot Chat\u003C\u002Ftd>\n\u003Ctd>\u003Ccode>.github\u002Fprompts\u002F\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>\u003Ca href=\"https:\u002F\u002Fmarketplace.visualstudio.com\u002Fitems?itemName=GitHub.copilot-chat\" rel=\"nofollow ugc noopener\">Copilot Chat\u003C\u002Fa>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>GitHub Copilot CLI\u003C\u002Ftd>\n\u003Ctd>\u003Ccode>.github\u002Fskills\u002F\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>\u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fgithub\u002Fcopilot-cli\" rel=\"nofollow ugc noopener\">Copilot CLI\u003C\u002Fa>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>OpenAI Codex CLI\u003C\u002Ftd>\n\u003Ctd>\u003Ccode>.codex\u002Fskills\u002F\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>\u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fopenai\u002Fcodex\" rel=\"nofollow ugc noopener\">Codex CLI\u003C\u002Fa>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>Zoo Code (formerly Roo Code)\u003C\u002Ftd>\n\u003Ctd>\u003Ccode>.roo\u002Fskills\u002F\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>\u003Ca href=\"https:\u002F\u002Fmarketplace.visualstudio.com\u002Fitems?itemName=ZooCodeOrganization.zoo-code\" rel=\"nofollow ugc noopener\">Zoo Code\u003C\u002Fa>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>Gemini CLI\u003C\u002Ftd>\n\u003Ctd>\u003Ccode>.gemini\u002Fskills\u002F\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>\u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fgoogle-gemini\u002Fgemini-cli\" rel=\"nofollow ugc noopener\">Gemini CLI\u003C\u002Fa>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>Antigravity\u003C\u002Ftd>\n\u003Ctd>\u003Ccode>.agent\u002Fskills\u002F\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>\u003Ca href=\"https:\u002F\u002Fantigravity.google\u002F\" rel=\"nofollow ugc noopener\">Antigravity\u003C\u002Fa>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>Cursor\u003C\u002Ftd>\n\u003Ctd>\u003Ccode>.cursor\u002Fagents\u002F\u003C\u002Fcode> \u003Ccode>.cursor\u002Fskills\u002F\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>\u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fcursor\u002Fcursor\" rel=\"nofollow ugc noopener\">Cursor\u003C\u002Fa>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003C\u002Ftbody>\u003C\u002Ftable>\n\u003Cblockquote>\n\u003Cp>\u003Cstrong>Note:\u003C\u002Fstrong> Agents other than Claude Code require activation from Toolbar's \u003Cstrong>More\u003C\u002Fstrong> menu.\u003C\u002Fp>\n\u003C\u002Fblockquote>\n\u003Chr \u002F>\n\u003Ch2>Use it without VSCode, too\u003C\u002Fh2>\n\u003Cp>The VSCode extension is the most ergonomic editor, but it isn't the only entry point. The same \u003Ccode>workflow.json\u003C\u002Fcode> drives a CLI and an MCP server — pick whichever interface fits the situation.\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-mermaid\">flowchart LR\n    Wf([\"workflow.json\"])\n\n    subgraph IDE[\"🪟 VSCode Extension\"]\n        Canvas[\"React Flow canvas<br\u002F>+ editor + Slack share\"]\n    end\n\n    subgraph Mcp[\"🔌 MCP Server\"]\n        AIClient[\"Claude Code,<br\u002F>MCP Inspector, ...\"]\n        McpServer[\"@cc-wf-studio\u002Fmcp<br\u002F>(stdio: <code>ccwf-mcp<\u002Fcode>)\"]\n        AIClient --> McpServer\n    end\n\n    subgraph Cli[\"💻 CLI\"]\n        CliBin[\"@cc-wf-studio\u002Fcli<br\u002F>(<code>ccwf render | validate | export | run | preview | canvas | mcp<\u002Fcode>)\"]\n    end\n\n    Wf <-->|edit| Canvas\n    Wf <-->|read \u002F write| McpServer\n    Wf <-->|read \u002F write| CliBin\n\n    Canvas -.->|writes skills + agents| Output[\"Agent skills on disk<br\u002F>(.claude\u002F, .codex\u002F, .cursor\u002F, ...)\"]\n    McpServer -.-> Output\n    CliBin -.-> Output\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Ctable>\n\u003Cthead>\n\u003Ctr>\n\u003Cth>Interface\u003C\u002Fth>\n\u003Cth>Try it\u003C\u002Fth>\n\u003Cth>Best for\u003C\u002Fth>\n\u003Cth>Docs\u003C\u002Fth>\n\u003C\u002Ftr>\n\u003C\u002Fthead>\n\u003Ctbody>\u003Ctr>\n\u003Ctd>\u003Cstrong>VSCode extension\u003C\u002Fstrong>\u003C\u002Ftd>\n\u003Ctd>`code --install-extension breaking\u003C\u002Ftd>\n\u003Ctd>\u003C\u002Ftd>\n\u003Ctd>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003C\u002Ftbody>\u003C\u002Ftable>\n",1784240406345]