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.
The English summary is being prepared. Showing the original description.
See how to installReview the instructions the agent will receive before you install.
@xyflow/react (React Flow v12)Before making changes, find the project root:
find "$HOME" -maxdepth 5 -iname "journey-map" -type d 2>/dev/null
Run from the project root located above:
npm 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.mdNo reviews yet. Tell others what you thought.
No login needed. Share how it worked for you, ask a question, or note where it did not run.
No comments yet. Be the first to write one.
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.
The English summary is being prepared. Showing the original description.
Post-run self-evaluation system that scores agent output on correctness, clarity, actionability, and conciseness. Use after /team runs, skill executions, or when explicitly asked to evaluate output quality.
The English summary is being prepared. Showing the original description.
Create AI marketing videos for ads, promos, product launches, and brand content. Models: Veo, Seedance, Wan, FLUX for visuals, Kokoro for voiceover. Types: product demos, testimonials, explainers, social ads, brand videos. Use for: Facebook ads, YouTube ads, product launches, brand awareness. Triggers: marketing video, ad video, promo video, commercial, brand video, product video, explainer video, ad creative, video ad, facebook ad video, youtube ad, instagram ad, tiktok ad, promotional video, launch video
The English summary is being prepared. Showing the original description.
Use when building AI features into a product: LLM integration, RAG pipelines, guardrails, streaming, AI UX, prompt engineering, or AI cost control. Treats prompts as code and validates every model output.
The English summary is being prepared. Showing the original description.
Your AI research and engineering brain trust. 59 named personas across 8 cells covering frontier labs, applied product, model architecture, reasoning/RL/agents, alignment and interpretability, theory and science of DL, multimodal and…
The English summary is being prepared. Showing the original description.
Use when designing a new REST or GraphQL API, reviewing an API spec before implementation, setting team API standards, or migrating REST to GraphQL. Covers resources, HTTP semantics, pagination, error handling, and pitfalls.
The English summary is being prepared. Showing the original description.