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）並遵循 live-artifact 合約。如果他們只需要視覺工件，則產出一個獨立的 index.html。
工作流程
-
解析儲存庫範圍
- 從需求中解析
owner/repo。 - 此 v1 技能限定單一儲存庫。如果要求多個儲存庫，請詢問使用者選擇主要儲存庫，或為每個儲存庫建立一個儀表板。
- 如果缺少儲存庫，簡潔地詢問一個關於 GitHub URL 或
owner/repo的問題。
- 從需求中解析
-
收集公開 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 名。如果僅有第一頁可用，請將總數標示為第一頁估計值。 - 議題：使用 GitHub 搜尋 API（
repo:{owner}/{repo} is:issue）取得總數，或分頁取得GET /repos/{owner}/{repo}/issues?state=all並過濾掉含有pull_request欄位的項目。 - 拉取請求：使用 GitHub 搜尋 API（
repo:{owner}/{repo} is:pr）取得總數，或分頁取得GET /repos/{owner}/{repo}/pulls?state=all並透過Link標頭計算頁數。 - 近期活動：合併最新的議題與拉取請求，正規化為可直接顯示的行，並將預覽清單限制在 5–10 項。
- 成長/增量指標：GitHub REST 不提供完整的歷史星星/分叉增量。請使用 GraphQL、星號事件快照、Events API（若可用），或明確在
provenance.json中標記增量為估計/合成。 - 不要儲存驗證令牌、原始 HTTP 封包、Cookie、速率限制標頭或私有中繼資料。
-
正規化為儀表板資料
- 必要
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。不要依賴範本條件來切換議題/拉取請求。 - 圖表資料僅在 GitHub 未提供確切歷史時可為合成資料；請在溯源中記錄轉換過程。
- 必要
-
應用視覺系統
- 使用當前的
DESIGN.md令牌（若存在）。 - 若未提供設計系統，請使用
references/template.html中反映的 Soft Paper 預設值：#F2F2F0畫布、白色卡片、#ECECEA邊框、#0A0A0A墨色、Geist/Inter 字體、256px 側邊欄、48px 頂欄、以及 16px 卡片圓角。 - 保持色彩小且語義化：綠色代表健康指標、琥珀色代表警告、藍色代表功能/PR 標籤、紅色僅用於缺陷或風險。
- 使用當前的
-
佈置頁面
- 外殼：256px 側邊欄 + 主要面板，均為白色，圓角 16px，1px 細邊框。
- 頂欄：左側為儲存庫上下文，右側為重新整理/匯出/操作按鈕。
- 標題：儲存庫名稱、描述，以及日期/設定/操作行。
- KPI 列：5 個緊湊卡片，分別對應星星、分叉、貢獻者、議題、PR。
- 主要網格：2fr/1fr 分割，左側為成長圖表或活動表格，右側為主要貢獻者/健康卡片。
- 頁尾：以小號淡化文字顯示的溯源/最後更新備註。
-
撰寫工件
- 對於靜態工件，撰寫一個獨立的
index.html，包含內嵌 CSS 且無外部 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 固定側邊欄；在窄螢幕上堆疊。
- 第一行放置 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% 縮放時仍清晰可讀。
- 儀表板每個區域最多使用一個純黑色主要操作按鈕。
- 狀態標籤與議題/PR 晶片為粉彩色藥丸形狀，而非飽和徽章。