Journey Map Agent Skill

> 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

files

instructions only

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.

Other skills for the same job

different authors, same section of the catalogue

MCP Builder

by anthropics

vendor ×13

Guide for creating high-quality MCP (Model Context Protocol) servers that enable LLMs to interact with external services through well-designed tools. Use when building MCP servers to integrate external APIs or services, whether in Python (FastMCP) or Node/TypeScript (MCP SDK).

Automatically creates user-facing changelogs from git commits by analyzing commit history, categorizing changes, and transforming technical commits into clear, customer-friendly release notes. Turns hours of manual changelog writing into minutes of automated generation.

774 tokens

Finishing A Development Branch

by ZhanlinCui

×7

Use when implementation is complete, all tests pass, and you need to decide how to integrate the work - guides completion of development work by presenting structured options for merge, PR, or cleanup

Vercel React Native Skills

by vercel-labs

vendor ×6

React Native and Expo best practices for building performant mobile apps. Use when building React Native components, optimizing list performance, implementing animations, or working with native modules. Triggers on tasks involving React Native, Expo, mobile performance, or native platform APIs.

39k tokens

Vercel React Best Practices

by ratacat

×5

React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.

Next.js best practices - file conventions, RSC boundaries, data patterns, async APIs, metadata, error handling, route handlers, image/font optimization, bundling

Use when starting feature work that needs isolation from current workspace or before executing implementation plans - creates isolated git worktrees with smart directory selection and safety verification

1k tokens

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.