github-dashboard

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

GitHub Dashboard Skill

GitHub Dashboard 技能

Create a single-screen GitHub repository analytics dashboard in the FlowAI / Soft Paper Workspace visual style: warm off-white canvas, white rounded panels, a fixed left sidebar, compact KPI cards, pastel pills, dense tables, and low-contrast hairlines.

创建一个单屏GitHub仓库分析仪表板，采用FlowAI / Soft Paper Workspace视觉风格：暖调米白色画布、白色圆角面板、固定左侧边栏、紧凑的KPI卡片、柔和的胶囊标签、高密度表格以及低对比度细边框。

Resource map

资源地图

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-dashboard/
├── SKILL.md
├── example.html                         ← 渲染后的参考仪表板
└── references/
    ├── template.html                    ← 兼容实时工件的HTML模板
    ├── example-data.json                ← 标准化的公开GitHub数据格式
    ├── artifact-example.json            ← 最小化的实时工件创建输入
    └── provenance-example.json          ← 安全的来源/溯源示例

When to use this skill

何时使用此技能

Use this when the user asks for a dashboard or report about a single GitHub repository, for example:

repository growth dashboard
open-source project health report
GitHub stars / forks / contributors analytics
issue and pull-request activity page
maintainer / contributor dashboard

If the user asks for refreshability, source auditability, or scheduled updates, produce the live-artifact source set (

template.html

data.json

artifact.json

provenance.json

) and follow the

live-artifact

contract. If they only need a visual artifact, produce a self-contained

index.html

当用户请求关于单个GitHub仓库的仪表板或报告时使用，例如：

仓库增长仪表板
开源项目健康报告
GitHub星标/复刻/贡献者分析
议题与拉取请求活动页面
维护者/贡献者仪表板

如果用户要求可刷新性、来源可审计性或定期更新，请生成实时工件源集合（

template.html

、

data.json

、

artifact.json

、

provenance.json

）并遵循

live-artifact

约定。如果仅需要可视化工件，请生成独立的

index.html

文件。

Workflow

工作流程

Resolve repository scope
- Parse
```
owner/repo
```
  from the brief.
- This v1 skill is scoped to one repository. If multiple repositories are requested, ask the user to pick the primary repository or create one dashboard per repository.
- If the repo is missing, ask one concise question for the GitHub URL or
```
owner/repo
```
  .
Collect public GitHub data
- Prefer GitHub CLI/API for public repository data when available.
- Current stars/forks/watchers/open issue count:
```
GET /repos/{owner}/{repo}
```
  (
```
stargazers_count
```
  ,
```
forks_count
```
  ,
```
watchers_count
```
  ,
```
open_issues_count
```
  ).
- Contributors: paginate
```
GET /repos/{owner}/{repo}/contributors?per_page=100&page=N
```
  , sort by
```
contributions
```
  descending, and take the top N used by the dashboard. If only page 1 is available, label totals as first-page estimates.
- Issues: use GitHub Search API (
```
repo:{owner}/{repo} is:issue
```
  ) for total counts, or paginate
```
GET /repos/{owner}/{repo}/issues?state=all
```
  and filter out items with a
```
pull_request
```
  field.
- Pull requests: use GitHub Search API (
```
repo:{owner}/{repo} is:pr
```
  ) for total counts, or paginate
```
GET /repos/{owner}/{repo}/pulls?state=all
```
  and count pages via the
```
Link
```
  header.
- Recent activity: combine the newest issues and pull requests, normalize them into display-ready rows, and cap the preview list at 5–10 items.
- Growth/delta metrics: GitHub REST does not expose complete historical star/fork deltas. Use GraphQL, stargazer event snapshots, the Events API where available, or explicitly mark deltas as estimated/synthetic in
```
provenance.json
```
  .
- Do not store auth tokens, raw HTTP envelopes, cookies, rate-limit headers, or private metadata.
Normalize into dashboard data
- Required
```
repository
```
  :
```
name
```
  ,
```
fullName
```
  ,
```
url
```
  ,
```
description
```
  ,
```
language
```
  ,
```
license
```
  ,
```
created
```
  ,
```
lastUpdated
```
  .
- Required
```
metrics
```
  : stars, forks, contributors, issues, pull requests. Store display-ready totals plus small deltas or growth notes.
- Required
```
contributors
```
  : top 5–8 contributors with
```
login
```
  ,
```
avatar
```
  , and
```
contributions
```
  .
- Required
```
recentActivity
```
  : display-ready rows with
```
title
```
  ,
```
typeText
```
  ,
```
typeClass
```
  ,
```
label
```
  ,
```
labelClass
```
  ,
```
author
```
  ,
```
authorAvatar
```
  , and
```
updated
```
  . Do not rely on template conditionals for issue/PR switching.
- Chart data can be synthetic only when GitHub does not expose the exact history; document the transformation in provenance.
Apply the visual system
- Use the active
```
DESIGN.md
```
  tokens when present.
- If no design system is provided, use the Soft Paper defaults reflected in
```
references/template.html
```
  :
```
#F2F2F0
```
  canvas, white cards,
```
#ECECEA
```
  borders,
```
#0A0A0A
```
  ink, Geist/Inter typography, 256px sidebar, 48px topbar, and 16px card radius.
- Keep color small and semantic: green for healthy metrics, amber for warning, blue for feature/PR labels, red only for defects or risk.
Lay out the page
- Shell: 256px sidebar + main panel, both white, rounded 16px, 1px hairline border.
- Topbar: repo context on the left, refresh/export/action affordances on the right.
- Header: repository name, description, and date/settings/actions row.
- KPI strip: 5 compact cards for stars, forks, contributors, issues, PRs.
- Main grid: 2fr/1fr split with a growth chart or activity table on the left and top contributors/health cards on the right.
- Footer: provenance/last-updated note in small muted text.
Write the artifact
- For a static artifact, write one self-contained
```
index.html
```
  with inline CSS and no external JS libraries.
- For a live artifact, write
```
template.html
```
  ,
```
data.json
```
  ,
```
artifact.json
```
  , and
```
provenance.json
```
  ;
```
index.html
```
  is derived by the daemon.
- Tag major regions with stable
```
data-od-id
```
  values:
```
sidebar
```
  ,
```
topbar
```
  ,
```
repo-header
```
  ,
```
kpi-strip
```
  ,
```
growth-chart
```
  ,
```
contributors
```
  ,
```
activity
```
  ,
```
provenance
```
  .

确定仓库范围
- 从需求中解析
```
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 API不提供完整的历史星标/复刻增量数据。可使用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
```
  。

Visual rules

视觉规则

Light mode only.
256px fixed sidebar on desktop; stack on narrow screens.
4 or 5 KPI cards in the first row.
Use tabular lining numerals for all counts.
Avatars are circular, 28–32px in tables and contributor lists.
Tables use 13px body text, 11px uppercase column labels, 1px row dividers.
Cards use hairline borders and a barely visible shadow at most:
```
0 1px 2px rgba(10,10,10,.04), 0 1px 1px rgba(10,10,10,.02)
```
.
Do not use gradients except tiny workflow/repo icon placeholders.
Do not make the page look like GitHub itself. This is a custom operational dashboard, not a GitHub UI clone.

仅支持浅色模式。
桌面端为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克隆。

Self-check

自检清单

Every metric has a source or a provenance note.
No private data or credentials are persisted.
Data labels are specific to the repository, not placeholders.
The screen still reads clearly at 50% zoom.
The dashboard uses at most one solid black primary action per area.
Status labels and issue/PR chips are pastel pills, not saturated badges.

每个指标都有来源或溯源说明。
未保留任何私有数据或凭证。
数据标签针对特定仓库，而非占位符。
页面在50%缩放比例下仍清晰可读。
仪表板每个区域最多使用一个纯黑色主操作按钮。
状态标签和议题/PR胶囊为柔和色调，而非饱和徽章。