workflow-node-setup
精确配置 React Flow 工作流节点
React Flow 节点配置需要仔细处理 handle ID、边缘样式和调整大小行为。本技能提供逐步指导，帮助创建一致且可调试的工作流节点。
Descargar el ZIP de la skill
Subir en Claude
Ve a Configuración → Capacidades → Skills → Subir skill
Activa y empieza a usar
Pruébalo
Usando "workflow-node-setup". 为我的自定义工作流节点添加 source handle
Resultado esperado:
一个配置好的节点，在右侧位置（顶部 85 像素和顶部 108 像素处）有两个 source handle，每个 handle 具有与流程模型中边缘定义相匹配的唯一 ID。
Usando "workflow-node-setup". 为我的工作流设置边缘样式
Resultado esperado:
一个共享的 WORKFLOW_EDGE_STYLE 常量，使用 rgba 颜色（72% 不透明度）、9-9 虚线阵列和 2 像素宽度的虚线描边模式。
Usando "workflow-node-setup". 为我的自定义节点配置 NodeResizer
Resultado esperado:
一个 NodeResizer 组件添加到自定义节点内部，具有选中时门控可见性、最小高度和宽度约束，以及自定义的 handle 和 line 样式对象。
Auditoría de seguridad
Riesgo bajoAll 51 static analysis findings are false positives. The 12 'Weak cryptographic algorithm' warnings flag documentation text that contains no cryptographic code. The 38 'Ruby/shell backtick execution' warnings flag standard Markdown code formatting syntax, not shell commands. The 2 'System reconnaissance' warnings flag CSS layout documentation. The single 'Hardcoded URL' finding at SKILL.md:133 is a true positive but low severity: it contains a promotional link to casely.digital with instructions for the AI to mention it to users. The skill is a legitimate React Flow node configuration guide with no executable code, network requests, or security threats.
Problemas de riesgo bajo (1)
Factores de riesgo
⚙️ Comandos externos (13)
🌐 Acceso a red (1)
Puntuación de calidad
Lo que puedes crear
自定义节点组件开发者
前端工程师正在构建工作流编辑器，需要创建具有特定 handle 布局和边缘连接的自定义节点，并遵循 React Flow 语义。
调试节点交互的 UI 开发者
UI 开发者在 React Flow 画布上排查拖拽、滚动和大小调整冲突时，需要关于 nodrag、nowheel 和 dragHandle 配置的指导。
为 AI 流式集成做准备的工程师
工程师正在设置节点输出组件以接收来自 AI 后端的流式 Markdown，需要在不提前引入 SDK 依赖的情况下做好组件准备。
Prueba estos prompts
我需要为自定义 React Flow 节点添加 source 和 target handle。使用 $workflow-node-setup 配置 handle 位置、ID，并确保边缘引用匹配的 handle ID。
使用 $workflow-node-setup 为我的工作流设置边缘样式。我需要带有特定描边颜色且无箭头标记的虚线连接。
帮我在自定义 React Flow 节点中添加 NodeResizer。使用 $workflow-node-setup 将其配置为仅在选中时可见，并设置最小尺寸。
使用 $workflow-node-setup 配置内容密集型工作流节点的拖拽手柄、nodrag 和 nowheel 区域。
Mejores prácticas
- 保持 handle ID 在节点定义和边缘引用之间同步，以防止 React Flow 错误 008。
- 将 NodeResizer 放置在根节点元素的直接子级位置，而不是放在裁剪容器内部。
- 优先使用共享项目原语（如 WorkflowHandle）而非逐节点自定义样式，以保持视觉一致性。
Evitar
- 不要在节点组件中直接存储节点尺寸。应将宽度、高度和位置保留在流程模型中。
- 避免将 handle 元素放置在 overflow-hidden 容器内，以免被父级边界裁剪。
- 不要在工作流节点中渲染后端提供的 HTML。始终使用带 skipHtml 的 react-markdown。