github-dashboard

GitHub Dashboard Skill

FlowAI / Soft Paper Workspace のビジュアルスタイルで、GitHub リポジトリの分析ダッシュボードを1画面で作成します。温かみのあるオフホワイトのキャンバス、白い角丸パネル、固定された左サイドバー、コンパクトな KPI カード、パステルカラーのピル、情報量の多いテーブル、コントラストを抑えた罫線を使用します。

リソースマップ

github-dashboard/
├── SKILL.md
├── example.html                         ← rendered reference dashboard
└── references/
    ├── template.html                    ← live-artifact-compatible HTML template
    ├── example-data.json                ← normalized public GitHub data shape
    ├── artifact-example.json            ← minimal live-artifact create input
    └── provenance-example.json          ← safe source/provenance example

このスキルを使用する場面

ユーザーが、次のような単一の GitHub リポジトリに関するダッシュボードやレポートを求めている場合に使用します。

• リポジトリの成長ダッシュボード
• オープンソースプロジェクトの健全性レポート
• GitHub のスター数／フォーク数／コントリビューター分析
• イシューとプルリクエストのアクティビティページ
• メンテナー／コントリビューター向けダッシュボード

更新可能性、ソースの監査可能性、または定期更新をユーザーが求めている場合は、ライブアーティファクトのソース一式（template.html、data.json、artifact.json、provenance.json）を作成し、live-artifact の契約に従ってください。ビジュアルアーティファクトだけが必要な場合は、自己完結型の index.html を作成してください。

ワークフロー

1. リポジトリの範囲を特定する

   • brief から owner/repo を解析します。
   • この v1 スキルの対象は1つのリポジトリです。複数のリポジトリが指定された場合は、メインのリポジトリを選ぶようユーザーに尋ねるか、リポジトリごとにダッシュボードを1つ作成します。
   • リポジトリが指定されていない場合は、GitHub URL または owner/repo を尋ねる簡潔な質問を1つします。

2. 公開されている GitHub データを収集する

   • 公開リポジトリのデータには、利用可能な場合は GitHub CLI/API を優先します。
   • 現在のスター数／フォーク数／ウォッチャー数／オープンな issue 数：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ページ目しか利用できない場合は、合計を1ページ目の推定値として表示します。
   • issue：合計数には 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 ヘッダーを使ってページ数を数えます。
   • 最近のアクティビティ：最新の issue とプルリクエストをまとめ、表示用の行に正規化し、プレビューリストは5～10件までに制限します。
   • 増加数／差分の指標：GitHub REST では、スター数／フォーク数の完全な過去の差分は取得できません。GraphQL、スター付与イベントのスナップショット、利用可能な場合は Events API を使うか、差分が推定値／合成値であることを provenance.json に明記します。
   • 認証トークン、生の HTTP エンベロープ、Cookie、レート制限ヘッダー、非公開メタデータは保存しないでください。

3. ダッシュボードデータに正規化する

   • 必須の repository：name、fullName、url、description、language、license、created、lastUpdated。
   • 必須の metrics：スター、フォーク、コントリビューター、issue、プルリクエスト。表示用の合計値に加え、小さな差分または増加に関する注記を保存します。
   • 必須の contributors：上位5～8名のコントリビューターと、login、avatar、contributions。
   • 必須の recentActivity：title、typeText、typeClass、label、labelClass、author、authorAvatar、updated を含む表示用の行。issue とプルリクエストの切り替えにテンプレートの条件分岐を頼らないでください。
   • GitHub から正確な履歴を取得できない場合に限り、グラフデータを合成データにできます。変換方法を provenance に記録してください。

4. ビジュアルシステムを適用する

   • 有効な DESIGN.md トークンがある場合は使用します。
   • デザインシステムが指定されていない場合は、references/template.html に反映されている Soft Paper のデフォルトを使用します。キャンバスは #F2F2F0、カードは白、境界線は #ECECEA、文字色は #0A0A0A、タイポグラフィは Geist/Inter、サイドバーは256px、トップバーは48px、カードの角丸は16pxです。
   • 色は控えめに使い、意味に沿って割り当てます。健全な指標には緑、警告にはアンバー、機能／PR ラベルには青を使い、赤は不具合またはリスクに限って使います。

5. ページをレイアウトする

   • シェル：256px のサイドバーとメインパネル。どちらも白、角丸16px、境界線は1pxの極細線です。
   • トップバー：左側にリポジトリのコンテキスト、右側に更新／エクスポート／アクションの操作要素を配置します。
   • ヘッダー：リポジトリ名、説明、日付／設定／アクションの行を配置します。
   • KPI ストリップ：スター、フォーク、コントリビューター、issue、PR 用のコンパクトなカードを5つ配置します。
   • メイングリッド：2fr/1fr の分割にし、左側に増加グラフまたはアクティビティテーブル、右側に上位コントリビューター／健全性カードを配置します。
   • フッター：provenance／最終更新の注記を、小さく控えめなテキストで表示します。

6. 成果物を作成する

   • 静的な成果物の場合は、インライン CSS を含む自己完結型の index.html を1つ作成し、外部の JS ライブラリは使用しません。
   • ライブの成果物の場合は、template.html、data.json、artifact.json、provenance.json を作成します。index.html はデーモンによって生成されます。
   • 主要な領域には、安定した data-od-id 値（sidebar、topbar、repo-header、kpi-strip、growth-chart、contributors、activity、provenance）を付与します。

ビジュアルルール

• ライトモードのみです。
• デスクトップではサイドバーを幅 256px に固定し、画面幅が狭い場合は縦に並べます。
• 最初の行には KPI カードを 4 枚または 5 枚配置します。
• すべての数値に表形式ライニング数字を使用します。
• アバターは円形にし、テーブルとコントリビューターリストでは 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 つまでにします。
• ステータスラベルと Issue／PR チップには、彩度の高いバッジではなく、淡いパステルカラーのピルを使用します。