workflow-node-setup

Workflow Node Setup

Use this skill to tune React Flow workflow nodes without breaking React Flow semantics or the existing canvas interaction model.

Workflow

1. Inspect the current node, shared helpers, and flow model before editing.
2. Prefer shared project primitives over custom local handle styling.
3. Keep React Flow ids synchronized. Every edge sourceHandle and targetHandle must match an actual rendered Handle id. React Flow error #008 means the edge references a missing handle.
4. Make visual changes in the narrowest place:
   • Node content/layout belongs in the node component.
   • Node dimensions, positions, edge handle ids, and edge visual style belong in the flow model.
   • Canvas behavior belongs in the canvas component.
5. Verify with both static checks and browser sanity checks before finishing.

Handles

• Use a shared WorkflowHandle component for standard handles when available. Do not hand-roll Handle styling unless a node truly needs a different visual system.
• For multi-channel nodes, render multiple handles with distinct ids:

<WorkflowHandle
  id="source-preview-test-case"
  type="source"
  position="right"
  style={{ top: 85 }}
/>
<WorkflowHandle
  id="source-style"
  type="source"
  position="right"
  style={{ top: 108 }}
/>

• Keep handles outside clipped content where possible. Root node should generally stay relative and not clip handles; use an inner shell for rounded overflow-hidden.
• For incoming edges, preserve target-left unless the product explicitly needs multiple target channels.
• Align handles to meaningful content rows, but keep ids stable after edges point to them.

Edges

• Use explicit sourceHandle and targetHandle in edge definitions.
• For muted dashed connections, use React Flow edge style:

const WORKFLOW_EDGE_STYLE = {
  stroke: "rgba(145, 147, 151, 0.72)",
  strokeDasharray: "9 9",
  strokeWidth: 2,
};

• Remove markerEnd when the design calls for plain dashed lines without arrows.
• If only one node needs a different edge style, create a separate edge style constant instead of changing all edges.