{"id":"6b0e5450-2492-430a-b3a7-57e529b7198a","shortId":"vZCtNg","kind":"skill","title":"react-flow-architect","tagline":"Build production-ready ReactFlow applications with hierarchical navigation, performance optimization, and advanced state management.","description":"# ReactFlow Architect\n\nBuild production-ready ReactFlow applications with hierarchical navigation, performance optimization, and advanced state management.\n\n## Quick Start\n\nCreate basic interactive graph:\n\n```tsx\nimport ReactFlow, { Node, Edge } from \"reactflow\";\n\nconst nodes: Node[] = [\n  { id: \"1\", position: { x: 0, y: 0 }, data: { label: \"Node 1\" } },\n  { id: \"2\", position: { x: 100, y: 100 }, data: { label: \"Node 2\" } },\n];\n\nconst edges: Edge[] = [{ id: \"e1-2\", source: \"1\", target: \"2\" }];\n\nexport default function Graph() {\n  return <ReactFlow nodes={nodes} edges={edges} />;\n}\n```\n\n## Core Patterns\n\n### Hierarchical Tree Navigation\n\nBuild expandable/collapsible tree structures with parent-child relationships.\n\n#### Node Schema\n\n```typescript\ninterface TreeNode extends Node {\n  data: {\n    label: string;\n    level: number;\n    hasChildren: boolean;\n    isExpanded: boolean;\n    childCount: number;\n    category: \"root\" | \"category\" | \"process\" | \"detail\";\n  };\n}\n```\n\n#### Incremental Node Building\n\n```typescript\nconst buildVisibleNodes = useCallback(\n  (allNodes: TreeNode[], expandedIds: Set<string>, otherDeps: any[]) => {\n    const visibleNodes = new Map<string, TreeNode>();\n    const visibleEdges = new Map<string, TreeEdge>();\n\n    // Start with root nodes\n    const rootNodes = allNodes.filter((n) => n.data.level === 0);\n\n    // Recursively add visible nodes\n    const addVisibleChildren = (node: TreeNode) => {\n      visibleNodes.set(node.id, node);\n\n      if (expandedIds.has(node.id)) {\n        const children = allNodes.filter((n) => n.parentNode === node.id);\n        children.forEach((child) => addVisibleChildren(child));\n      }\n    };\n\n    rootNodes.forEach((root) => addVisibleChildren(root));\n\n    return {\n      nodes: Array.from(visibleNodes.values()),\n      edges: Array.from(visibleEdges.values()),\n    };\n  },\n  [],\n);\n```\n\n### Performance Optimization\n\nHandle large datasets with incremental rendering and memoization.\n\n#### Incremental Rendering\n\n```typescript\nconst useIncrementalGraph = (\n  allNodes: Node[],\n  allEdges: Edge[],\n  expandedList: string[],\n) => {\n  const prevExpandedListRef = useRef<Set<string>>(new Set());\n  const prevOtherDepsRef = useRef<any[]>([]);\n\n  const { visibleNodes, visibleEdges } = useMemo(() => {\n    const currentExpandedSet = new Set(expandedList);\n    const prevExpandedSet = prevExpandedListRef.current;\n\n    // Check if expanded list changed\n    const expandedChanged = !areSetsEqual(currentExpandedSet, prevExpandedSet);\n\n    // Check if other dependencies changed\n    const otherDepsChanged = !arraysEqual(otherDeps, prevOtherDepsRef.current);\n\n    if (expandedChanged && !otherDepsChanged) {\n      // Only expanded list changed - incremental update\n      return buildIncrementalUpdate(\n        cachedVisibleNodesRef.current,\n        cachedVisibleEdgesRef.current,\n        allNodes,\n        allEdges,\n        currentExpandedSet,\n        prevExpandedSet,\n      );\n    } else {\n      // Full rebuild needed\n      return buildFullGraph(allNodes, allEdges, currentExpandedSet);\n    }\n  }, [allNodes, allEdges, expandedList, ...otherDeps]);\n\n  return { visibleNodes, visibleEdges };\n};\n```\n\n#### Memoization Patterns\n\n```typescript\n// Memoize node components to prevent unnecessary re-renders\nconst ProcessNode = memo(({ data, selected }: NodeProps) => {\n  return (\n    <div className={`process-node ${selected ? 'selected' : ''}`}>\n      {data.label}\n    </div>\n  );\n}, (prevProps, nextProps) => {\n  // Custom comparison function\n  return (\n    prevProps.data.label === nextProps.data.label &&\n    prevProps.selected === nextProps.selected &&\n    prevProps.data.isExpanded === nextProps.data.isExpanded\n  );\n});\n\n// Memoize edge calculations\nconst styledEdges = useMemo(() => {\n  return edges.map(edge => ({\n    ...edge,\n    style: {\n      ...edge.style,\n      strokeWidth: selectedEdgeId === edge.id ? 3 : 2,\n      stroke: selectedEdgeId === edge.id ? '#3b82f6' : '#94a3b8',\n    },\n    animated: selectedEdgeId === edge.id,\n  }));\n}, [edges, selectedEdgeId]);\n```\n\n### State Management\n\nComplex node/edge state patterns with undo/redo and persistence.\n\n#### Reducer Pattern\n\n```typescript\ntype GraphAction =\n  | { type: \"SELECT_NODE\"; payload: string }\n  | { type: \"SELECT_EDGE\"; payload: string }\n  | { type: \"TOGGLE_EXPAND\"; payload: string }\n  | { type: \"UPDATE_NODES\"; payload: Node[] }\n  | { type: \"UPDATE_EDGES\"; payload: Edge[] }\n  | { type: \"UNDO\" }\n  | { type: \"REDO\" };\n\nconst graphReducer = (state: GraphState, action: GraphAction): GraphState => {\n  switch (action.type) {\n    case \"SELECT_NODE\":\n      return {\n        ...state,\n        selectedNodeId: action.payload,\n        selectedEdgeId: null,\n      };\n\n    case \"TOGGLE_EXPAND\":\n      const newExpanded = new Set(state.expandedNodeIds);\n      if (newExpanded.has(action.payload)) {\n        newExpanded.delete(action.payload);\n      } else {\n        newExpanded.add(action.payload);\n      }\n      return {\n        ...state,\n        expandedNodeIds: newExpanded,\n        isDirty: true,\n      };\n\n    default:\n      return state;\n  }\n};\n```\n\n#### History Management\n\n```typescript\nconst useHistoryManager = (\n  state: GraphState,\n  dispatch: Dispatch<GraphAction>,\n) => {\n  const canUndo = state.historyIndex > 0;\n  const canRedo = state.historyIndex < state.history.length - 1;\n\n  const undo = useCallback(() => {\n    if (canUndo) {\n      const newIndex = state.historyIndex - 1;\n      const historyEntry = state.history[newIndex];\n\n      dispatch({\n        type: \"RESTORE_FROM_HISTORY\",\n        payload: {\n          ...historyEntry,\n          historyIndex: newIndex,\n        },\n      });\n    }\n  }, [canUndo, state.historyIndex, state.history]);\n\n  const saveToHistory = useCallback(() => {\n    dispatch({ type: \"SAVE_TO_HISTORY\" });\n  }, [dispatch]);\n\n  return { canUndo, canRedo, undo, redo, saveToHistory };\n};\n```\n\n## Advanced Features\n\n### Auto-Layout Integration\n\nIntegrate Dagre for automatic graph layout:\n\n```typescript\nimport dagre from \"dagre\";\n\nconst layoutOptions = {\n  rankdir: \"TB\", // Top to Bottom\n  nodesep: 100, // Node separation\n  ranksep: 150, // Rank separation\n  marginx: 50,\n  marginy: 50,\n  edgesep: 10,\n};\n\nconst applyLayout = (nodes: Node[], edges: Edge[]) => {\n  const g = new dagre.graphlib.Graph();\n  g.setGraph(layoutOptions);\n  g.setDefaultEdgeLabel(() => ({}));\n\n  // Add nodes to graph\n  nodes.forEach((node) => {\n    g.setNode(node.id, { width: 200, height: 100 });\n  });\n\n  // Add edges to graph\n  edges.forEach((edge) => {\n    g.setEdge(edge.source, edge.target);\n  });\n\n  // Calculate layout\n  dagre.layout(g);\n\n  // Apply positions\n  return nodes.map((node) => ({\n    ...node,\n    position: {\n      x: g.node(node.id).x - 100,\n      y: g.node(node.id).y - 50,\n    },\n  }));\n};\n\n// Debounce layout calculations\nconst debouncedLayout = useMemo(() => debounce(applyLayout, 150), []);\n```\n\n### Focus Mode\n\nIsolate selected nodes and their direct connections:\n\n```typescript\nconst useFocusMode = (\n  selectedNodeId: string,\n  allNodes: Node[],\n  allEdges: Edge[],\n) => {\n  return useMemo(() => {\n    if (!selectedNodeId) return { nodes: allNodes, edges: allEdges };\n\n    // Get direct connections\n    const connectedNodeIds = new Set([selectedNodeId]);\n    const focusedEdges: Edge[] = [];\n\n    allEdges.forEach((edge) => {\n      if (edge.source === selectedNodeId || edge.target === selectedNodeId) {\n        focusedEdges.push(edge);\n        connectedNodeIds.add(edge.source);\n        connectedNodeIds.add(edge.target);\n      }\n    });\n\n    // Get connected nodes\n    const focusedNodes = allNodes.filter((n) => connectedNodeIds.has(n.id));\n\n    return { nodes: focusedNodes, edges: focusedEdges };\n  }, [selectedNodeId, allNodes, allEdges]);\n};\n\n// Smooth transitions for focus mode\nconst focusModeStyles = {\n  transition: \"all 0.3s ease-in-out\",\n  opacity: isInFocus ? 1 : 0.3,\n  filter: isInFocus ? \"none\" : \"blur(2px)\",\n};\n```\n\n### Search Integration\n\nSearch and navigate to specific nodes:\n\n```typescript\nconst searchNodes = useCallback((nodes: Node[], query: string) => {\n  if (!query.trim()) return [];\n\n  const lowerQuery = query.toLowerCase();\n  return nodes.filter(\n    (node) =>\n      node.data.label.toLowerCase().includes(lowerQuery) ||\n      node.data.description?.toLowerCase().includes(lowerQuery),\n  );\n}, []);\n\nconst navigateToSearchResult = (nodeId: string) => {\n  // Expand parent nodes\n  const nodePath = calculateBreadcrumbPath(nodeId, allNodes);\n  const parentIds = nodePath.slice(0, -1).map((n) => n.id);\n\n  setExpandedIds((prev) => new Set([...prev, ...parentIds]));\n  setSelectedNodeId(nodeId);\n\n  // Fit view to node\n  fitView({ nodes: [{ id: nodeId }], duration: 800 });\n};\n```\n\n## Performance Tools\n\n### Graph Performance Analyzer\n\nCreate a performance analysis script:\n\n```javascript\n// scripts/graph-analyzer.js\nclass GraphAnalyzer {\n  analyzeCode(content, filePath) {\n    const analysis = {\n      metrics: {\n        nodeCount: this.countNodes(content),\n        edgeCount: this.countEdges(content),\n        renderTime: this.estimateRenderTime(content),\n        memoryUsage: this.estimateMemoryUsage(content),\n        complexity: this.calculateComplexity(content),\n      },\n      issues: [],\n      optimizations: [],\n      patterns: this.detectPatterns(content),\n    };\n\n    // Detect performance issues\n    this.detectPerformanceIssues(analysis);\n\n    // Suggest optimizations\n    this.suggestOptimizations(analysis);\n\n    return analysis;\n  }\n\n  countNodes(content) {\n    const nodePatterns = [\n      /nodes:\\s*\\[.*?\\]/gs,\n      /const\\s+\\w+\\s*=\\s*\\[.*?id:.*?position:/gs,\n    ];\n\n    let totalCount = 0;\n    nodePatterns.forEach((pattern) => {\n      const matches = content.match(pattern);\n      if (matches) {\n        matches.forEach((match) => {\n          const nodeMatches = match.match(/id:\\s*['\"`][^'\"`]+['\"`]/g);\n          if (nodeMatches) {\n            totalCount += nodeMatches.length;\n          }\n        });\n      }\n    });\n\n    return totalCount;\n  }\n\n  estimateRenderTime(content) {\n    const nodeCount = this.countNodes(content);\n    const edgeCount = this.countEdges(content);\n\n    // Base render time estimation (ms)\n    const baseTime = 5;\n    const nodeTime = nodeCount * 0.1;\n    const edgeTime = edgeCount * 0.05;\n\n    return baseTime + nodeTime + edgeTime;\n  }\n\n  detectPerformanceIssues(analysis) {\n    const { metrics } = analysis;\n\n    if (metrics.nodeCount > 500) {\n      analysis.issues.push({\n        type: \"HIGH_NODE_COUNT\",\n        severity: \"high\",\n        message: `Too many nodes (${metrics.nodeCount}). Consider virtualization.`,\n        suggestion: \"Implement virtualization or reduce visible nodes\",\n      });\n    }\n\n    if (metrics.renderTime > 16) {\n      analysis.issues.push({\n        type: \"SLOW_RENDER\",\n        severity: \"high\",\n        message: `Render time (${metrics.renderTime.toFixed(2)}ms) exceeds 60fps.`,\n        suggestion: \"Optimize with memoization and incremental rendering\",\n      });\n    }\n  }\n}\n```\n\n## Best Practices\n\n### Performance Guidelines\n\n1. **Use React.memo** for node components to prevent unnecessary re-renders\n2. **Implement virtualization** for graphs with 1000+ nodes\n3. **Debounce layout calculations** during rapid interactions\n4. **Use useCallback** for edge creation and manipulation functions\n5. **Implement proper TypeScript types** for nodes and edges\n\n### Memory Management\n\n```typescript\n// Use Map for O(1) lookups instead of array.find\nconst nodesById = useMemo(\n  () => new Map(allNodes.map((n) => [n.id, n])),\n  [allNodes],\n);\n\n// Cache layout results\nconst layoutCacheRef = useRef<Map<string, Node[]>>(new Map());\n\n// Proper cleanup in useEffect\nuseEffect(() => {\n  return () => {\n    // Clean up any lingering references\n    nodesMapRef.current.clear();\n    edgesMapRef.current.clear();\n  };\n}, []);\n```\n\n### State Optimization\n\n```typescript\n// Use useRef for objects that shouldn't trigger re-renders\nconst autoSaveDataRef = useRef({\n  nodes: [],\n  edges: [],\n  lastSaved: Date.now(),\n});\n\n// Update properties without breaking reference\nconst updateAutoSaveData = (newNodes: Node[], newEdges: Edge[]) => {\n  autoSaveDataRef.current.nodes = newNodes;\n  autoSaveDataRef.current.edges = newEdges;\n  autoSaveDataRef.current.lastSaved = Date.now();\n};\n```\n\n## Common Problems & Solutions\n\n### Performance Issues\n\n- **Problem**: Lag during node expansion\n- **Solution**: Implement incremental rendering with change detection\n\n- **Problem**: Memory usage increases over time\n- **Solution**: Proper cleanup in useEffect hooks and use WeakMap for temporary data\n\n### Layout Conflicts\n\n- **Problem**: Manual positioning conflicts with auto-layout\n- **Solution**: Use controlled positioning state and separate layout modes\n\n### Rendering Issues\n\n- **Problem**: Excessive re-renders\n- **Solution**: Use memo, useMemo, and useCallback with stable dependencies\n\n- **Problem**: Slow layout calculations\n- **Solution**: Debounce layout calculations and cache results\n\n## Complete Example\n\n```typescript\nimport React, { useState, useCallback, useMemo, useRef } from 'react';\nimport ReactFlow, { Node, Edge, useReactFlow } from 'reactflow';\nimport dagre from 'dagre';\nimport { debounce } from 'lodash';\n\ninterface GraphState {\n  nodes: Node[];\n  edges: Edge[];\n  selectedNodeId: string | null;\n  expandedNodeIds: Set<string>;\n  history: GraphState[];\n  historyIndex: number;\n}\n\nexport default function InteractiveGraph() {\n  const [state, setState] = useState<GraphState>({\n    nodes: [],\n    edges: [],\n    selectedNodeId: null,\n    expandedNodeIds: new Set(),\n    history: [],\n    historyIndex: 0,\n  });\n\n  const { fitView } = useReactFlow();\n  const layoutCacheRef = useRef<Map<string, Node[]>>(new Map());\n\n  // Memoized styled edges\n  const styledEdges = useMemo(() => {\n    return state.edges.map(edge => ({\n      ...edge,\n      style: {\n        ...edge.style,\n        strokeWidth: state.selectedNodeId === edge.source || state.selectedNodeId === edge.target ? 3 : 2,\n        stroke: state.selectedNodeId === edge.source || state.selectedNodeId === edge.target ? '#3b82f6' : '#94a3b8',\n      },\n      animated: state.selectedNodeId === edge.source || state.selectedNodeId === edge.target,\n    }));\n  }, [state.edges, state.selectedNodeId]);\n\n  // Debounced layout calculation\n  const debouncedLayout = useMemo(\n    () => debounce((nodes: Node[], edges: Edge[]) => {\n      const cacheKey = generateLayoutCacheKey(nodes, edges);\n\n      if (layoutCacheRef.current.has(cacheKey)) {\n        return layoutCacheRef.current.get(cacheKey)!;\n      }\n\n      const layouted = applyDagreLayout(nodes, edges);\n      layoutCacheRef.current.set(cacheKey, layouted);\n\n      return layouted;\n    }, 150),\n    []\n  );\n\n  const handleNodeClick = useCallback((event: React.MouseEvent, node: Node) => {\n    setState(prev => ({\n      ...prev,\n      selectedNodeId: node.id,\n    }));\n  }, []);\n\n  const handleToggleExpand = useCallback((nodeId: string) => {\n    setState(prev => {\n      const newExpanded = new Set(prev.expandedNodeIds);\n      if (newExpanded.has(nodeId)) {\n        newExpanded.delete(nodeId);\n      } else {\n        newExpanded.add(nodeId);\n      }\n\n      return {\n        ...prev,\n        expandedNodeIds: newExpanded,\n      };\n    });\n  }, []);\n\n  return (\n    <ReactFlow\n      nodes={state.nodes}\n      edges={styledEdges}\n      onNodeClick={handleNodeClick}\n      fitView\n    />\n  );\n}\n```\n\nThis comprehensive skill provides everything needed to build production-ready ReactFlow applications with hierarchical navigation, performance optimization, and advanced state management patterns.\n\n## When to Use\nThis skill is applicable to execute the workflow or actions described in the overview.\n\n## Limitations\n- Use this skill only when the task clearly matches the scope described above.\n- Do not treat the output as a substitute for environment-specific validation, testing, or expert review.\n- Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.","tags":["react","flow","architect","antigravity","awesome","skills","sickn33","agent-skills","agentic-skills","ai-agent-skills","ai-agents","ai-coding"],"capabilities":["skill","source-sickn33","skill-react-flow-architect","topic-agent-skills","topic-agentic-skills","topic-ai-agent-skills","topic-ai-agents","topic-ai-coding","topic-ai-workflows","topic-antigravity","topic-antigravity-skills","topic-claude-code","topic-claude-code-skills","topic-codex-cli","topic-codex-skills"],"categories":["antigravity-awesome-skills"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/sickn33/antigravity-awesome-skills/react-flow-architect","protocol":"skill","transport":"skills-sh","auth":{"type":"none","details":{"cli":"npx skills add sickn33/antigravity-awesome-skills","source_repo":"https://github.com/sickn33/antigravity-awesome-skills","install_from":"skills.sh"}},"qualityScore":"0.700","qualityRationale":"deterministic score 0.70 from registry signals: · indexed on github topic:agent-skills · 34616 github stars · SKILL.md body (16,001 chars)","verified":false,"liveness":"unknown","lastLivenessCheck":null,"agentReviews":{"count":0,"score_avg":null,"cost_usd_avg":null,"success_rate":null,"latency_p50_ms":null,"narrative_summary":null,"summary_updated_at":null},"enrichmentModel":"deterministic:skill-github:v1","enrichmentVersion":1,"enrichedAt":"2026-04-23T00:51:28.062Z","embedding":null,"createdAt":"2026-04-18T21:43:18.072Z","updatedAt":"2026-04-23T00:51:28.062Z","lastSeenAt":"2026-04-23T00:51:28.062Z","tsv":"'-1':751 '-2':80 '/const':831 '/g':857 '/gs':830,838 '/id':855 '/nodes':828 '0':57,59,166,463,750,841,1219 '0.05':889 '0.1':885 '0.3':688,697 '1':54,63,82,468,477,696,951,1003 '10':546 '100':68,70,534,571,596 '1000':969 '150':538,610,1296 '16':925 '2':65,74,84,353,936,963,1249 '200':569 '2px':702 '3':352,971,1248 '3b82f6':357,1255 '4':978 '5':881,987 '50':542,544,601 '500':901 '60fps':939 '800':772 '94a3b8':358,1256 'action':412,1377 'action.payload':423,436,438,441 'action.type':416 'add':168,560,572 'addvisiblechildren':172,189,193 'advanc':17,34,509,1361 'alledg':219,279,289,292,627,637,678 'alledges.foreach':649 'allnod':139,217,278,288,291,625,635,677,746,1017 'allnodes.filter':163,183,667 'allnodes.map':1013 'analysi':781,791,817,821,823,895,898 'analysis.issues.push':902,926 'analyz':777 'analyzecod':787 'anim':359,1257 'appli':585 'applic':10,27,1354,1371 'applydagrelayout':1288 'applylayout':548,609 'architect':4,21 'aresetsequ':252 'array.find':1007 'array.from':197,200 'arraysequ':262 'ask':1415 'auto':512,1123 'auto-layout':511,1122 'automat':518 'autosavedataref':1057 'autosavedataref.current.edges':1076 'autosavedataref.current.lastsaved':1078 'autosavedataref.current.nodes':1074 'base':874 'basetim':880,891 'basic':40 'best':947 'blur':701 'boolean':122,124 'bottom':532 'boundari':1423 'break':1066 'build':5,22,100,134,1349 'buildfullgraph':287 'buildincrementalupd':275 'buildvisiblenod':137 'cach':1018,1159 'cachedvisibleedgesref.current':277 'cachedvisiblenodesref.current':276 'cachekey':1276,1282,1285,1292 'calcul':339,581,604,974,1153,1157,1266 'calculatebreadcrumbpath':744 'canredo':465,505 'canundo':461,473,491,504 'case':417,426 'categori':127,129 'chang':249,259,271,1095 'check':245,255 'child':107,188,190 'childcount':125 'children':182 'children.foreach':187 'clarif':1417 'class':785 'classnam':318 'clean':1035 'cleanup':1030,1105 'clear':1390 'common':1080 'comparison':328 'complet':1161 'complex':366,805 'compon':303,956 'comprehens':1343 'conflict':1116,1120 'connect':619,640,663 'connectednodeid':642 'connectednodeids.add':658,660 'connectednodeids.has':669 'consid':914 'const':50,75,136,145,151,161,171,181,215,223,229,233,237,242,250,260,310,340,408,429,454,460,464,469,474,478,494,526,547,553,605,621,641,646,665,684,712,722,735,742,747,790,826,844,852,866,870,879,882,886,896,1008,1021,1056,1068,1206,1220,1223,1234,1267,1275,1286,1297,1309,1316 'content':788,795,798,801,804,807,812,825,865,869,873 'content.match':846 'control':1127 'core':95 'count':906 'countnod':824 'creat':39,778 'creation':983 'criteria':1426 'currentexpandedset':238,253,280,290 'custom':327 'dagr':516,523,525,1180,1182 'dagre.graphlib.graph':556 'dagre.layout':583 'data':60,71,116,313,1114 'data.label':324 'dataset':206 'date.now':1062,1079 'debounc':602,608,972,1155,1184,1264,1270 'debouncedlayout':606,1268 'default':86,448,1203 'depend':258,1149 'describ':1378,1394 'detail':131 'detect':813,1096 'detectperformanceissu':894 'direct':618,639 'dispatch':458,459,482,497,502 'div':317 'durat':771 'e1':79 'eas':691 'ease-in-out':690 'edg':47,76,77,93,94,199,220,338,345,346,362,386,401,403,551,552,573,577,628,636,648,650,657,674,982,995,1060,1073,1175,1191,1192,1211,1233,1239,1240,1273,1274,1279,1290,1337 'edge.id':351,356,361 'edge.source':579,652,659,1245,1252,1259 'edge.style':348,1242 'edge.target':580,654,661,1247,1254,1261 'edgecount':796,871,888 'edges.foreach':576 'edges.map':344 'edgesep':545 'edgesmapref.current.clear':1041 'edgetim':887,893 'els':282,439,1326 'environ':1406 'environment-specif':1405 'estim':877 'estimaterendertim':864 'event':1300 'everyth':1346 'exampl':1162 'exceed':938 'excess':1137 'execut':1373 'expand':247,269,391,428,739 'expandable/collapsible':101 'expandedchang':251,266 'expandedid':141 'expandedids.has':179 'expandedlist':221,241,293 'expandednodeid':444,1196,1214,1331 'expans':1089 'expert':1411 'export':85,1202 'extend':114 'featur':510 'filepath':789 'filter':698 'fit':763 'fitview':767,1221,1341 'flow':3 'focus':611,682 'focusededg':647,675 'focusededges.push':656 'focusednod':666,673 'focusmodestyl':685 'full':283 'function':87,329,986,1204 'g':554,584 'g.node':593,598 'g.setdefaultedgelabel':559 'g.setedge':578 'g.setgraph':557 'g.setnode':566 'generatelayoutcachekey':1277 'get':638,662 'graph':42,88,519,563,575,775,967 'graphact':378,413 'graphanalyz':786 'graphreduc':409 'graphstat':411,414,457,1188,1199 'guidelin':950 'handl':204 'handlenodeclick':1298,1340 'handletoggleexpand':1310 'haschildren':121 'height':570 'hierarch':12,29,97,1356 'high':904,908,931 'histori':451,486,501,1198,1217 'historyentri':479,488 'historyindex':489,1200,1218 'hook':1108 'id':53,64,78,769,836 'implement':917,964,988,1091 'import':44,522,1164,1172,1179,1183 'includ':729,733 'increas':1100 'increment':132,208,212,272,945,1092 'input':1420 'instead':1005 'integr':514,515,704 'interact':41,977 'interactivegraph':1205 'interfac':112,1187 'isdirti':446 'isexpand':123 'isinfocus':695,699 'isol':613 'issu':808,815,1084,1135 'javascript':783 'label':61,72,117 'lag':1086 'larg':205 'lastsav':1061 'layout':513,520,582,603,973,1019,1115,1124,1132,1152,1156,1265,1287,1293,1295 'layoutcacheref':1022,1224 'layoutcacheref.current.get':1284 'layoutcacheref.current.has':1281 'layoutcacheref.current.set':1291 'layoutopt':527,558 'let':839 'level':119 'limit':1382 'linger':1038 'list':248,270 'lodash':1186 'lookup':1004 'lowerqueri':723,730,734 'manag':19,36,365,452,997,1363 'mani':911 'manipul':985 'manual':1118 'map':148,154,752,1000,1012,1024,1028,1226,1230 'margini':543 'marginx':541 'match':845,849,851,1391 'match.match':854 'matches.foreach':850 'memo':312,1143 'memoiz':211,298,301,337,943,1231 'memori':996,1098 'memoryusag':802 'messag':909,932 'metric':792,897 'metrics.nodecount':900,913 'metrics.rendertime':924 'metrics.rendertime.tofixed':935 'miss':1428 'mode':612,683,1133 'ms':878,937 'n':164,184,668,753,1014,1016 'n.data.level':165 'n.id':670,754,1015 'n.parentnode':185 'navig':13,30,99,707,1357 'navigatetosearchresult':736 'need':285,1347 'new':147,153,227,239,431,555,643,757,1011,1027,1215,1229,1318 'newedg':1072,1077 'newexpand':430,445,1317,1332 'newexpanded.add':440,1327 'newexpanded.delete':437,1324 'newexpanded.has':435,1322 'newindex':475,481,490 'newnod':1070,1075 'nextprop':326 'nextprops.data.isexpanded':336 'nextprops.data.label':332 'nextprops.selected':334 'node':46,51,52,62,73,91,92,109,115,133,160,170,173,177,196,218,302,321,381,396,398,419,535,549,550,561,565,589,590,615,626,634,664,672,710,715,716,727,741,766,768,905,912,922,955,970,993,1026,1059,1071,1088,1174,1189,1190,1210,1228,1271,1272,1278,1289,1302,1303,1335 'node.data.description':731 'node.data.label.tolowercase':728 'node.id':176,180,186,567,594,599,1308 'node/edge':367 'nodecount':793,867,884 'nodeid':737,745,762,770,1312,1323,1325,1328 'nodematch':853,859 'nodematches.length':861 'nodepath':743 'nodepath.slice':749 'nodepattern':827 'nodepatterns.foreach':842 'nodeprop':315 'nodes.filter':726 'nodes.foreach':564 'nodes.map':588 'nodesbyid':1009 'nodesep':533 'nodesmapref.current.clear':1040 'nodetim':883,892 'none':700 'null':425,1195,1213 'number':120,126,1201 'o':1002 'object':1048 'onnodeclick':1339 'opac':694 'optim':15,32,203,809,819,941,1043,1359 'otherdep':143,263,294 'otherdepschang':261,267 'output':1400 'overview':1381 'parent':106,740 'parent-child':105 'parentid':748,760 'pattern':96,299,369,375,810,843,847,1364 'payload':382,387,392,397,402,487 'perform':14,31,202,773,776,780,814,949,1083,1358 'permiss':1421 'persist':373 'posit':55,66,586,591,837,1119,1128 'practic':948 'prev':756,759,1305,1306,1315,1330 'prev.expandednodeids':1320 'prevent':305,958 'prevexpandedlistref':224 'prevexpandedlistref.current':244 'prevexpandedset':243,254,281 'prevotherdepsref':230 'prevotherdepsref.current':264 'prevprop':325 'prevprops.data.isexpanded':335 'prevprops.data.label':331 'prevprops.selected':333 'problem':1081,1085,1097,1117,1136,1150 'process':130,320 'process-nod':319 'processnod':311 'product':7,24,1351 'production-readi':6,23,1350 'proper':989,1029,1104 'properti':1064 'provid':1345 'queri':717 'query.tolowercase':724 'query.trim':720 'quick':37 'rank':539 'rankdir':528 'ranksep':537 'rapid':976 're':308,961,1054,1139 're-rend':307,960,1053,1138 'react':2,1165,1171 'react-flow-architect':1 'react.memo':953 'react.mouseevent':1301 'reactflow':9,20,26,45,49,90,1173,1178,1334,1353 'readi':8,25,1352 'rebuild':284 'recurs':167 'redo':407,507 'reduc':374,920 'refer':1039,1067 'relationship':108 'render':209,213,309,875,929,933,946,962,1055,1093,1134,1140 'rendertim':799 'requir':1419 'restor':484 'result':1020,1160 'return':89,195,274,286,295,316,330,343,420,442,449,503,587,629,633,671,721,725,822,862,890,1034,1237,1283,1294,1329,1333 'review':1412 'root':128,159,192,194 'rootnod':162 'rootnodes.foreach':191 'safeti':1422 'save':499 'savetohistori':495,508 'schema':110 'scope':1393 'script':782 'scripts/graph-analyzer.js':784 'search':703,705 'searchnod':713 'select':314,322,323,380,385,418,614 'selectededgeid':350,355,360,363,424 'selectednodeid':422,623,632,645,653,655,676,1193,1212,1307 'separ':536,540,1131 'set':142,226,228,240,432,644,758,1197,1216,1319 'setexpandedid':755 'setselectednodeid':761 'setstat':1208,1304,1314 'sever':907,930 'shouldn':1050 'skill':1344,1369,1385 'skill-react-flow-architect' 'slow':928,1151 'smooth':679 'solut':1082,1090,1103,1125,1141,1154 'sourc':81 'source-sickn33' 'specif':709,1407 'stabl':1148 'start':38,157 'state':18,35,364,368,410,421,443,450,456,1042,1129,1207,1362 'state.edges':1262 'state.edges.map':1238 'state.expandednodeids':433 'state.history':480,493 'state.history.length':467 'state.historyindex':462,466,476,492 'state.nodes':1336 'state.selectednodeid':1244,1246,1251,1253,1258,1260,1263 'stop':1413 'string':118,149,155,222,383,388,393,624,718,738,1025,1194,1227,1313 'stroke':354,1250 'strokewidth':349,1243 'structur':103 'style':347,1232,1241 'stylededg':341,1235,1338 'substitut':1403 'success':1425 'suggest':818,916,940 'switch':415 'target':83 'task':1389 'tb':529 'temporari':1113 'test':1409 'this.calculatecomplexity':806 'this.countedges':797,872 'this.countnodes':794,868 'this.detectpatterns':811 'this.detectperformanceissues':816 'this.estimatememoryusage':803 'this.estimaterendertime':800 'this.suggestoptimizations':820 'time':876,934,1102 'toggl':390,427 'tolowercas':732 'tool':774 'top':530 'topic-agent-skills' 'topic-agentic-skills' 'topic-ai-agent-skills' 'topic-ai-agents' 'topic-ai-coding' 'topic-ai-workflows' 'topic-antigravity' 'topic-antigravity-skills' 'topic-claude-code' 'topic-claude-code-skills' 'topic-codex-cli' 'topic-codex-skills' 'totalcount':840,860,863 'transit':680,686 'treat':1398 'tree':98,102 'treeedg':156 'treenod':113,140,150,174 'trigger':1052 'true':447 'tsx':43 'type':377,379,384,389,394,399,404,406,483,498,903,927,991 'typescript':111,135,214,300,376,453,521,620,711,990,998,1044,1163 'undo':405,470,506 'undo/redo':371 'unnecessari':306,959 'updat':273,395,400,1063 'updateautosavedata':1069 'usag':1099 'use':952,979,999,1045,1110,1126,1142,1367,1383 'usecallback':138,471,496,714,980,1146,1167,1299,1311 'useeffect':1032,1033,1107 'usefocusmod':622 'usehistorymanag':455 'useincrementalgraph':216 'usememo':236,342,607,630,1010,1144,1168,1236,1269 'usereactflow':1176,1222 'useref':225,231,1023,1046,1058,1169,1225 'usest':1166,1209 'valid':1408 'view':764 'virtual':915,918,965 'visibl':169,921 'visibleedg':152,235,297 'visibleedges.values':201 'visiblenod':146,234,296 'visiblenodes.set':175 'visiblenodes.values':198 'w':833 'weakmap':1111 'width':568 'without':1065 'workflow':1375 'x':56,67,592,595 'y':58,69,597,600","prices":[{"id":"67c89ec6-ce02-410a-b78b-6f4c5385e1a7","listingId":"6b0e5450-2492-430a-b3a7-57e529b7198a","amountUsd":"0","unit":"free","nativeCurrency":null,"nativeAmount":null,"chain":null,"payTo":null,"paymentMethod":"skill-free","isPrimary":true,"details":{"org":"sickn33","category":"antigravity-awesome-skills","install_from":"skills.sh"},"createdAt":"2026-04-18T21:43:18.072Z"}],"sources":[{"listingId":"6b0e5450-2492-430a-b3a7-57e529b7198a","source":"github","sourceId":"sickn33/antigravity-awesome-skills/react-flow-architect","sourceUrl":"https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/react-flow-architect","isPrimary":false,"firstSeenAt":"2026-04-18T21:43:18.072Z","lastSeenAt":"2026-04-23T00:51:28.062Z"}],"details":{"listingId":"6b0e5450-2492-430a-b3a7-57e529b7198a","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"sickn33","slug":"react-flow-architect","github":{"repo":"sickn33/antigravity-awesome-skills","stars":34616,"topics":["agent-skills","agentic-skills","ai-agent-skills","ai-agents","ai-coding","ai-workflows","antigravity","antigravity-skills","claude-code","claude-code-skills","codex-cli","codex-skills","cursor","cursor-skills","developer-tools","gemini-cli","gemini-skills","kiro","mcp","skill-library"],"license":"mit","html_url":"https://github.com/sickn33/antigravity-awesome-skills","pushed_at":"2026-04-22T06:40:00Z","description":"Installable GitHub library of 1,400+ agentic skills for Claude Code, Cursor, Codex CLI, Gemini CLI, Antigravity, and more. Includes installer CLI, bundles, workflows, and official/community skill collections.","skill_md_sha":"9945d3c5c9f5e93534a616a0d297849bc1332d24","skill_md_path":"skills/react-flow-architect/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/react-flow-architect"},"layout":"multi","source":"github","category":"antigravity-awesome-skills","frontmatter":{"name":"react-flow-architect","description":"Build production-ready ReactFlow applications with hierarchical navigation, performance optimization, and advanced state management."},"skills_sh_url":"https://skills.sh/sickn33/antigravity-awesome-skills/react-flow-architect"},"updatedAt":"2026-04-23T00:51:28.062Z"}}