ユーザーストーリーを可視化する専門スキル。6つの専門エージェントチームで、 ジャーニーマップの分析から Pencil (.pen) ビジュアル出力まで一気通貫で実行する。
プロダクト情報とターゲットユーザーを入力し、認知→検討→初回利用→習慣化→推薦の 5フェーズで行動・思考・感情・接点・機能・課題・機会・Devアクションを構造化し、 Markdownドキュメントと Pencil ビジュアルジャーニーマップを出力する。離脱トリガー分析を強化し、ペインポイントと機会を視覚的に強調する。
ペルソナファイルがあれば自動読み込み、なければ手動入力でも動作する。Use when: ジャーニーマップを可視化したい、ユーザー体験を図で表現したい、 カスタマージャーニーをビジュアル化したい、離脱要因を分析したい、 UXフローを .pen ファイルで出力したい。
Triggers: "ジャーニー", "journey", "ジャーニーマップ", "journey map", "ユーザー体験", "user journey", "UXフロー", "体験設計", "カスタマージャーニー", "customer journey", "可視化", "visualize", "user story", "ユーザーストーリー", "離脱分析", "drop-off"
インストールする前に、エージェントに与えられる指示の中身を確認できます。
6つの専門エージェントがチームで議論し、ユーザージャーニーマップを作成・可視化する。 ペルソナファイルがあれば自動連携するが、手動入力のみでも動作する独立スキル。 Markdown ドキュメントに加え、Pencil (.pen) によるビジュアルマップも出力する。
.claude/user-story-visualizer/{YYYY-MM-DD}_{project}/
├── context.md <- プロダクト情報・ユーザータイプ一覧
├── log.md <- 議事録
├── research-data.md <- タッチポイント・行動パターン・離脱トリガー調査
├── journeys/
│ ├── journey-01.md <- ユーザータイプ1のジャーニーマップ（離脱トリガー含む）
│ ├── journey-02.md
│ └── ...
├── insights/
│ ├── cross-analysis.md <- 全ジャーニー横断分析
│ └── dev-roadmap.md <- 優先度付き開発ロードマップ
└── visuals/
└── journey-map.pen <- Pencil ビジュアルジャーニーマップ
以下を確認する（不明ならユーザーに質問）:
ペルソナファイルがある場合:
~/.claude/persona-creation/*/personas/persona-*.md を検索TeamCreate で user-story-visualizer チームを作成。以下6エージェントを 1つのメッセージで並列に Task ツールで起動する。
| name | 役割 | 主な手段 |
|---|---|---|
context-manager | コンテキストファイル・議事録の管理 | Write/Edit |
journey-architect | フレームワーク設計・品質管理・離脱トリガー分析 | 分析 |
ux-researcher | タッチポイント・行動パターン・離脱トリガー調査 | WebSearch, Write |
journey-writer | ジャーニーマップ執筆（離脱トリガーセクション含む） | Write/Edit |
insight-analyst | クロス分析・開発ロードマップ | Write/Edit |
journey-visualizer | Pencil ビジュアルジャーニーマップ生成 | Pencil MCP |
各エージェントは agents/ ディレクトリにサブエージェントとして定義済み。
TaskCreate で7つのタスクを作成:
addBlockedBy: ["1"]）addBlockedBy: ["1"]）addBlockedBy: ["2"]）- フレームワーク確定後すぐに開始。リサーチデータは届き次第取り込むaddBlockedBy: ["4"]）- 全ジャーニー完成後に開始addBlockedBy: ["4"]）- 全ジャーニー完成後に開始addBlockedBy: ["1","2","3","4","5","6"]）subagent_type: "context-manager" # agents/ で定義済み
team_name: "user-story-visualizer"
mode: "bypassPermissions"
run_in_background: true
プロンプトに含める情報（全エージェント共通）:
init.sh が出力する絶対パスをそのまま使う
/Users/babashunsuke/Desktop/miravy/.claude/user-story-visualizer/2026-02-21_miravy/.claude/... のような相対パスは動作しないjourney-01.md, journey-02.md, ... のゼロ埋め2桁。journey-1.md 形式は禁止）visuals/ ディレクトリの絶対パスと .pen ファイル名を指定する[journey-architect]
-> 全員に: 5フェーズ×8行のマッピングルール + 離脱トリガー分析フレームワーク
-> journey-writer: 「このフレームワークに従って執筆してください」
-> ux-researcher: 「各ユーザータイプのタッチポイントと離脱トリガーを調査してください」
[ux-researcher]
-> journey-writer に: リサーチデータ（ファイル + 要約メッセージ）
-> journey-architect に: タッチポイント・離脱トリガー調査結果
[context-manager]
-> 全員に: context.md, log.md 作成完了通知
[journey-writer]
-> 1体完成ごとに全員に共有
-> journey-architect: フレームワーク準拠チェック依頼
-> ux-researcher: リサーチデータ整合性チェック依頼
[journey-architect]
-> 1体完成ごとにレビュー → journey-writer にフィードバック
[ux-researcher]
-> タッチポイント整合性を確認 → journey-writer にフィードバック
[insight-analyst]
-> 全ジャーニー読み込み → クロス分析 → 開発ロードマップ
-> チームリーダーに完了報告
[journey-visualizer]
-> 全ジャーニーファイルを読み込み → Pencil でビジュアルマップ生成
-> チームリーダーに完了報告（.pen ファイルパスを添付）
[context-manager]
-> log.md を最終更新
全エージェントのタスクが completed になった後、最終レポート作成の前にファイル存在を検証する。
user-story-visualizer/{date}_{project}/
├── context.md <- context-manager
├── log.md <- context-manager
├── research-data.md <- ux-researcher
├── journeys/
│ ├── journey-01.md <- journey-writer（内容があること）
│ ├── journey-02.md
│ └── ...
├── insights/
│ ├── cross-analysis.md <- insight-analyst
│ └── dev-roadmap.md <- insight-analyst
└── visuals/
└── journey-map.pen <- journey-visualizer
検証手順:
journeys/*.md のファイル数を確認（ユーザータイプ数と一致するか）visuals/journey-map.pen の存在を確認全ファイルが揃ったら JOURNEY_REPORT.md をプロジェクトルートに出力する。
レポートに含める:
visuals/journey-map.pen）shutdown_request を送信TeamDelete でチーム削除bash scripts/init.sh <project-name>
# 例
bash scripts/init.sh miravy
# -> .claude/user-story-visualizer/2026-02-21_miravy/ を作成（カレントディレクトリ直下）
# visuals/ ディレクトリも含めて作成される
まだレビューはありません。使ってみた感想をお寄せください。
概要と使いどころ
This skill should be used when the user asks to "create a team", "spawn agents", "parallel execution", "delegate tasks to agents", "use a swarm", "team workflow", "split work across agents", "run tasks in parallel", or mentions wanting multiple agents to collaborate on a complex task.
日本語の概要は準備中です。原文の説明を表示しています。
Agent Teams スキルを設計・構築するためのベストプラクティスガイド。 サブエージェント定義、SendMessage 通信プロトコル、タスク依存管理、 PostToolUse Hook によるログ、MCP ツール統合、コンテキストファイル設計を網羅。 7つの実績あるチームスキル（app-naming, ui-review, logo-design, persona-creation, skill-creator-team, ui-variations, aso-optimize）から抽出したパターン集。 Use when: Agent Teams を使ったスキルを新規作成したい、 既存のチームスキルの品質を改善したい、エージェント間通信のデバッグ、 チームスキルの設計パターンを知りたい。 Triggers: "agent team", "チームスキル", "エージェントチーム", "サブエージェント定義", "SendMessage パターン", "チーム設計", "エージェント間通信", "team skill", "swarm pattern"
アプリ名・サービス名の命名を、5つの専門エージェントチームで多角的に評価・決定するスキル。 ブランディング、商標/法的リスク、デジタルプレゼンス(SEO/ASO/SNS)、国際展開(多言語/発音)の 4観点から候補を提案・調査・議論し、コンテキストファイルと議事録で次回セッションへ引き継ぐ。 Use when: アプリ名を決めたい、サービス名を変更したい、プロダクト名を検討したい、 ネーミングブレスト、名前の商標チェック、アプリ名のリネーム。 Triggers: "アプリ名", "サービス名", "プロダクト名", "ネーミング", "名前を決め", "リネーム", "rename", "app name", "naming", "ブランド名", "商標チェック"
App Store プレビュー動画を Remotion (React) で生成する Agent Team スキル。 video-director が構成を設計し、script-writer がナレーション台本を作成し、 motion-designer が Remotion コードを実装し、preview-reviewer がコードレビューし、 frame-inspector がレンダリング結果を目視検証する。 Use when: App Store プレビュー動画を作りたい、アプリのプロモーション動画を作りたい、 Remotion で動画を生成したい。 Triggers: "プレビュー動画", "App Store 動画", "アプリ動画", "preview movie", "Remotion", "動画作成", "app preview"
アプリのトーン&マナー（トンマナ）を8名のエージェントチームで設計するスキル。 ブランドアーキタイプ・パーソナリティ定義から、カラー・タイポグラフィ・ビジュアルスタイル・ トーン・オブ・ボイスまでを一貫設計し、Pencil (.pen) + Markdown で成果物を出力する。 「デザインテンション」（矛盾ペア）を核に、AIっぽくない独自のブランドアイデンティティを生成する。
仕様書・要件定義からソフトウェアアーキテクチャを設計するスキル。 5人の専門エージェント（Architecture Lead・Module Designer・Dependency Analyst・ Platform Expert・Devil's Advocate）が協議しながら、 モジュール分割・依存関係・データフロー・インターフェース設計を行う。 成果物は構造化されたアーキテクチャ設計書（Markdown）。 Use when: 仕様書からどう設計するか迷っている時、モジュール分割の方針を決めたい時、 技術スタックに合ったアーキテクチャパターンを選びたい時、 設計書を作成したい時。 Triggers: "アーキテクチャ設計", "arch design", "仕様書から設計", "モジュール分割", "設計書を作りたい", "アーキテクチャを考えて", "コンポーネント設計", "依存関係を設計", "どう設計する", "design the architecture", "design from spec"