diff --git a/.claude/skills/writing-playwright-tests/core/canvas.md b/.claude/skills/writing-playwright-tests/core/canvas.md
index 178a68e59..39c0444c3 100644
--- a/.claude/skills/writing-playwright-tests/core/canvas.md
+++ b/.claude/skills/writing-playwright-tests/core/canvas.md
@@ -1,5 +1,9 @@
 # Canvas Interaction Patterns
 
+> **⚠️ LiteGraph Mode:** These patterns apply to the default LiteGraph canvas rendering. For Vue Nodes 2.0 (DOM-based rendering), see [vue-nodes.md](../features/vue-nodes.md). Check which mode you're testing:
+> - **LiteGraph:** Canvas-based, use `comfyPage.canvas.*`, `NodeReference`, coordinate-based interactions
+> - **Vue Nodes:** DOM-based, use `comfyPage.vueNodes.*`, Playwright locators, CSS selectors
+
 ## Critical: Always Use nextFrame()
 
 Canvas changes don't render immediately. **Always** call `nextFrame()` after canvas operations:
diff --git a/.claude/skills/writing-playwright-tests/core/nodes.md b/.claude/skills/writing-playwright-tests/core/nodes.md
index 9ac6733ce..7b14d2ea9 100644
--- a/.claude/skills/writing-playwright-tests/core/nodes.md
+++ b/.claude/skills/writing-playwright-tests/core/nodes.md
@@ -1,5 +1,12 @@
 # Node Patterns
 
+> **⚠️ LiteGraph Mode:** These patterns apply to the default LiteGraph canvas rendering. For Vue Nodes 2.0 (DOM-based rendering), see [vue-nodes.md](../features/vue-nodes.md).
+>
+> | Mode | Node Access | Example |
+> |------|-------------|---------|
+> | LiteGraph | `comfyPage.getNodeRefByTitle()` | `node.click()`, `node.getWidget('seed')` |
+> | Vue Nodes | `comfyPage.vueNodes.getNodeByTitle()` | Playwright locators, CSS classes |
+
 ## Getting Node References
 
 ### By Title (Preferred)
diff --git a/.claude/skills/writing-playwright-tests/features/vue-nodes.md b/.claude/skills/writing-playwright-tests/features/vue-nodes.md
index 69377e70d..e2fdcc034 100644
--- a/.claude/skills/writing-playwright-tests/features/vue-nodes.md
+++ b/.claude/skills/writing-playwright-tests/features/vue-nodes.md
@@ -2,6 +2,13 @@
 
 Vue Nodes 2.0 is an alternative rendering mode for nodes. Tests need to explicitly enable it.
 
+> **📋 This file covers Vue Nodes equivalents for:**
+> - Canvas interactions → [LiteGraph version](../core/canvas.md)
+> - Node operations → [LiteGraph version](../core/nodes.md)  
+> - Widget testing → [LiteGraph version](../testing/widgets.md)
+>
+> Vue Nodes uses **DOM elements** instead of canvas drawing. Test with Playwright locators, not coordinate-based clicks.
+
 ## Enabling Vue Nodes
 
 ```typescript
diff --git a/.claude/skills/writing-playwright-tests/testing/widgets.md b/.claude/skills/writing-playwright-tests/testing/widgets.md
index 6526ad00c..7e9eff847 100644
--- a/.claude/skills/writing-playwright-tests/testing/widgets.md
+++ b/.claude/skills/writing-playwright-tests/testing/widgets.md
@@ -1,5 +1,12 @@
 # Widget Patterns
 
+> **⚠️ LiteGraph Mode:** These patterns apply to the default LiteGraph canvas rendering where widgets are drawn on canvas. For Vue Nodes 2.0 (DOM-based widgets), see [vue-nodes.md](../features/vue-nodes.md#dom-based-widget-access).
+>
+> | Mode | Widget Access | Interaction Style |
+> |------|---------------|-------------------|
+> | LiteGraph | `node.getWidget('seed')` | `setValue()`, `getValue()`, canvas coordinates |
+> | Vue Nodes | `comfyPage.vueNodes.getWidgetByName()` | DOM locators, `click()`, `fill()` |
+
 ## Getting Widgets
 
 ```typescript