feat: onboard React Flow documentation views

SKILL.md

@@ -8,18 +8,18 @@ description: >
   admonitions, editing docusaurus.config.ts, applying voice and inclusive-language standards,
   or setting up deployment to Vercel, Netlify, GitHub Pages, or Cloudflare Pages. Triggers on
   docs/, blog/, docusaurus.config, sidebars.ts, .mdx files, or any request to write, improve,
-  build a local YAML data database for React/MDX views, render editable Draw.io sources with
-  docusaurus-plugin-drawio, or restructure documentation — even when the user only says "write docs", "document this",
+  build a local YAML data database for React/MDX views, create React Flow roadmaps or dependency
+  maps, render editable Draw.io sources with docusaurus-plugin-drawio, or restructure documentation — even when the user only says "write docs", "document this",
   or "the docs are a mess". Asks who the reader is and what they should be able to DO before
   writing, because the answer decides the structure.
 license: MIT
 metadata:
   author: workspace-skills-code-agent
-  version: "1.2"
+  version: "1.3"
   spec: agentskills.io/specification
   framework: Diátaxis
   hermes:
-    tags: [docusaurus, documentation, diataxis, drawio, mdx]
+    tags: [docusaurus, documentation, diataxis, drawio, mdx, react-flow]
     related_skills: [drawio-main]
 compatibility: Designed for Docusaurus v3. Works with Cline, Claude Code, GitHub Copilot, OpenAI Codex, and other compatible agent environments
 ---
@@ -134,6 +134,10 @@ Use these replacements. This isn't optional:
 
 When Epics, Features, Tasks, requirements, or architectural decisions must feed several documentation views, keep the authoritative records in a local `.yml`-only data tree and load them during the Docusaurus build. Requirements must use separate functional and non-functional folders, and architectural decisions must use the exact `data/architecture-decisions/` folder. Do not duplicate records inside MDX. Follow [references/local-yaml-data-database.md](references/local-yaml-data-database.md) for record schemas, stable IDs, canonical relationships, generated indexes, validation, React hooks/components, MDX composition, and maintenance commands.
 
+### React Flow roadmaps and dependency maps
+
+Use `@xyflow/react` when validated documentation data needs an interactive roadmap, Gantt-like timeline, Feature dependency graph, Requirement-to-Feature traceability map, or architectural decision-to-Feature map. React Flow is the renderer, not the source database or an automatic layout engine. Follow [references/react-flow-visualizations.md](references/react-flow-visualizations.md) for Docusaurus BrowserOnly integration, deterministic Gantt positioning, Dagre/ELK layout choices, source-YAML adapters, read-only interaction, accessibility, sharp styling, semantic table fallbacks, testing, and browser verification.
+
 ### Draw.io source diagrams
 
 When a page needs a Draw.io diagram, keep the editable `.drawio` XML in the documentation repository and render that source directly with `docusaurus-plugin-drawio`. Load `drawio-main` to author or change the diagram, then follow [references/drawio-source-diagrams.md](references/drawio-source-diagrams.md) to install the plugin with pnpm, register it, consume the source from MDX with `@theme/Drawio` and `!!raw-loader!`, select multi-page diagrams, and verify the production build and browser rendering. An exported PNG/SVG alone is not an onboarded source diagram.
@@ -186,6 +190,7 @@ Load the one that matches the task. Don't read all four.
 | Write or edit prose, headings, lists, or code examples | [references/writing-guide.md](references/writing-guide.md) — voice, words to cut, inclusive language, pre-publish checklist |
 | Touch `docusaurus.config.ts` | [references/config-reference.md](references/config-reference.md) — the options that matter, sensible defaults, config anti-patterns |
 | Build or maintain a local YAML database that feeds React components and MDX | [references/local-yaml-data-database.md](references/local-yaml-data-database.md) — dedicated entity folders, `.yml` schemas, indexes, relationships, build-time loading, typed hooks, and validation |
+| Build a React Flow roadmap, Gantt-like view, or dependency/traceability map | [references/react-flow-visualizations.md](references/react-flow-visualizations.md) — `@xyflow/react`, Docusaurus client boundaries, YAML adapters, layouts, accessibility, fallbacks, and verification |
 | Onboard or render an editable `.drawio` source | [references/drawio-source-diagrams.md](references/drawio-source-diagrams.md) — pnpm install, plugin registration, MDX raw-source import, viewer options, and verification |
 | Repair a docs section that builds but violates a required hierarchy or content contract | [references/architecture-ia-remediation.md](references/architecture-ia-remediation.md) — RED-first structure validation, approval-safe scaffolding, link pitfalls, browser checks, and remote PR/CI readback |
 | Ship the site, or debug a failing build | [references/deployment.md](references/deployment.md) — Vercel, Netlify, GitHub Pages, Cloudflare, and common failures |