/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 the journey map tool. Triggers on: "journey map project", "open journey map", "work on journey map", "build user journey", "react
$ npx -y skills add coco-research/coco --skill journey-map --agent claude-codeHow it fires
How this skill gets triggered: by you, by Claude, or both.
- Fires itselfAuto-invocation. Claude auto-loads it when your prompt matches the work.Auto-invocation is when the right skill fires by itself at the right moment, driven by a FLOW.md router and a hook, instead of you invoking it by name. It is the difference between a skill being installed and a skill actually getting used.Read the full definition →
- You can call itInvoke it directly when you want it.
- Slash command
/journey-map
Context preview
The summary Claude sees to decide when to auto-load this skill.
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
SKILL.md
journey-map.SKILL.mdname: journey-map
description: >
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.
domain: design
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:
1. If the user gives a path, use it. 2. Otherwise search common locations, e.g.:
find "$HOME" -maxdepth 5 -iname "journey-map" -type d 2>/dev/null
3. 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.
Read more
name: journey-map description: > 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. domain: design
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:
1. If the user gives a path, use it. 2. Otherwise search common locations, e.g.:
find "$HOME" -maxdepth 5 -iname "journey-map" -type d 2>/dev/null
3. 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.
Meet Coco. A superintelligent agent framework powered by an advisory board of 389 world-class minds. Scale your AI assistant into a complete engineering department with 142 skills, 277 commands, and persistent state. Universal compatibility. Local privacy. Free and open source.
Repo: coco-research/coco
Other skills on coco.
- /create-rule
Create Cursor rules for persistent AI guidance. Use when the user wants to create a rule, add coding standards, set up project conventions, configure file-specific patterns, create RULE.md files, or asks about .cursor/rules/ or AGENTS.md.
Open skill - /create-skill
Guides users through creating effective Agent Skills for Cursor. Use when the user wants to create, write, or author a new skill, or asks about skill structure, best practices, or SKILL.md format.
Open skill - /create-subagent
Create custom subagents for specialized AI tasks. Use when the user wants to create a new type of subagent, set up task-specific agents, configure code reviewers, debuggers, or domain-specific assistants with custom prompts.
Open skill - /migrate-to-skills
Convert 'Applied intelligently' Cursor rules (.cursor/rules/*.mdc) and slash commands (.cursor/commands/*.md) to Agent Skills format (.cursor/skills/). Use when the user wants to migrate rules or commands to skills, convert .mdc rules to SKILL.md format, or consolidate commands
Open skill - /update-cursor-settings
Modify Cursor/VSCode user settings in settings.json. Use when the user wants to change editor settings, preferences, configuration, themes, font size, tab size, format on save, auto save, keybindings, or any settings.json values.
Open skill - /agent-lightning
Train and optimize AI agents using Microsoft's Agent Lightning framework with reinforcement learning. Use when setting up agent training, instrumenting agents with tracing, configuring LightningStore, implementing reward functions, or optimizing prompts with RL/APO algorithms.
Open skill