react-flow by framara/react-flow-skill
npx skills add https://github.com/framara/react-flow-skill --skill react-flow使用此技能来构建、自定义、调试和优化基于节点的交互式 UI,使用 React Flow (@xyflow/react v12+)。涵盖从基础设置到高级模式的所有内容,例如计算流、子流和外部布局集成。
@xyflow/react 导入 —— 切勿从旧的 reactflow 或 react-flow-renderer 包导入。import '@xyflow/react/dist/style.css'(或使用 base.css 用于自定义样式框架)。<ReactFlow> 父容器必须具有明确的宽度和高度 —— 这是导致空白画布的首要原因。nodeTypes 和 edgeTypes 对象,或用 包装,以防止重新渲染。广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
useMemonodrag 类。nowheel 类,以防止缩放干扰。visibility: hidden 或 opacity: 0 —— 切勿使用 display: none(会破坏尺寸计算)。id 属性。useUpdateNodeInternals 来刷新节点。onNodesChange/onEdgesChange/onConnect)。@xyflow/react)display: nonenodeTypes 定义在组件内部,缺少记忆化onConnect 处理程序或连接点配置错误references/fundamentals.mdreferences/custom-nodes.mdreferences/custom-edges.mdreferences/interactivity.mdreferences/state-management.mdreferences/typescript.mdreferences/layouting.mdreferences/components-and-hooks.mdreferences/performance-and-styling.mdreferences/troubleshooting.mdreferences/e2e-testing.mdreferences/advanced-patterns.mdheight: 100vh 或等效值。nodeTypes / edgeTypes 警告 -> 将对象定义移到组件体外部或用 useMemo 包装。display: none;切换到 opacity: 0。className="nodrag"。onNodesChange 未连接或未正确应用更改。onConnect 处理程序或未调用 addEdge。top 偏移)定位它们并分配唯一的 id。@xyflow/react 或缺少 <ReactFlowProvider>。nodes 数组中出现在子节点之前。@xyflow/react/dist/style.css(或 base.css + 自定义样式)。nodeTypes / edgeTypes 是稳定的引用(在组件外部定义或已记忆化)。type 和 position 的 <Handle> 组件。nodrag 类。onNodesChange、onEdgesChange、onConnect。React.memo 记忆化了自定义节点/边组件。references/fundamentals.mdreferences/custom-nodes.mdreferences/custom-edges.mdreferences/interactivity.mdreferences/state-management.mdreferences/typescript.mdreferences/layouting.mdreferences/components-and-hooks.mdreferences/performance-and-styling.mdreferences/troubleshooting.mdreferences/e2e-testing.mdreferences/advanced-patterns.md每周安装量
90
代码仓库
GitHub 星标数
8
首次出现
2026年2月19日
安全审计
安装于
github-copilot87
codex87
opencode86
gemini-cli86
amp85
kimi-cli85
Use this skill to build, customize, debug, and optimize interactive node-based UIs with React Flow (@xyflow/react v12+). Covers everything from basic setup to advanced patterns like computed flows, sub-flows, and external layout integration.
@xyflow/react — never from legacy reactflow or react-flow-renderer packages.import '@xyflow/react/dist/style.css' (or base.css for custom styling frameworks).<ReactFlow> parent container must have explicit width and height — this is the #1 cause of blank canvases.nodeTypes and edgeTypes objects outside component bodies or wrap in useMemo to prevent re-renders.nodrag class on interactive elements inside custom nodes (inputs, buttons, selects).nowheel class on scrollable elements inside custom nodes to prevent zoom interference.visibility: hidden or opacity: 0 — never display: none (breaks dimension calculation).id props.useUpdateNodeInternals to refresh the node.onNodesChange/onEdgesChange/onConnect) for any non-trivial application.@xyflow/react)display: none on handlesonConnect handler or handle configurationreferences/fundamentals.mdreferences/custom-nodes.mdreferences/custom-edges.mdreferences/interactivity.mdreferences/state-management.mdreferences/typescript.mdreferences/layouting.mdreferences/components-and-hooks.mdheight: 100vh or equivalent.nodeTypes / edgeTypes warning -> move object definition outside component body or wrap in useMemo.display: none; switch to opacity: 0.className="nodrag" to interactive elements.onNodesChange not wired up or not applying changes correctly.onConnect handler missing or not calling .@xyflow/react/dist/style.css is imported (or base.css + custom styles).nodeTypes / edgeTypes are stable references (defined outside component or memoized).<Handle> components with proper type and position.nodrag class.onNodesChange, onEdgesChange, .references/fundamentals.mdreferences/custom-nodes.mdreferences/custom-edges.mdreferences/interactivity.mdreferences/state-management.mdreferences/typescript.mdreferences/layouting.mdreferences/components-and-hooks.mdreferences/performance-and-styling.mdWeekly Installs
90
Repository
GitHub Stars
8
First Seen
Feb 19, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
github-copilot87
codex87
opencode86
gemini-cli86
amp85
kimi-cli85
科学数据探索性分析工具:自动检测200+格式,生成EDA报告与可视化建议
1,000 周安装
references/performance-and-styling.mdreferences/troubleshooting.mdreferences/e2e-testing.mdreferences/advanced-patterns.mdaddEdgetop offset) and assign unique ids.@xyflow/react installed or missing <ReactFlowProvider>.nodes array.onConnectReact.memo.references/troubleshooting.mdreferences/e2e-testing.mdreferences/advanced-patterns.md