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.
インストール方法を見るインストールする前に、エージェントに与えられる指示の中身を確認できます。
@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.mdまだレビューはありません。使ってみた感想をお寄せください。
概要と使いどころ
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.
日本語の概要は準備中です。原文の説明を表示しています。
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.
日本語の概要は準備中です。原文の説明を表示しています。
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
日本語の概要は準備中です。原文の説明を表示しています。
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.
日本語の概要は準備中です。原文の説明を表示しています。
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…
日本語の概要は準備中です。原文の説明を表示しています。
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.
日本語の概要は準備中です。原文の説明を表示しています。