hiroki ito c872debe4b feat: コミットレポートツール（コミネコ）初期コミット

Made-with: Cursor

2026-04-03 19:31:32 +09:00

13 KiB

Raw Permalink Blame History

name	description
diagram-guidelines	HTML図解のデザインガイドライン。図解を作成するときに参照。

図解デザインガイドライン

コミット情報をHTML図解に変換する際のデザイン基準です。

必須手順（最重要）

図解生成の前に、以下のファイルを必ず読み込んでください：

.claude/skills/diagram-guidelines/examples/daily-summary.html  # 今日の開発（統合版）
.claude/skills/diagram-guidelines/examples/branch-summary.html # ブランチ詳細
.claude/skills/diagram-guidelines/examples/by-app.html
.claude/skills/diagram-guidelines/examples/timeline.html
.claude/skills/diagram-guidelines/examples/tips.html

これらのexamplesと同じデザインパターンで生成してください。自己流で作らないこと。

サイズ仕様（固定）

項目	値
幅	420px 固定
高さ	600px 固定
スクリーンショット	840 x 1200px（Retina 2x）

コンテンツが収まらない場合は、項目数を減らすか複数枚に分割してください。

出力ファイル構成（5種類）

ファイル	名称	役割
daily-summary.html	今日の開発	統計情報 + ハイライト（誰が何をしたか、最大4件）
branch-summary.html	ブランチ詳細	デフォルトブランチ: 今日反映された変更 / その他: 今日の作業内容
by-app.html	アプリ別	アプリごとの変更一覧（最大5件/アプリ）、ブランチタグ付き
timeline.html	タイムライン	時系列での作業履歴（最大4件）、ブランチタグ付き
tips.html	ワンポイントTIPS	今日の変更に関連する豆知識（設定で有効時のみ）、ブランチタグ付き

ページ分割ルール:

コンテンツが多い場合は by-app-1.html, by-app-2.html のように分割
タイムラインは4件を超えるとフッターが見切れるため、残りは「+N more commits」で表示
TIPSはプロジェクト設定の tips.enabled が true の場合のみ生成

ブランチタグ（全ページ共通）

すべてのコミット/ハイライト項目にはブランチタグを表示します。

ブランチの分類

重要: ブランチ名の prefix（feature/、fix/等）ではなく、デフォルトブランチかどうかで判断します。

# デフォルトブランチの取得
DEFAULT_BRANCH=$(gh api repos/{owner}/{repo} --jq '.default_branch')

ブランチタグの色分け

判定方法	背景色	テキスト色	ドット色
デフォルトブランチ	bg-green-100	text-green-600/700	bg-green-500
fix/* prefix	bg-orange-100	text-orange-600/700	bg-orange-500
docs/* prefix	bg-purple-100	text-purple-600/700	bg-purple-500
その他全て	bg-blue-100	text-blue-600/700	bg-blue-500

重要: ラベルは常にブランチ名をそのまま表示する（main, feature/xxx, fix/xxx等）。色だけで種類を区別する。

ブランチタグのHTML

<!-- インライン版（コンパクト） -->
<div class="flex items-center gap-1 px-1.5 py-0.5 bg-blue-100 rounded text-xs text-blue-600">
  <div class="w-1.5 h-1.5 rounded-full bg-blue-500"></div>
  <span>feature/video</span>
</div>

<!-- ブランチ名が長い場合は短縮 -->
<!-- feature/video-player → feature/video -->
<!-- fix/login-session-timeout → fix/login -->

フッターの凡例

すべてのページにブランチ凡例を含めます（色のみで区別）：

<div class="flex gap-3">
  <span class="flex items-center gap-1 text-xs text-green-600">
    <span class="w-2 h-2 rounded-full bg-green-500"></span>デフォルト
  </span>
  <span class="flex items-center gap-1 text-xs text-blue-600">
    <span class="w-2 h-2 rounded-full bg-blue-500"></span>作業
  </span>
  <span class="flex items-center gap-1 text-xs text-orange-600">
    <span class="w-2 h-2 rounded-full bg-orange-500"></span>fix
  </span>
</div>

※ 凡例は「色の意味」を示すもの。実際のタグにはブランチ名を表示する。

ビジネス視点での記述

重要: すべての説明は「ユーザーにとって何が変わったか」を中心に記述します。

禁止表現と置き換え

禁止	代わりに書くべき内容
バグ修正	〇〇できなかった問題を解消
調整	〇〇が見やすく/使いやすくなった
改善	〇〇が速く/簡単になった
対応	〇〇できるようになった
リファクタリング	〇〇の動作が安定した

詳細は code-analyzer スキルを参照してください。

技術スタック

Tailwind CSS: CDN版を使用 <script src="https://cdn.tailwindcss.com"></script>
shadcn/ui風デザイン: slate系カラー、rounded-lg、shadow-sm
アイコン: インラインSVG（Lucide互換）を使用、絵文字は使わない
GitHubアバター: https://avatars.githubusercontent.com/u/{user_id}?v=4

基本レイアウト

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>レポート</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <style>
    body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Hiragino Sans', sans-serif; }
  </style>
</head>
<body class="bg-white p-4">
  <div class="w-[420px] h-[600px] mx-auto flex flex-col">
    <!-- コンテンツ -->
  </div>
</body>
</html>

重要:

幅 420px、高さ 600px 固定
flex flex-col でコンテンツを配置
min-height: 100vh は使わない

カラーパレット（shadcn/ui準拠）

用途	Tailwindクラス
背景	bg-white, bg-slate-50
テキスト（メイン）	text-slate-900
テキスト（サブ）	text-slate-500, text-slate-400
ボーダー	border-slate-200
アクセント（青）	bg-blue-500, text-blue-600
アクセント（紫）	bg-purple-500, text-purple-600
アクセント（緑）	bg-emerald-500, text-emerald-600
アクセント（オレンジ/ハイライト）	bg-amber-500, text-amber-600

コンポーネント

ヘッダー（共通）

<div class="flex items-center justify-between mb-4">
  <div class="flex items-center gap-2">
    <div class="w-8 h-8 rounded-lg bg-slate-900 flex items-center justify-center">
      <!-- GitHubロゴSVG -->
    </div>
    <div>
      <h1 class="text-base font-semibold text-slate-900">タイトル</h1>
      <p class="text-xs text-slate-500">リポジトリ名</p>
    </div>
  </div>
  <div class="text-sm font-medium text-slate-700">12/25 - 26</div>
</div>

統計バー（サマリー用）

<div class="flex items-center justify-center gap-6 py-3 mb-4 bg-slate-50 rounded-lg">
  <div class="text-center">
    <div class="text-xl font-bold text-slate-900">10</div>
    <div class="text-xs text-slate-500">commits</div>
  </div>
  <div class="w-px h-8 bg-slate-200"></div>
  <div class="text-center">
    <div class="text-xl font-bold text-slate-900">4</div>
    <div class="text-xs text-slate-500">contributors</div>
  </div>
</div>

ハイライトアイテム（サマリー用）

<div class="flex items-start gap-3 p-3 bg-amber-50 rounded-lg border border-amber-100">
  <div class="w-1.5 h-1.5 rounded-full bg-amber-500 mt-2 flex-shrink-0"></div>
  <div class="text-sm text-slate-800">動画を途中から再生できるようになった</div>
</div>

アプリ別セクション（by-app用）

<div class="mb-4">
  <div class="flex items-center gap-2 mb-3">
    <div class="w-6 h-6 rounded-lg bg-blue-500 flex items-center justify-center">
      <!-- アプリアイコン -->
    </div>
    <div class="text-sm font-semibold text-slate-900">アプリ名</div>
    <div class="text-xs text-slate-400">(path/)</div>
    <div class="flex-1 h-px bg-slate-200 ml-2"></div>
  </div>

  <div class="space-y-2 pl-2">
    <!-- 変更アイテム -->
  </div>
</div>

変更アイテム（by-app用）

<div class="flex items-start gap-3 p-3 bg-blue-50 rounded-lg border border-blue-100">
  <div class="w-1.5 h-1.5 rounded-full bg-blue-500 mt-2 flex-shrink-0"></div>
  <div>
    <div class="text-sm text-slate-800">動画を途中から再生できるようになった</div>
    <div class="text-xs text-slate-500 mt-1">補足説明</div>
  </div>
</div>

タイムラインアイテム（timeline用）

<div class="relative pl-6">
  <div class="absolute left-0 top-1.5 w-4 h-4 rounded-full bg-blue-500 border-2 border-white"></div>
  <div class="bg-slate-50 rounded-lg p-3 border border-slate-100">
    <div class="flex items-center justify-between mb-1">
      <div class="flex items-center gap-2">
        <img src="avatar_url" class="w-5 h-5 rounded-full" alt="">
        <span class="text-xs font-medium text-slate-700">username</span>
      </div>
      <span class="text-xs text-slate-400">12/26 12:01</span>
    </div>
    <div class="text-sm text-slate-800">変更内容</div>
    <div class="flex items-center gap-1.5 mt-2">
      <div class="w-2 h-2 rounded bg-blue-500"></div>
      <span class="text-xs text-slate-400">アプリ名</span>
    </div>
  </div>
</div>

フッター（共通）

<div class="border-t border-slate-200 pt-3">
  <div class="flex items-center justify-between">
    <div class="flex -space-x-2">
      <img src="avatar1" class="w-5 h-5 rounded-full border-2 border-white" alt="">
      <img src="avatar2" class="w-5 h-5 rounded-full border-2 border-white" alt="">
    </div>
    <div class="text-xs text-slate-400">Generated by Claude Code</div>
  </div>
</div>

ワンポイントTIPS（tips用）

TIPSは以下の構成で生成する：

ヘッダー: 電球アイコン + タイトル（設定の tips.title を使用）
関連する変更: どの変更に関連するTIPSか
トピックタイトル: 解説するテーマ
図解: 簡単なフロー図やイラスト（bg-slate-50の中にボックスを並べる）
解説テキスト: わかりやすい説明
今回の修正: このTIPSと今日の変更の関連
フッター: カテゴリラベル + Generated by Claude Code

レイアウト制約（重要）:

図解は3ステップまでに収める（4ステップ以上は見切れる原因）
各要素の margin/padding を小さめに（mb-3, p-2.5 など）
解説テキストは2段落以内に
600px内に収まるか確認してからスクリーンショット

TIPSの内容はプロジェクト設定の tips.prompt に従って生成する（省略時は変更内容から自動判断）。

よく使うアイコン（インラインSVG）

GitHubロゴ

<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
  <path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z"/>
</svg>

スター（ハイライト）

<svg class="w-5 h-5 text-amber-500" fill="currentColor" viewBox="0 0 24 24">
  <path d="M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z"/>
</svg>

スマートフォン（モバイルアプリ）

<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
  <path stroke-linecap="round" stroke-linejoin="round" d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z"/>
</svg>

パズル（ツール/プラグイン）

<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
  <path stroke-linecap="round" stroke-linejoin="round" d="M11 4a2 2 0 114 0v1a1 1 0 001 1h3a1 1 0 011 1v3a1 1 0 01-1 1h-1a2 2 0 100 4h1a1 1 0 011 1v3a1 1 0 01-1 1h-3a1 1 0 01-1-1v-1a2 2 0 10-4 0v1a1 1 0 01-1 1H7a1 1 0 01-1-1v-3a1 1 0 00-1-1H4a2 2 0 110-4h1a1 1 0 001-1V7a1 1 0 011-1h3a1 1 0 001-1V4z"/>
</svg>

スクリーンショット撮影

screenshot-capture スキルのスクリプトを使用：

node .claude/skills/screenshot-capture/scripts/capture.js input.html output.png

出力サイズ: 840 x 1200px（Retina 2x）

注意事項

絵文字は使用しない（プロフェッショナルなアイコンを使用）
GitHubアバターを積極的に使用
モノレポの場合は必ずアプリ別にグループ化
日本語で説明文を記述
すべての説明はビジネス視点で記述
"Generated by Claude Code" をフッターに含める

13 KiB Raw Permalink Blame History Unescape Escape