Loading skill
Install any skill in seconds. Free to start, no credit card required.
Get Started Free →Loads full context for a React Flow (@xyflow/react) user journey mapping project. Use when working on, extending, debugging, or building features for the journey map tool. Triggers on: "journey map project", "open journey map", "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.
.claude/skills/coco-research-journey-map/SKILL.md| Test case | Without → With | Effect | Δ tokens | Δ turns |
|---|---|---|---|---|
| case-07 | ✗→✓ | ▲ Improved | -46% | 0% |
| case-08 | ✗→✓ | ▲ Improved | 6% | 0% |
| case-09 | ✗→✓ | ▲ Improved | -51% | 0% |
| case-10 | ✗→✓ | ▲ Improved | -55% | 0% |
| case-18 | ✗→✓ | ▲ Improved | -49% | 0% |
"Locating the Project" below before running any commands.
@xyflow/react (React Flow v12)Before making changes, find the project root:
bash find "$HOME" -maxdepth 5 -iname "journey-map" -type d 2>/dev/null
Run from the project root located above:
bashnpm run dev # start dev server (Vite) npm run build # production build npm run preview # preview build
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.
| 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/packages.mdgraph engine this project uses.
| Case | Status | Duration (ms) | Turns | Tokens | Tool calls | ||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Without | With | Δ | Without | With | Δ | Without | With | Δ | Without | With | Δ | ||
case-01 | fail→fail | 8,252 | 15,435 | +87% | 1 | 1 | 0% | 1,056 | 752 | -29% | 0 | 0 | — |
case-02 | fail→fail | 14,826 | 15,171 | +2% | 1 | 1 | 0% | 1,708 | 832 | -51% | 0 | 0 | — |
case-03 | fail→fail | 15,000 | 9,345 | -38% | 1 | 1 | 0% | 197 | 729 | +270% | 0 | 0 | — |
case-04 | pass→pass | 18,838 | 14,049 | -25% | 1 | 1 | 0% | 2,216 | 2,841 | +28% | 0 | 0 | — |
case-05 | pass→pass | 22,051 | 13,953 | -37% | 1 | 1 | 0% | 3,187 | 3,263 | +2% | 0 | 0 | — |
case-06 | pass→pass | 14,560 | 14,605 | +0% | 1 | 1 | 0% | 1,783 | 2,498 | +40% | 0 | 0 | — |
case-07 | fail→pass | 14,002 | 7,677 | -45% | 1 | 1 | 0% | 1,594 | 855 | -46% | 0 | 0 | — |
case-08 | fail→pass | 9,776 | 1,645 | -83% | 1 | 1 | 0% | 745 | 788 | +6% | 0 | 0 | — |
case-09 | fail→pass | 21,738 | 8,129 | -63% | 1 | 1 | 0% | 2,206 | 1,081 | -51% | 0 | 0 | — |
case-10 | fail→pass | 10,436 | 1,736 | -83% | 1 | 1 | 0% | 1,746 | 786 | -55% | 0 | 0 | — |
case-11 | pass→pass | 13,023 | 6,558 | -50% | 1 | 1 | 0% | 1,744 | 748 | -57% | 0 | 0 | — |
case-12 | fail→fail | 9,886 | 8,177 | -17% | 1 | 1 | 0% | 1,580 | 810 | -49% | 0 | 0 | — |
case-13 | pass→pass | 16,191 | 7,055 | -56% | 1 | 1 | 0% | 1,916 | 848 | -56% | 0 | 0 | — |
case-14 | fail→fail | 10,375 | 10,509 | +1% | 1 | 1 | 0% | 1,421 | 754 | -47% | 0 | 0 | — |
case-15 | fail→fail | 17,797 | 15,557 | -13% | 1 | 1 | 0% | 1,960 | 828 | -58% | 0 | 0 | — |
case-16 | fail→fail | 12,404 | 10,519 | -15% | 1 | 1 | 0% | 1,724 | 833 | -52% | 0 | 0 | — |
case-17 | pass→fail | 9,438 | 10,178 | +8% | 1 | 1 | 0% | 1,556 | 670 | -57% | 0 | 0 | — |
case-18 | fail→pass | 10,839 | 7,092 | -35% | 1 | 1 | 0% | 1,523 | 783 | -49% | 0 | 0 | — |
case-19 | pass→pass | 15,242 | 6,723 | -56% | 1 | 1 | 0% | 2,329 | 1,828 | -22% | 0 | 0 | — |
case-20 | pass→pass | 12,705 | 6,927 | -45% | 1 | 1 | 0% | 1,213 | 828 | -32% | 0 | 0 | — |
case-21 | pass→pass | 11,114 | 6,916 | -38% | 1 | 1 | 0% | 970 | 847 | -13% | 0 | 0 | — |
case-22 | fail→pass | 12,029 | 2,082 | -83% | 1 | 1 | 0% | 2,041 | 955 | -53% | 0 | 0 | — |
case-23 | pass→pass | 11,383 | 6,354 | -44% | 1 | 1 | 0% | 1,252 | 722 | -42% | 0 | 0 | — |
case-24 | fail→fail | 17,335 | 9,449 | -45% | 1 | 1 | 0% | 1,992 | 735 | -63% | 0 | 0 | — |
DecimalAI ran this skill against gemini-3.6-flash twice over the same eval suite — once with the skill loaded and once without — and compared the two runs case by case. 24 cases were attempted, and 17 counted toward the lift figure. The other 7 produced results that are not comparable between the two arms, so they are excluded from the headline rather than averaged into it. The headline lift of +21 percentage points is the difference between those two pass rates over the 17 comparable cases. 3 cases got worse with the skill loaded, and they are included in that figure.
Without the skill loaded, the model failed this case. With it loaded, the same prompt on the same model passed. This is one improved case from the latest verified run; every case, including any that regressed, is in the table above.
Other measured skills in the registry, with their headline benchmark lift.