Merge pull request 'Add React Flow visualization contract' (#1) from feat/react-flow-visualization-contract into test

SKILL.md

@@ -1,7 +1,7 @@
 ---
 name: corp-v1-channel-kanban
 description: "Use when operating or synchronizing a Corp v1 project's Kanban channel. Maintains Board and Focus across Epic, Feature, and task state; correlates all six same-project channels; and records human approval before tasks enter Delivery's executable InBacklog queue."
-version: 1.2.0
+version: 1.3.0
 author: Hermes Agent
 license: MIT
 metadata:
@@ -114,11 +114,32 @@ Every item links to its authoritative record and shows ID, title, owner, depende
 
 Tasks appear in Focus `InBacklog` only with explicit human approval evidence from the Kanban channel or authoritative documentation. A task moves to `InProgress` from verified Delivery evidence and to `ToBeReleased` only when implementation evidence and release handoff criteria are satisfied. Kanban reflects evidence; it does not fabricate progress.
 
+## React Flow visualization contract
+
+When Kanban documentation contains relationship-dense execution data, deliberately consider a read-only `@xyflow/react` view after loading `documentation-docusaurus` and its React Flow guidance. React Flow may supplement—but never replace—the governed Board columns, Focus hierarchy, and semantic tables. Appropriate Kanban views include:
+
+- Epic-to-Feature-to-task Focus hierarchy;
+- task dependencies and blocking relationships;
+- cross-item critical path only when it is explicitly derivable from approved canonical dependencies and sequencing evidence;
+- governed flow-state transitions and bottlenecks;
+- execution-to-governance contradictions, with links to both authoritative sources;
+- version and release dependency views supported by canonical allocation and release evidence.
+
+The four-column Board remains the primary governed representation and normally stays semantic HTML. A small, empty, or simple Focus dataset should remain a table or hierarchy. Render a graph only when validated canonical YAML contains the required identities, relationships, states, and evidence and the visualization materially improves comprehension. Do not infer approval, Focus admission, hierarchy, dependencies, sequencing, progress, version allocation, release readiness, or critical path.
+
+Use one typed, deterministic adapter and the same selector to produce stable nodes, edges, legends, validation warnings, and an adjacent semantic table fallback. Generated graph data, coordinates, viewport state, and client state are derived presentation data, never a second source of truth. Preserve authority and relationship semantics: Scope identities, Architecture dependencies and implementation gates, Kanban Focus decisions, Delivery execution, and Releases evidence must remain distinguishable.
+
+Use Dagre for ordinary directed graphs and ELK only for complex or grouped graphs. Use Docusaurus `BrowserOnly` where client-only rendering is required, while keeping the semantic fallback server-renderable, searchable, linkable, and usable if JavaScript or hydration fails.
+
+Documentation canvases are read-only. Disable mutation affordances, including `nodesDraggable={false}`, `nodesConnectable={false}`, connection creation, deletion, and accidental persistence. Preserve keyboard navigation, meaningful accessible labels and authoritative-record links, visible focus, non-color-only meaning, reduced-motion behavior, responsive controls, and sharp styling with `border-radius: 0`.
+
+Acceptance requires canonical-YAML validation, graph/table parity from the same selector, stable deterministic output, missing-reference failure or explicit warning behavior, empty/loading/error states, keyboard and screen-reader checks, no-JavaScript fallback, production build, browser console/network health, and remote exact-head verification.
+
 ## State Reconciliation
 
 Use authoritative ownership:
 
-- Epic/Feature identity and product status → Scope maintained by General;
+- Epic/Feature identity and product status → Scope;
 - requirements, architecture, task definitions/dependencies, implementation approval, version allocation → Architecture;
 - Focus admission decision → Kanban human decision;
 - task execution progress and completion evidence → Delivery;
@@ -195,4 +216,5 @@ Include exact project documentation paths, item IDs, source links, human decisio
 - [ ] Feature implementation approval, task dependencies, and version constraints were verified.
 - [ ] Derived states are labeled and contradictions are escalated.
 - [ ] Documentation/navigation/link/build and remote readback checks passed.
+- [ ] When React Flow is used, its graph and semantic table share one canonical-YAML selector and pass accessibility, build, browser, and remote exact-head checks.
 - [ ] Completed work includes exact evidence.