react-flow-architectlisted
Install: claude install-skill aiskillstore/marketplace
# ReactFlow Architect
Build production-ready ReactFlow applications with hierarchical navigation, performance optimization, and advanced state management.
## Quick Start
Create basic interactive graph:
```tsx
import ReactFlow, { Node, Edge } from "reactflow";
const nodes: Node[] = [
{ id: "1", position: { x: 0, y: 0 }, data: { label: "Node 1" } },
{ id: "2", position: { x: 100, y: 100 }, data: { label: "Node 2" } },
];
const edges: Edge[] = [{ id: "e1-2", source: "1", target: "2" }];
export default function Graph() {
return <ReactFlow nodes={nodes} edges={edges} />;
}
```
## Core Patterns
### Hierarchical Tree Navigation
Build expandable/collapsible tree structures with parent-child relationships.
#### Node Schema
```typescript
interface TreeNode extends Node {
data: {
label: string;
level: number;
hasChildren: boolean;
isExpanded: boolean;
childCount: number;
category: "root" | "category" | "process" | "detail";
};
}
```
#### Incremental Node Building
```typescript
const buildVisibleNodes = useCallback(
(allNodes: TreeNode[], expandedIds: Set<string>, otherDeps: any[]) => {
const visibleNodes = new Map<string, TreeNode>();
const visibleEdges = new Map<string, TreeEdge>();
// Start with root nodes
const rootNodes = allNodes.filter((n) => n.data.level === 0);
// Recursively add visible nodes
const addVisibleChildren = (node: TreeNode) => {
visibleNodes.set(node.id, node);
if (expandedIds.h