Flow builder
Everything needed to take a drag-and-drop automation editor from an empty route to something people can build a real journey in: the graph model, the step catalog, the canvas, the config rail, the confirmations, the preview, and history. Install the skills and let Claude work through them in order.
Order
- flow-graph-model —
{ nodes, edges }as a Zod discriminated union, outlet-labelled edges, single-path execution, configs that tolerate a half-built flow, and one canonical comparison shared by the save gate and the unsaved badge. Everything else is downstream of this. - flow-node-catalog — one catalog the palette, the engine, the simulator and the field picker all read: outlets (static or derived), default config, purity, and the assumption a preview is allowed to make. Includes the eighteen step types of a journey engine and the checklist for adding one.
- flow-builder-canvas — React Flow: cards with one handle per outlet, the hover plus that aims before it adds, the Action/Condition pill, a placeholder that reserves the slot, edge repair after an outlet rename, and layout that only re-flows when asked.
- flow-builder-inspector — the single right rail that takes turns holding the step inspector, the palette, flow details, the test harness and history; per-type forms with a field picker and a JSON escape hatch; the header bar, its banners, and debounced drafts.
- destructive-action-confirmations — when a removal deserves a modal at all, and how to word it: plan the outcome once, describe it with the same function that carries it out, and offer consequences instead of verbs.
- flow-simulation-and-testing — an in-browser simulator that shares the
engine's own evaluators, labels everything it cannot compute, feeds the
{{field}}pickers and the canvas path preview, beside a real journaled test run. - flow-versioning-and-portability — a revision per save, a structural diff that calls a drag a move, optimistic concurrency the person resolves, restores that write forward, and an export carrying descriptors rather than credentials.
Notes
The pieces interlock more tightly than most bundles. The catalog in step 2 is
what step 3 reads for outlets and colours, what step 5's planner ranks branches
by, and what step 6 reads its assumptions from. The graphsDiffer predicate
from step 1 is the same function the server's write gate in step 7 uses — share
it, or the "Unsaved" badge can never clear.
Two invariants are worth stating before any code: positions belong to the author (nothing re-flows a canvas unprompted), and a graph that cannot be parsed is a flow that silently stops running — which is why configs normalize legacy shapes on read, forever, instead of migrating.
Steps 1, 2, 6 and 7 are engine-agnostic — put them in a package both your API and your builder import, and the simulator's claim to route "exactly" becomes true by construction rather than by maintenance.