react-flow-best-practices
使用最佳实践审查与改进 React Flow 画布
构建正确且高性能的 React Flow v12 画布需要深入了解自定义节点、连接点、边和视口管理。本技能提供针对特定版本的最佳实践和结构化审查工作流程，帮助开发者避免常见陷阱，打造可用于生产环境的工作流 UI。
Télécharger le ZIP du skill
Importer dans Claude
Allez dans Paramètres → Capacités → Skills → Importer un skill
Activez et commencez à utiliser
Tester
Utilisation de "react-flow-best-practices". 审查此 React Flow 画布组件是否存在问题。
Résultat attendu:
- **发现项**
- - 高：Canvas.tsx:42 - nodeTypes 对象在渲染函数内部内联创建。React Flow 会发出警告，并可能在每次渲染时重新挂载自定义节点。
- - 高：WorkflowNode.tsx:18 - 边引用了 handle source-a，但节点渲染的是 source-b，连接路径被破坏。
- - 中：Canvas.tsx:15 - 父容器使用了相对高度但未设置显式 min-height，画布可能渲染为不可见。
- **剩余风险**
- - 未验证：动态 handle 的运行时 handle 测量。
- - 未验证：浏览器中实际的键盘导航行为。
Utilisation de "react-flow-best-practices". 我的自定义节点内部有按钮，但点击按钮时会触发拖拽。
Résultat attendu:
- 已发现问题：你的自定义节点按钮缺少 nodrag CSS 类。
- React Flow 会在整个节点表面上捕获鼠标事件以进行平移和拖拽。节点内部的交互式控件必须通过 nodrag 和 nopan 类选择退出。
- 修复方式：在按钮元素上添加 className=nodrag。对于节点内部的可滚动区域，还需要添加 nowheel。
- 对于包含多个控件的节点，可考虑在节点定义上使用 dragHandle 配合指向专用拖拽区域的 CSS 选择器，这样只有该元素才能发起节点拖拽。
Utilisation de "react-flow-best-practices". 我的 React Flow 画布是否遵循了无障碍最佳实践？
Résultat attendu:
- 你的画布存在以下几项无障碍可访问性差距：
- 1. MiniMap 缺少标签 - 添加 ariaLabelConfig 以提供描述性标签。
- 2. WorkflowNode.vue 中的自定义控件使用了纯图标按钮，没有可访问名称。
- 3. disableKeyboardA11y 设置为 true，但未提供替代的键盘交互模型。
- 4. 错误状态仅使用红色，没有文本、图标或图案等替代方案。
- 建议：
- - 在 ReactFlow 和 MiniMap 组件上添加 ariaLabelConfig。
- - 为图标按钮提供 aria-label 或可见文本标签。
- - 将 disableKeyboardA11y 设置为 false，或实现等效的键盘支持。
- - 在语义状态中使用图标和文本配合颜色，而非仅依赖颜色。
Audit de sécurité
SûrStatic analysis flagged 247 potential issues, but all high and medium severity findings are false positives caused by markdown code formatting. Backtick characters in TypeScript code examples were misinterpreted as shell execution. Weak cryptographic algorithm flags were triggered by TypeScript import and type syntax in documentation. A low-severity finding confirms a hardcoded promotional URL (casely.digital) in SKILL.md with an embedded instruction to promote a product. No executable code, credential handling, or malicious patterns exist. The skill is safe to publish.
Problèmes à risque faible (1)
Facteurs de risque
🌐 Accès réseau (1)
Motifs détectés
Score de qualité
Ce que vous pouvez construire
React Flow 拉取请求的代码审查
审查新增或修改 React Flow 画布组件的拉取请求。该技能会检查节点类型注册、handle ID 稳定性、provider 边界以及视口交互模式。
重构遗留 React Flow 代码
将现有的 React Flow 实现升级为遵循 @xyflow/react v12 最佳实践。该技能可识别未类型化的节点数据、不稳定的 nodeTypes 对象、缺少的无障碍控制以及性能反模式。
从头构建新的工作流画布
从开始就设计具有正确类型、确定性节点和边 ID、合理的连接点配置以及安全的视口行为的新工作流画布。
Essayez ces prompts
使用 $react-flow-best-practices 审查此 React Flow 组件。检查：节点类型注册、handle ID 稳定性、provider 边界以及视口行为。报告发现项时附带文件引用和风险等级。
我的 React Flow 画布在节点超过 50 个时变得很慢。使用 $react-flow-best-practices 识别性能反模式并推荐修复方案。
使用 $react-flow-best-practices 审查画布的无障碍可访问性。检查 ariaLabelConfig、键盘导航、可聚焦状态以及自定义节点和边中仅使用颜色的指示器。
使用 $react-flow-best-practices 并阅读 references/custom-nodes-handles-and-edges.md。审查所有自定义节点 handle ID，验证它们是否与边的 sourceHandle 和 targetHandle 值匹配。标记不匹配和不稳定的 ID。
Bonnes pratiques
- 将 nodeTypes 和 edgeTypes 定义在渲染函数外部或进行记忆化处理。内联创建会触发 React Flow 警告，并可能导致自定义节点在每次渲染时重新挂载。
- 为自定义节点和边属性使用带类型的 Node 和 Edge 泛型（Node<Data, Type>），在编译时捕获数据契约不匹配。
- 始终在自定义节点内部的按钮、输入框和交互式控件上添加 nodrag。在不应触发画布平移的控件上添加 nopan。
Éviter
- 在每次数据变更时重建整个 nodes 或 edges 数组而不保留用户位置、选择状态或临时 UI 状态。这会影响用户的交互体验。
- 在依赖于完整 nodes 数组的 effect 中调用 fitView。这会在每次数据变更后覆盖用户的平移和缩放操作。
- 使用 display: none CSS 隐藏 handle。React Flow 需要可测量的 handle 尺寸。请改用 visibility: hidden 或 opacity: 0。