github-dashboard

GitHub 仪表板技能

以 FlowAI / Soft Paper Workspace 的视觉风格创建单屏 GitHub 仓库分析仪表板：暖白色画布、白色圆角面板、固定左侧边栏、紧凑的 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 星标数 / 复刻数 / 贡献者分析
• Issue 和拉取请求活动页面
• 维护者 / 贡献者仪表板

如果用户要求可刷新、来源可审计或定时更新，请生成实时产物源文件集（template.html、data.json、artifact.json、provenance.json），并遵循 live-artifact 契约。如果用户只需要视觉产物，请生成独立的 index.html。

工作流

1. 确定仓库范围

   • 从需求中解析 owner/repo。
   • 此 v1 技能仅适用于一个仓库。如果用户要求多个仓库，请让用户选定主要仓库，或为每个仓库创建一个仪表板。
   • 如果缺少仓库信息，请简洁地询问 GitHub URL 或 owner/repo。

2. 收集公开的 GitHub 数据

   • 如果可用，优先使用 GitHub CLI/API 获取公开仓库数据。
   • 当前 star、fork、watcher 和未关闭议题数量：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 API 不提供完整的历史 star/fork 增量。可使用 GraphQL、stargazer 事件快照、适用时可用的 Events API，或在 provenance.json 中明确将增量标记为估算值/合成数据。
   • 不要存储身份验证令牌、原始 HTTP 信封、Cookie、速率限制标头或私有元数据。

3. 规范化为仪表板数据

   • 必需的 repository 字段：name、fullName、url、description、language、license、created、lastUpdated。
   • 必需的 metrics：star、fork、贡献者、议题、拉取请求。存储可直接展示的总数，以及简短的增量或增长说明。
   • 必需的 contributors：排名前 5–8 的贡献者，包含 login、avatar 和 contributions。
   • 必需的 recentActivity：可直接展示的行，包含 title、typeText、typeClass、label、labelClass、author、authorAvatar 和 updated。不要依赖模板条件语句来切换议题/拉取请求。
   • 只有在 GitHub 未提供精确历史数据时，图表数据才可使用合成数据；需在 provenance 中记录转换过程。

4. 应用视觉系统

   • 如果存在生效的 DESIGN.md，请使用其中的设计令牌。
   • 如果未提供设计系统，请采用 references/template.html 中体现的 Soft Paper 默认样式：#F2F2F0 画布、白色卡片、#ECECEA 边框、#0A0A0A 墨色、Geist/Inter 字体、256px 侧边栏、48px 顶栏和 16px 卡片圆角。
   • 颜色应少而有语义：绿色表示健康指标，琥珀色表示警告，蓝色用于功能/PR 标签，红色仅用于缺陷或风险。

5. 布局页面

   • 外框：256px 侧边栏 + 主面板，均为白色，圆角 16px，1px 细边框。
   • 顶栏：左侧显示仓库上下文，右侧提供刷新/导出/操作入口。
   • 页眉：仓库名称、描述，以及日期/设置/操作行。
   • KPI 条：5 张紧凑卡片，分别显示 star、fork、贡献者、议题和 PR。
   • 主网格：按 2fr/1fr 分栏，左侧放置增长图表或活动表格，右侧放置热门贡献者/健康状态卡片。
   • 页脚：以小号浅色文字显示来源/最后更新时间说明。

6. 编写产物

   • 对于静态产物，编写一个自包含的 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 标签应使用柔和色调的胶囊标签，而非高饱和徽章。