Loading...
Loading...
Found 6 Skills
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.
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.
Generate animated HTML pages for educational/popular science flowcharts, concept maps, and principle demonstrations. Use CSS/SVG to draw nodes and connections, supporting animation effects like flowing arrows, gradual appearance, and hover highlighting. Suitable for technical explanation, video popular science, and PPT illustration scenarios.
Build and deploy MCP servers that stream interactive Excalidraw diagrams with smooth viewport control
Create animated, explorable editorial diagrams in 42 types (architecture, flowchart, sequence, state, ER, DB schema, UML class, swimlane, timeline, gantt, journey, tree, org chart, nested, venn, quadrant, fishbone, wardley, bar, line, scatter, sankey, treemap, heatmap and more) as standalone HTML from a short JSON spec. Use when the user asks to draw, diagram, chart or visualize a system, codebase, flow, process, API call sequence, hierarchy or data; to convert Mermaid, Graphviz/DOT, PlantUML, D2, draw.io, Excalidraw, SQL or CSV into a clean diagram; or to export a diagram as PNG, JPEG, SVG, GIF or MP4.