Communitygithub.com

zexuanw958-svg/travel-plan-viz

Migo · 旅行领航 —— 旅行行程をシングルファイル・オフライン対応・モバイルファーストのHTML(インタラクティブマップ+日別タイムライン+出発前リマインダー)に変換します。Claude Code / Codex 汎用スキル(travel-plan-viz)。

travel-plan-viz とは?

このスキルは、旅行の計画や既存の旅程をもとに、1つのHTMLファイルにまとめられたインタラクティブな地図、日別タイムライン、出発前のリマインダーチェックリストを生成します。ユーザーが目的地と日数だけを指定した場合(モードA)は、リサーチガイドに従ってWeb検索を行い、詳細な日別計画を提案します。すでに旅程がある場合(モードB)は、それを解析し、AIが自動で3~4個の具体的な改善提案(例:事前予約が必要な項目、交通手段の最適化など)を会話内で提示します。最終的に、定義されたデータ構造に基づき、カスタムデザイン(frontend-design / huashu-designスキル優先)または内蔵のデザインガイドラインでスタイルされたHTMLを生成し、Map.jsとReminders.jsの機能をインライン化して1ファイルに収めます。対応プラットフォームはClaude CodeとCodexです。

対応✓Claude Code✓Codex CLI~Cursor
npx skills add zexuanw958-svg/travel-plan-viz

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

ドキュメント

旅行計画のビジュアライズ

旅行をシングルファイルHTMLに:インタラクティブマップ、日別タイムライン、出発前の予約リマインダー。機械的な処理は内蔵エンジン(assets/map.js、assets/reminders.js)に任せ、美的処理はデザインステップ(frontend-design / huashu-design、または内蔵ガイドラインでフォールバック)に委ねます。

ステップ1:モードの判断

  • ユーザーが目的地+日数のみを指定した場合(例:「香港4泊3日」)→ モードA(ゼロからの計画)。
  • ユーザーが既に旅程を提供した場合(テキストまたは旧HTMLファイル)→ モードB(既存計画の解析)。

モードA:ゼロからの計画

  1. references/research-guide.mdを読み、Web検索で目的地を調査します。
  2. 会話内でマークダウン形式の詳細な日別計画(朝/昼/晩、観光スポット、交通、宿泊)を提案します。
  3. ユーザーが明確に確認するまで、やり取りを繰り返します。
  4. 「調査補完+生成」に進みます。

モードB:既存計画

  1. ユーザーから提供された旅程を解析します(旧HTMLの場合は構造化データを抽出)。
  2. 簡潔な提案(エージェントの付加価値。押し付け厳禁):ユーザーの計画を「旅程の充実」の観点(出発前の注意事項/天候対策、事前予約項目、ポイント間交通、ペース配分、現地の必食料理、エリア別宿泊の妥当性など)で素早くチェックし、会話内で最大3~4個の具体的で任意の最適化提案を行います。原則:
    • 実際に存在するギャップのみを指摘。計画がすでに十分なら「十分に整っています」と伝え、無理に提案しない、説教しない、ユーザーに代わって旅程を組み直さない。
    • 問題点を一文で示し+方向性を一文で示す。簡潔に。提案は基本的に口頭で行い、HTMLの完成品をクリーンに保ちます(ユーザーが提案もページに含めたい場合のみ追加)。
    • これが「単なるプロンプトからHTMLへの変換」との差別化ポイント——エージェントの判断力を活かしつつ、適度に留めます。
  3. 「調査補完+生成」に進みます(生成は提案にブロックされません;採用するかはユーザーが決定)。

調査補完+生成

  1. references/research-guide.mdに従いWeb検索で補完:座標、実際の画像URL、評価、口コミ、営業時間/定休日、チケット参考価格、事前予約が必要な項目とleadDays、出発前注意事項(天気/台風/服装/支払い/アプリ/予約タイミング)、ポイント間交通(手段/料金/所要時間)、期間限定アクティビティ、各食事の必注料理+参考価格;フライトは選択肢を3~5便提示、ホテルはエリア別+価格帯で推薦し、免責事項と旅程全体のアドバイスも準備。スケジュールは天気/季節のロジックを反映(屋外は涼しい時間帯に配置)。リアルタイムの運賃は調査しません。
  2. assets/page-contract.mdで定義されたtripデータ構造にまとめます。
  3. デザインステップでスタイル化されたHTMLを生成:優先的に専門デザインスキル——frontend-designまたはhuashu-design(花叔Design)を呼び出します(いずれかがインストールされていればそれを使用)。両方ない場合は、references/design-guidelines.mdの内蔵美学基準に従って自分で生成します。どちらの場合もassets/page-contract.mdのブロックと制約を厳守します:
    • assets/map.js、assets/reminders.jsの内容をHTMLにインライン化(シングルファイルを保証)。
    • ページ上部のチェックリストはcomputeReminders+renderChecklistHTMLを使用。
    • 出発前注意事項ブロックを表示。フライトエリアでは選択肢の便を表示(予約済みはハイライト)。ホテルエリアではエリア別+価格帯で表示し、近くに免責事項を目立つように表示。
    • タイムラインカードには営業時間/チケット参考価格/交通/期間限定アクティビティなどのオプションフィールドを表示。各日の食事(必注料理+価格)、当日と全体のアドバイス、1日の代替案(ある場合)も表示。
    • マップにはinitTravelMapを使用し、Leaflet CDNのCSS/JSを導入。
    • タイムライン上でneedsBookingな項目にはreminderBadgeHTML(leadDays)を挿入。
    • 旅行ごとに異なる配色を適用。
  4. <旅程名>-旅行計画.htmlとして作業ディレクトリに保存します。
  5. ユーザーに伝えます:後でこのHTMLファイルを再度渡し、「3日目のXを4日目に移動して」と言えば、元の構造上で修正できること。

やらないこと

リアルタイム運賃/航空券価格、予約代行、多言語UI、バックエンド。完全に静的なシングルファイルです。

関連スキル