context-to-gantt

name: context-to-gantt description: 議事録・要件定義・プロジェクト記述などあらゆるコンテキストからタスク・マイルストーン・期間を抽出し、Kibo UI スタイルのガントチャートを単一の自己完結型 HTML ファイルとして生成する。非構造化プロジェクトコンテキストをビジュアルタイムラインに変換したいとき、議事録からスケジュール図を生成したいとき、ビルド不要で共有できるガントチャートを作りたいときに使う。リアルタイム共同編集・DB 永続化が必要なタスク・ユーザー認証付きインタラクティブ PJ 管理ツールには使わない。

context-to-gantt

コンテキスト（議事録・要件定義・タスクリスト）から Kibo UI スタイルのガントチャートを 単一の自己完結型 HTML ファイルとして生成する。

前提

• 出力は 1ファイル の HTML。ビルド不要、ブラウザで直接開ける。
• デザインは Kibo UI Gantt の視覚スタイルに準拠 （shadcn/ui CSS 変数・カラーパレット・バーデザイン）。
• Tailwind CSS は CDN 経由（cdn.tailwindcss.com）。React ビルドは不要。
• タイムラインは長い変化なし期間を斜線の「省略区間」として折りたたむ圧縮表示を標準とする。開始・終了・マイルストーン・短期イベントなどの変化点周辺だけを残し、長期継続タスクは省略区間をまたいで分割表示する。

Step 1 — コンテキストの解析

与えられたテキストから以下を抽出する。

日付が明示されていない場合の推定ルール：

1. テキストに「n週間」「n ヶ月」などの相対表現がある → 文脈から絶対日付を計算する。
2. 相対情報しかない → 今日（exportedAt）を基準に割り当てる。
3. 順序関係（A → B → C）が分かる場合 → 前タスクの終了日に 1 日加算して開始日とする。

Step 2 — Gantt JSON の構築

抽出結果を以下の JSON スキーマに従って組み立てる。
詳細な型定義は references/gantt-data-schema.json を参照すること。

{
  "title": "プロジェクト名",
  "exportedAt": "YYYY-MM-DD",
  "groups": [
    {
      "id": "group-1",
      "name": "フェーズ名",
      "tasks": [
        {
          "id": "task-1",
          "name": "タスク名",
          "startDate": "YYYY-MM-DD",
          "endDate": "YYYY-MM-DD",
          "assignee": "山田 太",
          "color": "blue",
          "status": "in-progress"
        }
      ]
    }
  ],
  "markers": [
    { "date": "YYYY-MM-DD", "label": "リリース" }
  ]
}

color の選択基準：

グループ内のタスクで色が指定されなければ、グループ単位で同じ色に統一する。

Step 3 — データのバリデーション

JSON を tmp/gantt-output.json として保存し、バリデーションスクリプトを実行する。

# スキル同梱の validate スクリプトを使用する
python3 skills/context-to-gantt/scripts/extract-tasks.py \
  --input tmp/gantt-output.json

エラーが出た場合は stderr の内容を読んで修正し、再実行する。
SUCCESS: が表示されるまで繰り返す。

Step 4 — HTML の生成

assets/gantt-template.html を読み込み、以下の 2 箇所を置換して完成させる。

テンプレートには圧縮タイムラインの描画ロジックが含まれる。長い変化なし期間は自動で斜線の「省略区間」として折りたたまれるため、HTML 生成時に追加実装しない。長期間のタスクを短く見せるために日付を改変してはならない。実データの日付を保持し、表示側で省略する。

出力ファイル名は {プロジェクト名のスネークケース}-gantt.html とする。
例: web_redesign-gantt.html

置換例

<!-- 変更前 -->
const GANTT_DATA = {{GANTT_JSON}};

<!-- 変更後 -->
const GANTT_DATA = {
  "title": "Web リニューアル",
  "exportedAt": "2026-06-03",
  "groups": [...]
};

Step 5 — 動作確認

生成した HTML ファイルのパスをユーザーに伝える。
ブラウザで開くとガントチャートが表示される。

動作確認では、生成 HTML に {{TITLE}} と {{GANTT_JSON}} が残っていないこと、timeline-gap と buildCompactSegments が含まれていることを確認する。必要なら JavaScript 部分を抽出して node --check で構文確認する。

✓ ガントチャートを生成しました: {出力ファイルパス}
  - グループ数: N
  - タスク数: M
  - 期間: YYYY-MM-DD 〜 YYYY-MM-DD
  ブラウザで開いてください。

エラーハンドリング