mcpField
T
timeline-creator

timeline-creator

github.com/mhattingpete生産性689329 回インストール14 週間前に更新
リポジトリ

timeline-creator について

インタラクティブな HTML タイムラインやプロジェクトロードマップを作成するスキルです。タスク、日付、フェーズ、マイルストーンをレスポンシブなガントチャート形式で表示します。

主な機能

  1. 01HTML タイムラインの生成
  2. 02ガントチャート形式のタスクバー
  3. 03任意のフェーズ分け
  4. 04日付付きマイルストーン
  5. 05進捗とステータスの表示
  6. 06レスポンシブレイアウト

活用シーン

  1. 01プロジェクト日程の概要作成
  2. 02四半期または任意のロードマップ提示
  3. 03タスクの進捗とマイルストーンの追跡

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/mhattingpete/claude-skills-marketplace --skill timeline-creator

インストール後、Claude Code で/timeline-creatorを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

assets/templates/
base_template.html
timeline_components.html
references/
design_patterns.md
svg_library.md

詳細

タイムライン作成ツール

インタラクティブな HTML タイムラインや、ガントチャートとマイルストーンを含むプロジェクトロードマップを作成します。

使用する場面

  • 「[project] のタイムラインを作成」
  • 「Q1～Q4 のロードマップを生成」
  • 「スケジュールのガントチャートを作成」
  • 「プロジェクトのマイルストーンを表示」

コンポーネント

  1. タイムラインヘッダー：プロジェクト名、期間、完了率
  2. フェーズグループ：Q1、Q2、Q3、Q4、またはカスタムフェーズ
  3. タイムライン項目：開始日と終了日、進捗状況、ステータスを含むタスク
  4. マイルストーン：日付付きの主要な成果物
  5. ガントチャートの可視化：期間を示す横棒

HTML 構造

<!DOCTYPE html>
<html>
<head>
  <title>[Project] Timeline</title>
  <style>
    body { font-family: system-ui; max-width: 1400px; margin: 0 auto; }
    .timeline-bar { background: linear-gradient(90deg, #4299e1, #48bb78); height: 20px; border-radius: 4px; }
    .milestone { border-left: 3px solid #e53e3e; padding-left: 10px; }
    /* Status colors: #48bb78 (done), #4299e1 (in-progress), #718096 (planned) */
  </style>
</head>
<body>
  <h1>[Project] Timeline</h1>
  
  
</body>
</html>

タイムラインバーのパターン

<div class="timeline-item">
  <span>Task Name</span>
  <div class="timeline-bar" style="width: [percentage]%; background: [status-color];"></div>
  <span>[start] - [end]</span>
</div>

ワークフロー

  1. プロジェクトからタスク、日付、フェーズを抽出する
  2. 期間の割合を計算する
  3. フェーズ（四半期またはカスタム）ごとにグループ化する
  4. ガントチャート形式のバーを含む HTML を作成する
  5. マイルストーンのセクションを追加する
  6. [project]-timeline.html に書き込む

ステータスに意味的な色を使用し、レイアウトはレスポンシブにしてください。

コメント

Markdown 対応