mcpbeat

Journey Map

coco-research/journey-map

> Loads full context for a React Flow (@xyflow/react) user journey mapping project. Use when working on, extending, debugging, or building features for "work on journey map", "build user journey", "react flow journey project", "journey-map app", or any request to add features like swimlanes, emotion curves, persona nodes, touchpoints, or pain point markers.

1k tokens
context cost
the whole folder, loaded on every use
2
files
instructions only
0
copies elsewhere
how many repositories repackaged it
196
stars on the repo
on the repository, not the skill itself

Install

one command, takes just this skill from the repository 
npx skills add https://github.com/coco-research/coco --skill journey-map

The instruction itself

7 sections, as written by the author

Journey Map Project

Project

  • Locating it: this skill does not assume a fixed install path. See

"Locating the Project" below before running any commands.

  • Stack: React 19 + Vite + TypeScript + @xyflow/react (React Flow v12)
  • Purpose: Rich user journey map tool for PMs and UX researchers

Locating the Project

Before making changes, find the project root:

  • If the user gives a path, use it.
  • Otherwise search common locations, e.g.:
   find "$HOME" -maxdepth 5 -iname "journey-map" -type d 2>/dev/null
  • If nothing is found, ask the user where the project lives.

Dev Commands

Run from the project root located above:

npm run dev      # start dev server (Vite)
npm run build    # production build
npm run preview  # preview build

Stack

Single package: @xyflow/react (React Flow v12). There is no AntV X6

dependency — the project fully migrated off X6, and no --legacy-peer-deps

flag is needed on React 19.

See references/packages.md for imports, node pattern, layout constants, file structure.

Implemented Features

| Feature | Mechanism |

|---|---|

| Swimlanes (persona rows) | swimlaneBg node type — wide colored band, zIndex=0 |

| Stage headers + narratives | stageHeader / stageNarr node types |

| Touchpoint cards | touchpoint node — seq badge, timing chip, emoji, title, badges |

| Emotion curve | EmotionCurve.tsx SVG component below canvas |

| Ad-hoc cross-flow | AdHocFlow.tsx component below canvas |

| Pan + zoom | React Flow built-in |

| Minimap | React Flow <MiniMap> |

| Controls | React Flow <Controls> |

| Persona focus/dim | focusPersona state → opacity on non-focused touchpoints |

| Detail panel | Click touchpoint → slide-in right panel |

References

  • Full package list + versions + plugin roles: references/packages.md
  • React Flow (MIT licensed, https://github.com/xyflow/xyflow) is the only

graph engine this project uses.

How to use it

Copy the folder

Take coco-research/journey-map from the repository into ~/.claude/skills for personal use, or into .claude/skills inside a project.

Check the name does not clash

The agent identifies a skill by the name field in its header. Two skills with the same name cannot sit side by side — one of them will be ignored.