GitHub ダッシュボードスキル
FlowAI / Soft Paper Workspace のビジュアルスタイルで、単一画面の GitHub リポジトリ分析ダッシュボードを作成します。暖かみのあるオフホワイトのキャンバス、白い角丸パネル、固定左サイドバー、コンパクトな KPI カード、パステル調のラベル、密度の高いテーブル、低コントラストのヘアラインが特徴です。
リソースマップ
github-dashboard/
├── SKILL.md
├── example.html ← レンダリング済み参照ダッシュボード
└── references/
├── template.html ← ライブアーティファクト互換の HTML テンプレート
├── example-data.json ← 正規化された公開 GitHub データ形状
├── artifact-example.json ← 最小限のライブアーティファクト作成入力
└── provenance-example.json ← 安全なソース / 出典の例
このスキルを使用するタイミング
ユーザーが単一の GitHub リポジトリに関するダッシュボードやレポートを依頼したときに使用します。例：
- リポジトリ成長ダッシュボード
- オープンソースプロジェクト健全性レポート
- GitHub スター / フォーク / コントリビューター分析
- イシューおよびプルリクエストアクティビティページ
- メンテナー / コントリビューターダッシュボード
ユーザーが更新可能性、ソース監査可能性、スケジュール更新を求める場合は、ライブアーティファクトソースセット（template.html、data.json、artifact.json、provenance.json）を生成し、ライブアーティファクト契約に従ってください。視覚的なアーティファクトのみが必要な場合は、自己完結型の index.html を生成します。
ワークフロー
-
リポジトリ範囲の特定
- 依頼から
owner/repoを解析します。 - この v1 スキルは単一リポジトリを対象としています。複数のリポジトリが要求された場合は、ユーザーにプライマリリポジトリを選んでもらうか、リポジトリごとに 1 つのダッシュボードを作成します。
- リポジトリが不明な場合は、GitHub URL または
owner/repoを 1 つの簡潔な質問で尋ねます。
- 依頼から
-
公開 GitHub データの収集
- 可能な場合は GitHub CLI/API を利用して公開リポジトリデータを取得します。
- 現在のスター/フォーク/ウォッチャー/オープンイシュー数：
GET /repos/{owner}/{repo}（stargazers_count、forks_count、watchers_count、open_issues_count）。 - コントリビューター：
GET /repos/{owner}/{repo}/contributors?per_page=100&page=Nをページネーションし、contributions降順でソートし、ダッシュボードで使用する上位 N 件を取得します。ページ 1 のみ利用可能な場合は、合計値を初回ページ推定値としてラベル付けします。 - イシュー：GitHub Search API（
repo:{owner}/{repo} is:issue）で総数を取得するか、GET /repos/{owner}/{repo}/issues?state=allをページネーションし、pull_requestフィールドがあるアイテムを除外します。 - プルリクエスト：GitHub Search API（
repo:{owner}/{repo} is:pr）で総数を取得するか、GET /repos/{owner}/{repo}/pulls?state=allをページネーションし、Linkヘッダーでページ数をカウントします。 - 最近のアクティビティ：最新のイシューとプルリクエストを組み合わせ、表示可能な行に正規化し、プレビューリストを 5～10 項目に制限します。
- 成長 / デルタ指標：GitHub REST は完全な過去のスター/フォークデルタを公開していません。GraphQL、スターゲイザーイベントスナップショット、利用可能な Events API を使用するか、デルタを推定 / 合成として
provenance.jsonに明示的にマークします。 - 認証トークン、生の HTTP エンベロープ、クッキー、レート制限ヘッダー、プライベートメタデータを保存しないでください。
-
ダッシュボードデータへの正規化
- 必須
repository：name、fullName、url、description、language、license、created、lastUpdated。 - 必須
metrics：スター、フォーク、コントリビューター、イシュー、プルリクエスト。表示可能な合計値と小さなデルタまたは成長ノートを保存します。 - 必須
contributors：上位 5～8 人のコントリビューターとそのlogin、avatar、contributions。 - 必須
recentActivity：表示可能な行（title、typeText、typeClass、label、labelClass、author、authorAvatar、updated）。イシュー/PR の切り替えにテンプレート条件を使用しないでください。 - チャートデータは、GitHub が正確な履歴を公開していない場合にのみ合成データを使用できます。変換内容は provenance に文書化します。
- 必須
-
ビジュアルシステムの適用
- アクティブな
DESIGN.mdトークンが存在する場合はそれを使用します。 - デザインシステムが提供されていない場合は、
references/template.htmlに反映されている Soft Paper デフォルトを使用します：#F2F2F0キャンバス、白いカード、#ECECEAボーダー、#0A0A0Aインク、Geist/Inter タイポグラフィ、256px サイドバー、48px トップバー、16px カード半径。 - 色は小さく意味的に保ちます：健全な指標には緑、警告には琥珀、機能/PR ラベルには青、欠陥やリスクには赤のみ。
- アクティブな
-
ページのレイアウト
- シェル：256px サイドバー + メインパネル、両方白、角丸 16px、1px ヘアラインボーダー。
- トップバー：左にリポジトリコンテキスト、右にリフレッシュ/エクスポート/アクションのアフォーダンス。
- ヘッダー：リポジトリ名、説明、および日付/設定/アクション行。
- KPI ストリップ：スター、フォーク、コントリビューター、イシュー、PR の 5 つのコンパクトカード。
- メイングリッド：左に成長チャートまたはアクティビティテーブル、右にトップコントリビューター/健全性カードの 2fr/1fr 分割。
- フッター：小さく薄いテキストで出典/最終更新日を記載。
-
アーティファクトの作成
- 静的アーティファクトの場合：インライン CSS と外部 JS ライブラリなしの自己完結型
index.htmlを 1 つ作成します。 - ライブアーティファクトの場合：
template.html、data.json、artifact.json、provenance.jsonを作成します。index.htmlはデーモンによって派生されます。 - 主要領域に安定した
data-od-id値をタグ付けします：sidebar、topbar、repo-header、kpi-strip、growth-chart、contributors、activity、provenance。
- 静的アーティファクトの場合：インライン CSS と外部 JS ライブラリなしの自己完結型
ビジュアルルール
- ライトモードのみ。
- デスクトップでは 256px 固定サイドバー、狭い画面では積み重ね。
- 最初の行に 4 または 5 の KPI カード。
- すべてのカウントにタブラライニング数字を使用。
- アバターは円形、テーブルとコントリビューターリストでは 28～32px。
- テーブルは 13px 本文テキスト、11px 大文字列ラベル、1px 行区切り。
- カードはヘアラインボーダーと、せいぜいかろうじて見える影：
0 1px 2px rgba(10,10,10,.04), 0 1px 1px rgba(10,10,10,.02)。 - 小さなワークフロー/リポジトリアイコンのプレースホルダーを除き、グラデーションは使用しない。
- ページを GitHub 自体のように見せないでください。これはカスタム運用ダッシュボードであり、GitHub UI のクローンではありません。
セルフチェック
- すべての指標にはソースまたは出典ノートがあります。
- プライベートデータや認証情報は永続化されません。
- データラベルはリポジトリ固有であり、プレースホルダーではありません。
- 画面は 50% ズームでもはっきり読み取れます。
- ダッシュボードでは、エリアごとに最大 1 つのベタ黒プライマリアクションを使用します。
- ステータスラベルとイシュー/PR チップはパステル調のピルであり、彩度の高いバッジではありません。