ADS/commit-report-tool
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source 
Made-with: Cursor
This commit is contained in:
hiroki ito
2026-04-03 19:31:32 +09:00
commit c872debe4b
29 changed files with 4344 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.claude/skills/diagram-guidelines/SKILL.md
+348
View File
@@ -0,0 +1,348 @@
---
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
<!-- インライン版（コンパクト） -->
<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 -->
```
### フッターの凡例
すべてのページに**ブランチ凡例**を含めます（色のみで区別）：
```html
<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`
## 基本レイアウト
```html
<!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 |
## コンポーネント
### ヘッダー（共通）
```html
<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>
```
### 統計バー（サマリー用）
```html
<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>
```
### ハイライトアイテム（サマリー用）
```html
<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用）
```html
<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用）
```html
<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用）
```html
<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>
```
### フッター（共通）
```html
<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は以下の構成で生成する：
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
<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>
```
### スター（ハイライト）
```html
<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>
```
### スマートフォン（モバイルアプリ）
```html
<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>
```
### パズル（ツール/プラグイン）
```html
<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** スキルのスクリプトを使用：
```bash
node .claude/skills/screenshot-capture/scripts/capture.js input.html output.png
```
出力サイズ: 840 x 1200px（Retina 2x）
## 注意事項
- 絵文字は使用しない（プロフェッショナルなアイコンを使用）
- GitHubアバターを積極的に使用
- モノレポの場合は必ずアプリ別にグループ化
- 日本語で説明文を記述
- **すべての説明はビジネス視点で記述**
- "Generated by Claude Code" をフッターに含める
.claude/skills/diagram-guidelines/examples/branch-summary.html
+183
View File
@@ -0,0 +1,183 @@
<!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; }
.line-clamp-2 {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
</style>
</head>
<body class="bg-white p-4">
<div class="w-[420px] h-[650px] mx-auto flex flex-col">
<!--
============================================================
ブランチサマリーは2パターンあります:
1. デフォルトブランチ（main等）: 緑
- 「今日反映された変更」セクション
- 累計情報は表示しない（意味がないため）
2. その他のブランチ（作業ブランチ）: 青
- 「今日の作業内容」セクション
- 累計/今日/開発者/日目を表示
判定方法:
DEFAULT_BRANCH=$(gh api repos/{owner}/{repo} --jq '.default_branch')
⚠️ ラベルは常にブランチ名をそのまま表示（main, feature/xxx, fix/xxx等）
============================================================
-->
<!-- Header -->
<div class="flex items-center justify-between mb-4">
<div class="flex items-center gap-2">
<!--
デフォルトブランチ: bg-green-500
その他: bg-blue-500
fix/*: bg-orange-500
-->
<div class="w-8 h-8 rounded-lg bg-green-500 flex items-center justify-center">
<svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01"/>
</svg>
</div>
<div>
<h1 class="text-base font-semibold text-slate-900">{branch_name}</h1>
<p class="text-xs text-slate-500">{repository_name}</p>
</div>
</div>
<!--
色の決定（ラベルは常にブランチ名をそのまま表示）:
デフォルトブランチ: bg-green-100 text-green-700
その他: bg-blue-100 text-blue-700
fix/*: bg-orange-100 text-orange-700
⚠️ ラベルは常にブランチ名をそのまま表示
-->
<span class="px-2 py-1 bg-green-100 text-green-700 text-xs font-medium rounded">{branch_name}</span>
</div>
<!--
============================================================
【デフォルトブランチ用】今日反映された変更
- 「目的」ではなく「今日反映された内容」を表示
- 累計情報セクションは表示しない
============================================================
-->
<div class="p-3 mb-4 bg-gradient-to-r from-green-50 to-emerald-50 rounded-lg border border-green-100">
<div class="flex items-start gap-2">
<svg class="w-4 h-4 text-green-500 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
</svg>
<div>
<p class="text-sm font-medium text-slate-700 mb-1">今日反映された変更</p>
<!-- 今日のコミット内容をまとめて表示 -->
<p class="text-sm text-slate-600">{today_changes_summary}</p>
</div>
</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-green-600">+{today_commits}</div>
<div class="text-xs text-slate-500">今日の反映</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">{contributor_count}</div>
<div class="text-xs text-slate-500">コントリビューター</div>
</div>
</div>
<!--
============================================================
【作業ブランチ用（その他）】今日の作業内容
- 以下はコメントアウトしてありますが、作業ブランチの場合はこちらを使用
============================================================
<div class="p-3 mb-4 bg-gradient-to-r from-blue-50 to-indigo-50 rounded-lg border border-blue-100">
<div class="flex items-start gap-2">
<svg class="w-4 h-4 text-blue-500 mt-0.5 flex-shrink-0" fill="currentColor" viewBox="0 0 24 24">
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/>
</svg>
<div>
<p class="text-sm font-medium text-slate-700 mb-1">今日の作業内容</p>
<p class="text-sm text-slate-600">{work_summary}</p>
</div>
</div>
</div>
<div class="flex items-center justify-between gap-3 mb-4">
<div class="flex-1 p-3 bg-slate-50 rounded-lg text-center">
<div class="text-lg font-bold text-slate-900">{total_commits}</div>
<div class="text-xs text-slate-500">累計</div>
</div>
<div class="flex-1 p-3 bg-blue-50 rounded-lg text-center border border-blue-100">
<div class="text-lg font-bold text-blue-600">+{today_commits}</div>
<div class="text-xs text-slate-500">今日</div>
</div>
<div class="flex-1 p-3 bg-slate-50 rounded-lg text-center">
<div class="text-lg font-bold text-slate-900">{contributor_count}</div>
<div class="text-xs text-slate-500">開発者</div>
</div>
<div class="flex-1 p-3 bg-slate-50 rounded-lg text-center">
<div class="text-lg font-bold text-slate-900">{days_active}</div>
<div class="text-xs text-slate-500">日目</div>
</div>
</div>
-->
<!-- Today's Highlights (最大4件) -->
<div class="flex-1 overflow-hidden">
<div class="flex items-center gap-2 mb-3">
<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>
<span class="text-sm font-semibold text-slate-900">今日のハイライト</span>
</div>
<div class="space-y-2">
<!--
ハイライトカード（繰り返し、最大4件）
種別タグ: 新機能(green), 改善(blue), 修正(purple)
-->
<div class="p-3 bg-amber-50 rounded-lg border border-amber-100">
<div class="flex items-center gap-2 mb-1.5">
<!-- 種別タグ: + 新機能 / ↑ 改善 / ~ 修正 -->
<div class="flex items-center gap-1.5 px-2 py-0.5 bg-blue-100 rounded text-xs text-blue-700">
<span>↑</span>
<span>改善</span>
</div>
</div>
<!-- ビジネス視点での説明（技術用語を避ける） -->
<div class="text-sm text-slate-800">{highlight_description}</div>
</div>
</div>
</div>
<!-- Footer -->
<div class="border-t border-slate-200 pt-3 mt-3">
<div class="flex items-center justify-between">
<div class="flex items-center gap-3 text-xs text-slate-500">
<!--
デフォルトブランチ: 「最終: {datetime}」のみ
作業ブランチ: 「開始: {date} • 最終: {datetime}」
-->
<span>最終: {last_commit_datetime}</span>
</div>
<div class="text-xs text-slate-400">Generated by Claude Code</div>
</div>
</div>
</div>
</body>
</html>
.claude/skills/diagram-guidelines/examples/by-app.html
+134
View File
@@ -0,0 +1,134 @@
<!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; }
.line-clamp-2 {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
</style>
</head>
<body class="bg-white p-4">
<div class="w-[420px] h-[650px] mx-auto flex flex-col">
<!-- Header -->
<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">
<svg class="w-4 h-4 text-white" 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>
</div>
<div>
<h1 class="text-base font-semibold text-slate-900">アプリ別レポート</h1>
<p class="text-xs text-slate-500">your-web-app</p>
</div>
</div>
<div class="text-sm font-medium text-slate-700">1/15 - 16</div>
</div>
<!-- App Section: Webサイト -->
<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">
<svg class="w-3.5 h-3.5 text-white" 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>
</div>
<div class="text-sm font-semibold text-slate-900">Webサイト</div>
<div class="text-xs text-slate-400">(web/)</div>
<div class="flex-1 h-px bg-slate-200 ml-2"></div>
</div>
<!--
変更カード（繰り返し）
ブランチタグの色（デフォルトブランチかどうかで判定）:
- デフォルトブランチ: bg-green-100 text-green-700, ドット bg-green-500
- fix/*: bg-orange-100 text-orange-700, ドット bg-orange-500
- docs/*: bg-purple-100 text-purple-700, ドット bg-purple-500
- その他全て: bg-blue-100 text-blue-700, ドット bg-blue-500
⚠️ ラベルは常にブランチ名をそのまま表示（main, feature/xxx, fix/xxx等）
-->
<div class="space-y-1.5 pl-2 border-l-2 border-blue-200">
<div class="flex items-start gap-2 p-2 bg-slate-50 rounded">
<!-- ブランチタグ -->
<div class="flex items-center gap-1 px-1.5 py-0.5 bg-blue-100 rounded text-xs text-blue-600 flex-shrink-0">
<div class="w-1.5 h-1.5 rounded-full bg-blue-500"></div>
<span>{branch_short_name}</span>
</div>
<span class="text-sm text-slate-700">{change_description}</span>
</div>
<!-- 5件を超える場合は省略 -->
<!-- <div class="flex items-center gap-2 pl-2 text-xs text-slate-400"><span>+N more commits</span></div> -->
</div>
<!--
⚠️⚠️⚠️ 重要: アバターとユーザー名の紐付けルール ⚠️⚠️⚠️
各 contributor の avatar_url と login は必ずペアで取得
別々のリストから組み合わせない
-->
<div class="flex items-center gap-2 mt-2 pl-2">
<div class="flex -space-x-1">
<!-- 各 contributor オブジェクトから avatar_url を取得 -->
<img src="{contributor1.avatar_url}" class="w-4 h-4 rounded-full border border-white" alt="">
<img src="{contributor2.avatar_url}" class="w-4 h-4 rounded-full border border-white" alt="">
</div>
<!-- 同じ contributor オブジェクトから login を取得 -->
<span class="text-xs text-slate-400">{contributor1.login}, {contributor2.login}</span>
</div>
</div>
<!-- App Section: APIサーバー -->
<div class="mb-4">
<div class="flex items-center gap-2 mb-3">
<div class="w-6 h-6 rounded-lg bg-purple-500 flex items-center justify-center">
<svg class="w-3.5 h-3.5 text-white" 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>
</div>
<div class="text-sm font-semibold text-slate-900">APIサーバー</div>
<div class="text-xs text-slate-400">(api/)</div>
<div class="flex-1 h-px bg-slate-200 ml-2"></div>
</div>
<!-- 同様のブランチタグ付きカード -->
<div class="space-y-1.5 pl-2 border-l-2 border-purple-200">
<div class="flex items-start gap-2 p-2 bg-slate-50 rounded">
<div class="flex items-center gap-1 px-1.5 py-0.5 bg-green-100 rounded text-xs text-green-600 flex-shrink-0">
<div class="w-1.5 h-1.5 rounded-full bg-green-500"></div>
<span>main</span>
</div>
<span class="text-sm text-slate-700">{change_description}</span>
</div>
</div>
<!-- 同様: contributor オブジェクトから avatar_url と login をペアで取得 -->
<div class="flex items-center gap-2 mt-2 pl-2">
<div class="flex -space-x-1">
<img src="{contributor.avatar_url}" class="w-4 h-4 rounded-full border border-white" alt="">
</div>
<span class="text-xs text-slate-400">{contributor.login}</span>
</div>
</div>
<!-- Footer - ブランチ凡例（色のみ） -->
<div class="border-t border-slate-200 pt-3">
<div class="flex items-center justify-between">
<div class="flex items-center 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>
<div class="text-xs text-slate-400">Generated by Claude Code</div>
</div>
</div>
</div>
</body>
</html>
.claude/skills/diagram-guidelines/examples/daily-summary.html
+208
View File
@@ -0,0 +1,208 @@
<!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; }
.line-clamp-2 {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
</style>
</head>
<body class="bg-white p-4">
<div class="w-[420px] h-[650px] mx-auto flex flex-col">
<!--
============================================================
daily-summary: overview と summary を統合したページ
目的: 「今日何があったか」を1枚で伝える
構成:
1. ヘッダー（タイトル + 日付）
2. 統計（commits / branches / contributors）
3. ハイライト（誰が何をしたか、最大4件）
4. フッター（コントリビューター一覧）
⚠️ ブランチの詳細リストは不要（branch-summaryで見れる）
============================================================
-->
<!-- Header -->
<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-gradient-to-br from-violet-500 to-purple-600 flex items-center justify-center">
<svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M13 10V3L4 14h7v7l9-11h-7z"/>
</svg>
</div>
<div>
<h1 class="text-base font-semibold text-slate-900">今日の開発</h1>
<p class="text-xs text-slate-500">{repository_name}</p>
</div>
</div>
<div class="text-sm font-medium text-slate-700">{date}</div>
</div>
<!-- Stats -->
<div class="flex items-center justify-center gap-6 py-3 mb-4 bg-gradient-to-r from-violet-50 to-purple-50 rounded-lg border border-violet-100">
<div class="text-center">
<div class="text-xl font-bold text-violet-700">{total_commits}</div>
<div class="text-xs text-slate-500">commits</div>
</div>
<div class="w-px h-8 bg-violet-200"></div>
<div class="text-center">
<div class="text-xl font-bold text-violet-700">{branch_count}</div>
<div class="text-xs text-slate-500">branches</div>
</div>
<div class="w-px h-8 bg-violet-200"></div>
<div class="text-center">
<div class="text-xl font-bold text-violet-700">{contributor_count}</div>
<div class="text-xs text-slate-500">contributors</div>
</div>
</div>
<!-- Highlights Section -->
<div class="flex-1 overflow-hidden">
<div class="flex items-center gap-2 mb-3">
<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>
<span class="text-sm font-semibold text-slate-900">ハイライト</span>
</div>
<!--
============================================================
ハイライトカード（繰り返し、最大4件）
============================================================
各カードに必須の情報:
- avatar_url: GitHub APIから取得 (author.avatar_url)
- username: GitHub APIから取得 (author.login)
- branch_name: どのブランチへのコミットか
- description: ビジネス視点での説明
ブランチタグの色:
- デフォルトブランチ: bg-green-100 text-green-700, ドット bg-green-500
- fix/*: bg-orange-100 text-orange-700, ドット bg-orange-500
- docs/*: bg-purple-100 text-purple-700, ドット bg-purple-500
- その他: bg-blue-100 text-blue-700, ドット bg-blue-500
⚠️ ラベルは常にブランチ名をそのまま表示
============================================================
⚠️⚠️⚠️ 重要: アバターとユーザー名の紐付けルール ⚠️⚠️⚠️
============================================================
各ハイライトカードの avatar_url と username は
**必ず同一のコミット/authorオブジェクトから取得すること**
✅ 正しい例:
commit.author.avatar_url と commit.author.login を同時に使用
❌ 間違い例:
avatars配列[i] と usernames配列[i] を別々に取得して組み合わせ
→ インデックスがズレてアバターとユーザー名が不一致になる
============================================================
-->
<div class="space-y-2.5">
<!-- Highlight Card 1 -->
<div class="p-3 bg-amber-50 rounded-lg border border-amber-100">
<div class="flex items-center justify-between mb-2">
<div class="flex items-center gap-2">
<!-- ⚠️ src は author.avatar_url から取得 -->
<img src="{avatar_url}" class="w-7 h-7 rounded-full" alt="">
<span class="text-sm font-medium text-slate-900">{username}</span>
</div>
<!-- ブランチタグ -->
<div class="flex items-center gap-1 px-2 py-0.5 bg-green-100 rounded text-xs text-green-700">
<div class="w-1.5 h-1.5 rounded-full bg-green-500"></div>
<span>{branch_name}</span>
</div>
</div>
<div class="text-sm text-slate-700 leading-relaxed line-clamp-2">{highlight_description}</div>
</div>
<!-- Highlight Card 2 -->
<div class="p-3 bg-amber-50 rounded-lg border border-amber-100">
<div class="flex items-center justify-between mb-2">
<div class="flex items-center gap-2">
<img src="{avatar_url}" class="w-7 h-7 rounded-full" alt="">
<span class="text-sm font-medium text-slate-900">{username}</span>
</div>
<div class="flex items-center gap-1 px-2 py-0.5 bg-blue-100 rounded text-xs text-blue-700">
<div class="w-1.5 h-1.5 rounded-full bg-blue-500"></div>
<span>{branch_name}</span>
</div>
</div>
<div class="text-sm text-slate-700 leading-relaxed line-clamp-2">{highlight_description}</div>
</div>
<!-- Highlight Card 3 -->
<div class="p-3 bg-amber-50 rounded-lg border border-amber-100">
<div class="flex items-center justify-between mb-2">
<div class="flex items-center gap-2">
<img src="{avatar_url}" class="w-7 h-7 rounded-full" alt="">
<span class="text-sm font-medium text-slate-900">{username}</span>
</div>
<div class="flex items-center gap-1 px-2 py-0.5 bg-green-100 rounded text-xs text-green-700">
<div class="w-1.5 h-1.5 rounded-full bg-green-500"></div>
<span>{branch_name}</span>
</div>
</div>
<div class="text-sm text-slate-700 leading-relaxed line-clamp-2">{highlight_description}</div>
</div>
<!-- Highlight Card 4 -->
<div class="p-3 bg-amber-50 rounded-lg border border-amber-100">
<div class="flex items-center justify-between mb-2">
<div class="flex items-center gap-2">
<img src="{avatar_url}" class="w-7 h-7 rounded-full" alt="">
<span class="text-sm font-medium text-slate-900">{username}</span>
</div>
<div class="flex items-center gap-1 px-2 py-0.5 bg-blue-100 rounded text-xs text-blue-700">
<div class="w-1.5 h-1.5 rounded-full bg-blue-500"></div>
<span>{branch_name}</span>
</div>
</div>
<div class="text-sm text-slate-700 leading-relaxed line-clamp-2">{highlight_description}</div>
</div>
<!-- 4件を超える場合 -->
<!-- <div class="text-center text-xs text-slate-400 py-1">+{N} more highlights</div> -->
</div>
</div>
<!-- Footer -->
<!--
⚠️ フッターのアバター一覧も同様のルール:
各 contributor オブジェクトから avatar_url と login をペアで取得
別々のリストから組み合わせない
-->
<div class="border-t border-slate-200 pt-3 mt-3">
<div class="flex items-center justify-between">
<div class="flex items-center gap-2">
<div class="flex -space-x-2">
<img src="{avatar_url_1}" class="w-6 h-6 rounded-full border-2 border-white" alt="">
<img src="{avatar_url_2}" class="w-6 h-6 rounded-full border-2 border-white" alt="">
<img src="{avatar_url_3}" class="w-6 h-6 rounded-full border-2 border-white" alt="">
</div>
<!-- 例: "user-a(5) user-b(3)" -->
<span class="text-xs text-slate-500">{contributor_summary}</span>
</div>
<div class="text-xs text-slate-400">Generated by Claude Code</div>
</div>
</div>
</div>
</body>
</html>
.claude/skills/diagram-guidelines/examples/timeline.html
+120
View File
@@ -0,0 +1,120 @@
<!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; }
.line-clamp-2 {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
</style>
</head>
<body class="bg-white p-4">
<div class="w-[420px] h-[650px] mx-auto flex flex-col">
<!-- Header -->
<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">
<svg class="w-4 h-4 text-white" 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>
</div>
<div>
<h1 class="text-base font-semibold text-slate-900">タイムライン</h1>
<p class="text-xs text-slate-500">your-web-app</p>
</div>
</div>
<div class="text-sm font-medium text-slate-700">1/15 - 16</div>
</div>
<!-- Timeline (max 4 entries to fit 600px height) -->
<div class="relative flex-1">
<div class="absolute left-[7px] top-2 bottom-2 w-0.5 bg-slate-200"></div>
<div class="space-y-2.5">
<!--
============================================================
⚠️⚠️⚠️ 重要: アバターとユーザー名の紐付けルール ⚠️⚠️⚠️
============================================================
各エントリの avatar_url と username は
**必ず同一のコミット/authorオブジェクトから取得すること**
✅ 正しい: commit.author.avatar_url + commit.author.login
❌ 間違い: avatars[i] + usernames[i] （別リストからの組み合わせ）
author.avatar_url = アバター画像URL
author.login = GitHubユーザー名
============================================================
-->
<!--
タイムラインエントリ（繰り返し、最大4件）
ブランチタグの色（デフォルトブランチかどうかで判定）:
- デフォルトブランチ: bg-green-100 text-green-700, ドット bg-green-500
- fix/*: bg-orange-100 text-orange-700, ドット bg-orange-500
- docs/*: bg-purple-100 text-purple-700, ドット bg-purple-500
- その他全て: bg-blue-100 text-blue-700, ドット bg-blue-500
⚠️ ラベルは常にブランチ名をそのまま表示（main, feature/xxx, fix/xxx等）
⚠️ avatar_url と username は必ずGitHub APIから取得
-->
<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-2.5 border border-slate-100">
<div class="flex items-center justify-between mb-1">
<div class="flex items-center gap-2">
<!-- src must be author.avatar_url from API -->
<img src="{avatar_url}" class="w-5 h-5 rounded-full" alt="">
<span class="text-xs font-medium text-slate-700">{username}</span>
</div>
<!-- ブランチタグ -->
<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>{branch_name}</span>
</div>
</div>
<div class="text-sm text-slate-800">{commit_description}</div>
<div class="flex items-center justify-between mt-1.5">
<div class="flex items-center gap-1.5">
<span class="text-xs text-slate-400">{app_name}</span>
</div>
<span class="text-xs text-slate-400">{time}</span>
</div>
</div>
</div>
<!-- 以下同様のエントリを最大4件まで繰り返し -->
<!-- 4件を超える場合はページ分割: timeline-{branch}-2.png -->
</div>
</div>
<!-- More indicator (4件を超える場合) -->
<div class="text-center py-2 text-xs text-slate-400">
+{remaining_commits} more commits
</div>
<!-- Footer - ブランチ凡例（色のみ） -->
<div class="border-t border-slate-200 pt-3">
<div class="flex items-center justify-between">
<div class="flex items-center 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>
<div class="text-xs text-slate-400">Generated by Claude Code</div>
</div>
</div>
</div>
</body>
</html>
.claude/skills/diagram-guidelines/examples/tips.html
+118
View File
@@ -0,0 +1,118 @@
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ワンポイントTIPS</title>
<script src="https://cdn.tailwindcss.com"></script>
<style>
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Hiragino Sans', sans-serif; }
.line-clamp-2 {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
</style>
</head>
<body class="bg-white p-4">
<div class="w-[420px] h-[650px] mx-auto flex flex-col">
<!-- Header -->
<div class="flex items-center justify-between mb-3">
<div class="flex items-center gap-2">
<div class="w-8 h-8 rounded-lg bg-amber-500 flex items-center justify-center">
<svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"/>
</svg>
</div>
<div>
<h1 class="text-base font-semibold text-slate-900">ワンポイントTIPS</h1>
<p class="text-xs text-slate-500">今日の変更から学ぶ</p>
</div>
</div>
<div class="text-sm font-medium text-slate-700">1/15</div>
</div>
<!-- Related Change - ブランチタグ付き -->
<div class="mb-3 p-2.5 bg-blue-50 rounded-lg border border-blue-100">
<div class="flex items-center gap-2 mb-0.5">
<svg class="w-3.5 h-3.5 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M13 10V3L4 14h7v7l9-11h-7z"/>
</svg>
<span class="text-xs font-medium text-blue-700">関連する変更</span>
<!--
ブランチタグの色（デフォルトブランチかどうかで判定）:
- デフォルトブランチ: bg-green-100 text-green-700, ドット bg-green-500
- fix/*: bg-orange-100 text-orange-700, ドット bg-orange-500
- docs/*: bg-purple-100 text-purple-700, ドット bg-purple-500
- その他全て: bg-blue-100 text-blue-700, ドット bg-blue-500
⚠️ ラベルは常にブランチ名をそのまま表示（main, feature/xxx, fix/xxx等）
-->
<div class="flex items-center gap-1 px-1.5 py-0.5 bg-green-100 rounded text-xs text-green-600 ml-auto">
<div class="w-1.5 h-1.5 rounded-full bg-green-500"></div>
<span>{branch_name}</span>
</div>
</div>
<div class="text-sm text-slate-700">{related_change_description}</div>
</div>
<!-- Topic Title -->
<div class="mb-2">
<h2 class="text-lg font-bold text-slate-900">動画プレイヤーの仕組み</h2>
</div>
<!-- Diagram (3ステップまでに収める) -->
<div class="mb-3 p-3 bg-slate-50 rounded-lg">
<div class="flex flex-col items-center gap-1.5">
<div class="px-3 py-1.5 bg-white rounded-lg border border-slate-200 text-sm text-slate-700">
動画ファイル（圧縮）
</div>
<svg class="w-4 h-4 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M19 14l-7 7m0 0l-7-7m7 7V3"/>
</svg>
<div class="px-3 py-1.5 bg-amber-100 rounded-lg border border-amber-200 text-sm text-amber-800">
デコーダー（解凍処理）
</div>
<svg class="w-4 h-4 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M19 14l-7 7m0 0l-7-7m7 7V3"/>
</svg>
<div class="px-3 py-1.5 bg-blue-100 rounded-lg border border-blue-200 text-sm text-blue-800">
画面に表示
</div>
</div>
</div>
<!-- Explanation (コンパクトに) -->
<div class="flex-1 space-y-2">
<p class="text-sm text-slate-700 leading-relaxed">
動画は<span class="font-medium text-slate-900">圧縮された状態</span>で保存されており、再生時にリアルタイムで解凍しています。この処理が端末の性能に追いつかないと<span class="font-medium text-slate-900">カクつきやフリーズ</span>の原因になります。
</p>
<div class="p-2.5 bg-amber-50 rounded-lg border border-amber-100">
<div class="flex items-start gap-2">
<svg class="w-4 h-4 text-amber-500 mt-0.5 flex-shrink-0" 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>
<p class="text-sm text-slate-700">
<span class="font-medium">今回の修正:</span>
Android端末向けに解凍処理を最適化しました
</p>
</div>
</div>
</div>
<!-- Footer -->
<div class="border-t border-slate-200 pt-2.5 mt-3">
<div class="flex items-center justify-between">
<div class="flex items-center gap-1.5">
<div class="w-2 h-2 rounded-full bg-amber-500"></div>
<span class="text-xs text-slate-500">技術豆知識</span>
</div>
<div class="text-xs text-slate-400">Generated by Claude Code</div>
</div>
</div>
</div>
</body>
</html>