Diagnose nested Vue Flow parent-child relationships and coordinate calculations.
npx skills add https://github.com/endlessblink/flow-state --skill vue-flow-debug
Please help me install this Agent Skill. Skill: vue-flow-debug Source: https://github.com/endlessblink/flow-state/tree/main/.claude/skills/vue-flow-debug Command: npx skills add https://github.com/endlessblink/flow-state --skill vue-flow-debug
Debugging and stabilizing nested Vue Flow canvases by ensuring parent-child links, coordinate systems, and drag interactions behave predictably. This skill guides you to verify node.position semantics, compute correct world coordinates, and align visual rendering with stored data.
Provide a debugging plan to identify and fix mismatched parent-child relationships and coordinate calculations in a nested Vue Flow canvas.
High-intent search queries and answers about installing and using this skill.
Child nodes fail to move with parent groups in Vue Flow due to incorrect parentNode assignments or mismatched coordinate systems. You must validate parent links and ensure relative positions are correctly computed and synced with the store.
To calculate relative coordinates for nested Vue Flow nodes, differentiate between node.position and node.computedPosition. Compute the correct world coordinates for children by validating their relative positions against the parent group's location.
In Vue Flow, node.position defines the relative coordinates for root and child nodes, while node.computedPosition represents the absolute world coordinates. Understanding this distinction is crucial for aligning visual rendering with stored data.
Debug Vue Flow containment logic by applying a clear protocol to validate drag and drop interactions within nested groups. Verify that parent-child relationships and coordinate calculations behave predictably across complex canvases.
Vue Flow supports complex canvases with multiple nested parent-child groups. You must implement proper containment logic and use correct Vue Flow APIs to sync state with the store for predictable grouping behaviors.
petenelsonBuild nested Gutenberg block layouts using InnerBlocks for parent and child blocks.
jesserathbunExecute tasks with fresh context and persistent state files.
linehaul-aiBuild node-based editors and interactive flow visualizations with Svelte Flow.
javierhbrApply Dagre algorithm layouts to React Flow graph nodes and edges.
