Loading...
Loading...
Found 5 Skills
Visual flowchart and diagram planning tool. Claude writes structured JSON to a .flowi/ directory, which renders as interactive, editable diagrams in the browser. Use for architecture planning, user flows, system design, state machines, and UI mockups.
Analyze the current workspace codebase and produce a single-file interactive C4 architecture diagram as HTML (L1 System Context → L2 Containers → L3 Components), with drill-down, breadcrumb, side panel, and light theme. Use when the user asks for C4 diagrams, interactive architecture HTML, system context/container/component views, or 可交互 C4 架构图. 分析当前项目代码结构，生成交互式 C4 架构图（单文件 HTML）：系统上下文、容器、组件三级下钻、面包屑、侧栏详情、浅色主题。触发词：C4 架构图、交互式架构、系统上下文、容器图、组件图、架构可视化、可下钻、architecture diagram、interactive C4。
Use when building node-based UIs, flow diagrams, workflow editors, or interactive graphs with React Flow. Covers setup, nodes, edges, controls, and interactivity.
Build node-based editors, interactive diagrams, and flow visualizations using Svelte Flow. Use when creating workflow editors, data flow diagrams, organizational charts, mindmaps, process visualizations, DAG editors, or any interactive node-graph UI. Supports custom nodes/edges, layouts (dagre, hierarchical), animations, and advanced features like proximity connect, floating edges, and contextual zoom.
Build elaborate, self-contained static HTML artifacts opened in a browser — interactive diagrams, architecture visuals, data dashboards, HTML infographics, and rich interactive deliverables. Use this skill when the output is an HTML file viewed in a browser. Zero build toolchain — no React, no Vite, no Parcel. Pure HTML5 + CSS3 (Grid/Flexbox) + inline SVG. Triggers on: "interactive HTML", "self-contained web component", "open in browser", "interactive diagram", "visual dashboard", "HTML artifact", "HTML infographic", "interactive infographic". For image file output (PNG/SVG), use concept-to-image instead.