{"id":"c92412cc-7166-438b-8d70-a6278de5772c","slug":"thedogwiththedataonit-react-flow","name":"react-flow-usage","description":"Comprehensive React Flow (@xyflow/react) patterns and best practices for building node-based UIs, workflow editors, and interactive diagrams. Use when working with React Flow for (1) building flow editors or node-based interfaces, (2) creating custom nodes and edges, (3) implementing drag-and-drop workflows, (4) optimizing performance for large graphs, (5) managing flow state and interactions, (6) implementing auto-layout or positioning, or (7) TypeScript integration with React Flow.","canonicalUrl":"https://xpersona.co/skill/thedogwiththedataonit-react-flow","sourceUrl":"https://github.com/thedogwiththedataonit/react-flow","homepage":null,"source":"GITHUB_OPENCLEW","vendor":{"slug":"thedogwiththedataonit","label":"Thedogwiththedataonit","url":"https://github.com/thedogwiththedataonit/react-flow"},"protocols":["OPENCLEW"],"capabilities":[],"trustScore":null,"trustConfidence":"unknown","artifactCount":0,"benchmarkCount":0,"lastRelease":null,"freshnessAt":"2026-04-15T03:15:15.886Z","freshnessLabel":"Apr 15, 2026","securityReviewed":true,"openapiReady":false,"stats":[{"label":"Trust score","value":"Unknown"},{"label":"Compatibility","value":"OpenClaw"},{"label":"Freshness","value":"Apr 15, 2026"},{"label":"Vendor","value":"Thedogwiththedataonit"},{"label":"Artifacts","value":"0"},{"label":"Benchmarks","value":"0"},{"label":"Last release","value":"Unpublished"}],"factsPreview":[{"factKey":"docs_crawl","category":"integration","label":"Crawlable docs","value":"6 indexed pages on the official domain","href":"https://github.com/login?return_to=https%3A%2F%2Fgithub.com%2Fopenclaw%2Fskills%2Ftree%2Fmain%2Fskills%2Fasleep123%2Fcaldav-calendar","sourceUrl":"https://github.com/login?return_to=https%3A%2F%2Fgithub.com%2Fopenclaw%2Fskills%2Ftree%2Fmain%2Fskills%2Fasleep123%2Fcaldav-calendar","sourceType":"search_document","confidence":"medium","observedAt":"2026-04-15T05:03:46.393Z","isPublic":true},{"factKey":"vendor","category":"vendor","label":"Vendor","value":"Thedogwiththedataonit","href":"https://github.com/thedogwiththedataonit/react-flow","sourceUrl":"https://github.com/thedogwiththedataonit/react-flow","sourceType":"profile","confidence":"medium","observedAt":"2026-04-15T03:15:15.887Z","isPublic":true},{"factKey":"protocols","category":"compatibility","label":"Protocol compatibility","value":"OpenClaw","href":"https://xpersona.co/api/v1/agents/thedogwiththedataonit-react-flow/contract","sourceUrl":"https://xpersona.co/api/v1/agents/thedogwiththedataonit-react-flow/contract","sourceType":"contract","confidence":"medium","observedAt":"2026-04-15T03:15:15.887Z","isPublic":true},{"factKey":"traction","category":"adoption","label":"Adoption signal","value":"2 GitHub stars","href":"https://github.com/thedogwiththedataonit/react-flow","sourceUrl":"https://github.com/thedogwiththedataonit/react-flow","sourceType":"profile","confidence":"medium","observedAt":"2026-04-15T03:15:15.887Z","isPublic":true},{"factKey":"handshake_status","category":"security","label":"Handshake status","value":"UNKNOWN","href":"https://xpersona.co/api/v1/agents/thedogwiththedataonit-react-flow/trust","sourceUrl":"https://xpersona.co/api/v1/agents/thedogwiththedataonit-react-flow/trust","sourceType":"trust","confidence":"medium","observedAt":null,"isPublic":true}],"highlights":["2 GitHub stars","Trust evidence available"],"agentCard":{"name":"react-flow-usage","description":"Comprehensive React Flow (@xyflow/react) patterns and best practices for building node-based UIs, workflow editors, and interactive diagrams. Use when working with React Flow for (1) building flow editors or node-based interfaces, (2) creating custom nodes and edges, (3) implementing drag-and-drop workflows, (4) optimizing performance for large graphs, (5) managing flow state and interactions, (6) implementing auto-layout or positioning, or (7) TypeScript integration with React Flow.","source":"GITHUB_OPENCLEW","sourceId":"github:1140696834","repository":"https://github.com/thedogwiththedataonit/react-flow","documentation":"https://xpersona.co/skill/thedogwiththedataonit-react-flow/agent/thedogwiththedataonit-react-flow","protocols":["OPENCLEW"],"languages":["typescript"],"install":{"command":"git clone https://github.com/thedogwiththedataonit/react-flow.git","ecosystem":"git"},"examples":[{"kind":"example","language":"tsx","snippet":"import { useCallback } from 'react';\nimport {\n ReactFlow,\n Background,\n Controls,\n MiniMap,\n useNodesState,\n useEdgesState,\n addEdge\n} from '@xyflow/react';\nimport '@xyflow/react/dist/style.css';\n\nconst initialNodes = [\n { id: '1', position: { x: 0, y: 0 }, data: { label: 'Node 1' } },\n];\n\nconst initialEdges = [\n { id: 'e1-2', source: '1', target: '2' },\n];\n\n// Define outside component or use useMemo\nconst nodeTypes = { custom: CustomNode };\nconst edgeTypes = { custom: CustomEdge };\n\nfunction Flow() {\n const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);\n const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);\n\n const onConnect = useCallback(\n (params) => setEdges((eds) => addEdge(params, eds)),\n [setEdges]\n );\n\n return (\n \n \n \n \n \n \n
\n );\n}"},{"kind":"example","language":"tsx","snippet":"import { memo } from 'react';\nimport { Handle, Position, NodeProps } from '@xyflow/react';\n\nconst CustomNode = memo(({ data, selected }: NodeProps) => {\n return (\n \n );\n});\n\n// IMPORTANT: Define outside component\nconst nodeTypes = { custom: CustomNode };"}]}}