--- name: diagram-guidelines description: 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/等）ではなく、**デフォルトブランチかどうか**で判断します。 ```bash # デフォルトブランチの取得 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 ```html

feature/video

``` ### フッターの凡例すべてのページに**ブランチ凡例**を含めます（色のみで区別）： ```html

デフォルト作業 fix

``` ※ 凡例は「色の意味」を示すもの。実際のタグにはブランチ名を表示する。 ## ビジネス視点での記述 **重要**: すべての説明は「ユーザーにとって何が変わったか」を中心に記述します。 ### 禁止表現と置き換え | 禁止 | 代わりに書くべき内容 | |------|----------------------| | バグ修正 | 〇〇できなかった問題を解消 | | 調整 | 〇〇が見やすく/使いやすくなった | | 改善 | 〇〇が速く/簡単になった | | 対応 | 〇〇できるようになった | | リファクタリング | 〇〇の動作が安定した | 詳細は **code-analyzer** スキルを参照してください。 ## 技術スタック - **Tailwind CSS**: CDN版を使用 `` - **shadcn/ui風デザイン**: slate系カラー、rounded-lg、shadow-sm - **アイコン**: インラインSVG（Lucide互換）を使用、絵文字は使わない - **GitHubアバター**: `https://avatars.githubusercontent.com/u/{user_id}?v=4` ## 基本レイアウト ```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 | ## コンポーネント ### ヘッダー（共通） ```html

タイトル

リポジトリ名

12/25 - 26

``` ### 統計バー（サマリー用） ```html

commits

contributors

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

動画を途中から再生できるようになった

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

アプリ名

(path/)

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

動画を途中から再生できるようになった

補足説明

``` ### タイムラインアイテム（timeline用） ```html

username

12/26 12:01

変更内容

アプリ名

``` ### フッター（共通） ```html

Generated by Claude Code

``` ### ワンポイントTIPS（tips用） TIPSは以下の構成で生成する： 1. **ヘッダー**: 電球アイコン + タイトル（設定の `tips.title` を使用） 2. **関連する変更**: どの変更に関連するTIPSか 3. **トピックタイトル**: 解説するテーマ 4. **図解**: 簡単なフロー図やイラスト（bg-slate-50の中にボックスを並べる） 5. **解説テキスト**: わかりやすい説明 6. **今回の修正**: このTIPSと今日の変更の関連 7. **フッター**: カテゴリラベル + Generated by Claude Code **レイアウト制約（重要）:** - **図解は3ステップまで**に収める（4ステップ以上は見切れる原因） - 各要素の margin/padding を小さめに（mb-3, p-2.5 など） - 解説テキストは2段落以内に - 600px内に収まるか確認してからスクリーンショット TIPSの内容はプロジェクト設定の `tips.prompt` に従って生成する（省略時は変更内容から自動判断）。 ## よく使うアイコン（インラインSVG） ### GitHubロゴ ```html ``` ### スター（ハイライト） ```html ``` ### スマートフォン（モバイルアプリ） ```html ``` ### パズル（ツール/プラグイン） ```html ``` ## スクリーンショット撮影 **screenshot-capture** スキルのスクリプトを使用： ```bash node .claude/skills/screenshot-capture/scripts/capture.js input.html output.png ``` 出力サイズ: 840 x 1200px（Retina 2x） ## 注意事項 - 絵文字は使用しない（プロフェッショナルなアイコンを使用） - GitHubアバターを積極的に使用 - モノレポの場合は必ずアプリ別にグループ化 - 日本語で説明文を記述 - **すべての説明はビジネス視点で記述** - "Generated by Claude Code" をフッターに含める