npm - @hiai-gg/hiai-opencode - Versions diffs - 0.2.0 → 0.2.2 - Mend

@hiai-gg/hiai-opencode 0.2.0 → 0.2.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (490) hide show

package/skills/design-templates/gamified-app/example.html ADDED Viewed

@@ -0,0 +1,292 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>Level — daily quests for becoming a better human</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com" />
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+  <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap" rel="stylesheet" />
+  <style>
+    :root {
+      --stage: #0e0d0c;
+      --stage-2: #1a1714;
+      --paper: #ffffff;
+      --ink: #1a1714;
+      --muted: #6c6660;
+      --line: #ebe6dd;
+      --accent: #e98425;
+      --accent-2: #ff6b3d;
+      --tile-1: #ffe9bf;
+      --tile-2: #ffe1d9;
+      --tile-3: #f3e6ff;
+      --tile-4: #d2eecb;
+      --tile-5: #d6e7ff;
+      --tile-6: #ffd6f1;
+      --serif: 'Instrument Serif', 'Iowan Old Style', Georgia, serif;
+      --sans: 'Inter', -apple-system, system-ui, sans-serif;
+      --mono: 'IBM Plex Mono', ui-monospace, monospace;
+    }
+    * { box-sizing: border-box; }
+    body {
+      margin: 0;
+      min-height: 100vh;
+      background:
+        radial-gradient(ellipse 80% 50% at 50% -10%, rgba(233,132,37,0.18), transparent 70%),
+        radial-gradient(ellipse 70% 50% at 50% 110%, rgba(255,255,255,0.04), transparent 70%),
+        var(--stage);
+      color: #f5efe4;
+      font: 14px/1.5 var(--sans);
+    }
+    .stage-bar {
+      display: flex; justify-content: space-between; align-items: center;
+      padding: 24px 36px;
+      font: 11px/1 var(--mono);
+      color: rgba(245,239,228,0.5);
+      letter-spacing: 0.2em;
+      text-transform: uppercase;
+    }
+    .stage-bar .word { font-family: var(--serif); font-style: italic; font-size: 22px; color: #f5efe4; letter-spacing: 0; text-transform: none; }
+    .phones {
+      display: flex; gap: 28px; justify-content: center; padding: 12px 32px 56px;
+      flex-wrap: wrap;
+    }
+    .phone {
+      width: 360px; height: 760px;
+      background: #050403;
+      border-radius: 56px;
+      padding: 12px;
+      box-shadow: 0 30px 60px rgba(0,0,0,0.45), inset 0 0 0 2px rgba(255,255,255,0.04);
+      flex-shrink: 0;
+      position: relative;
+    }
+    .phone::before {
+      content: '';
+      position: absolute; top: 22px; left: 50%; transform: translateX(-50%);
+      width: 116px; height: 30px; background: #050403; border-radius: 999px; z-index: 5;
+    }
+    .screen { width: 100%; height: 100%; background: var(--paper); border-radius: 44px; overflow: hidden; display: flex; flex-direction: column; color: var(--ink); }
+    .status { display: flex; justify-content: space-between; align-items: center; padding: 14px 26px 6px; font: 600 14px/1 var(--sans); }
+    .status .right { display: flex; gap: 6px; align-items: center; font-size: 12px; }
+    /* Phone 1 — cover */
+    .cover { background: var(--ink); color: #fef9ee; height: 100%; display: flex; flex-direction: column; }
+    .cover .status { color: #fef9ee; }
+    .cover .body { flex: 1; padding: 40px 28px 0; display: flex; flex-direction: column; }
+    .cover .eyebrow { display: inline-flex; align-items: center; gap: 6px; font: 10.5px/1 var(--mono); letter-spacing: 0.18em; color: rgba(254,249,238,0.6); padding: 6px 9px; border: 1px solid rgba(254,249,238,0.22); border-radius: 999px; align-self: flex-start; margin-bottom: 26px; }
+    .cover .eyebrow .dot { width: 6px; height: 6px; background: var(--accent); border-radius: 50%; }
+    .cover h1 { font: italic 800 56px/1 var(--serif); margin: 0 0 16px; letter-spacing: -0.005em; max-width: 12ch; }
+    .cover h1 .accent { color: var(--accent); font-style: italic; }
+    .cover p.lede { color: rgba(254,249,238,0.62); font-size: 14.5px; line-height: 1.55; margin: 0 0 18px; }
+    .cover .tip { font: 11px/1.5 var(--mono); color: rgba(254,249,238,0.4); border-top: 1px dashed rgba(254,249,238,0.2); padding-top: 12px; }
+    .cover .tip b { color: rgba(254,249,238,0.7); font-weight: 500; }
+    .cover .next-peek { margin-top: auto; height: 92px; background: #211d18; border-top-left-radius: 26px; border-top-right-radius: 26px; padding: 14px 22px; display: flex; align-items: center; gap: 10px; color: rgba(254,249,238,0.6); font: 11px/1.4 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; }
+    .cover .next-peek .swatch { width: 36px; height: 36px; border-radius: 8px; background: var(--accent); flex-shrink: 0; }
+    /* Phone 2 — quests dashboard */
+    .home { display: flex; flex-direction: column; height: 100%; padding: 0; }
+    .home .head { padding: 14px 22px 6px; display: flex; justify-content: space-between; align-items: center; }
+    .home .head h2 { margin: 0; font: 700 18px/1.2 var(--sans); letter-spacing: -0.005em; }
+    .home .head .bell { width: 32px; height: 32px; border-radius: 50%; background: rgba(255,107,61,0.10); color: var(--accent-2); display: grid; place-items: center; font: 700 11px/1 var(--sans); }
+    .level-ribbon {
+      margin: 8px 14px 12px;
+      padding: 12px 14px;
+      background: linear-gradient(135deg, #1a1714 0%, #2b251f 100%);
+      color: #f5efe4; border-radius: 16px;
+      display: grid; grid-template-columns: 38px 1fr auto; gap: 12px; align-items: center;
+    }
+    .level-ribbon .lv { width: 38px; height: 38px; border-radius: 12px; background: var(--accent); display: grid; place-items: center; font: 700 14px/1 var(--mono); color: #1a1714; }
+    .level-ribbon .meta .label { font: 10px/1 var(--mono); letter-spacing: 0.16em; color: rgba(245,239,228,0.5); text-transform: uppercase; }
+    .level-ribbon .meta .name { font: 700 14px/1.2 var(--sans); margin-top: 4px; }
+    .level-ribbon .xp { font: 600 12px/1 var(--mono); color: rgba(245,239,228,0.7); }
+    .level-ribbon .bar { grid-column: 1 / -1; height: 6px; background: rgba(245,239,228,0.10); border-radius: 999px; overflow: hidden; margin-top: 8px; }
+    .level-ribbon .bar > span { display: block; width: 66%; height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-2)); }
+    .home .sub { padding: 0 22px 10px; font: 12.5px/1.4 var(--sans); color: var(--muted); display: flex; align-items: center; gap: 8px; }
+    .home .sub .pill { font: 10.5px/1 var(--mono); padding: 4px 8px; border-radius: 999px; background: var(--ink); color: #f5efe4; letter-spacing: 0.06em; }
+    .quests { padding: 4px 14px 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; overflow: hidden; }
+    .q { border-radius: 18px; padding: 12px; min-height: 110px; position: relative; display: flex; flex-direction: column; gap: 6px; }
+    .q .glyph { width: 28px; height: 28px; border-radius: 8px; background: rgba(0,0,0,0.10); color: var(--ink); display: grid; place-items: center; font: 700 13px/1 var(--sans); }
+    .q .title { font: 700 13.5px/1.3 var(--sans); color: var(--ink); margin: 0; }
+    .q .meta { font: 11px/1.4 var(--sans); color: var(--ink); opacity: 0.7; }
+    .q .xp { position: absolute; bottom: 10px; right: 10px; font: 700 11px/1 var(--mono); padding: 4px 7px; border-radius: 999px; background: var(--ink); color: #f5efe4; letter-spacing: 0.06em; }
+    .q.q1 { background: var(--tile-2); }
+    .q.q1 .glyph { background: #ff7a52; color: white; }
+    .q.q2 { background: var(--tile-1); }
+    .q.q2 .glyph { background: #f0b54a; color: white; }
+    .q.q3 { background: var(--tile-3); }
+    .q.q3 .glyph { background: #b08bf2; color: white; }
+    .q.q4 { background: var(--tile-4); }
+    .q.q4 .glyph { background: #6cba5b; color: white; }
+    .q.q5 { background: var(--tile-6); }
+    .q.q5 .glyph { background: #e76aae; color: white; }
+    .q.q6 { background: var(--tile-5); }
+    .q.q6 .glyph { background: #4a86e9; color: white; }
+    /* Phone 3 — quest detail */
+    .detail { display: flex; flex-direction: column; height: 100%; }
+    .detail .topbar { display: flex; align-items: center; gap: 10px; padding: 8px 22px 6px; font: 13px/1 var(--sans); color: var(--muted); }
+    .detail .topbar .back { width: 28px; height: 28px; border-radius: 50%; background: var(--line); display: grid; place-items: center; }
+    .hero { margin: 8px 14px 14px; padding: 22px 20px 24px; border-radius: 24px; background: linear-gradient(160deg, #ffd2bb 0%, #ff7a52 100%); color: var(--ink); position: relative; overflow: hidden; }
+    .hero .badge { display: inline-flex; align-items: center; gap: 6px; font: 10.5px/1 var(--mono); padding: 5px 8px; border-radius: 999px; background: rgba(0,0,0,0.10); letter-spacing: 0.16em; text-transform: uppercase; }
+    .hero h2 { font: italic 700 30px/1.05 var(--serif); margin: 12px 0 6px; max-width: 12ch; }
+    .hero p { font: 14px/1.5 var(--sans); color: rgba(26,23,20,0.75); margin: 0; max-width: 30ch; }
+    .hero .stamp { position: absolute; right: 18px; top: 18px; font: 700 11px/1 var(--mono); padding: 6px 8px; background: rgba(255,255,255,0.7); border-radius: 999px; color: var(--ink); letter-spacing: 0.08em; }
+    .steps { padding: 4px 22px 12px; }
+    .steps h3 { font: 700 11px/1 var(--mono); letter-spacing: 0.18em; color: var(--muted); margin: 12px 0 8px; text-transform: uppercase; }
+    .step { display: flex; align-items: center; gap: 10px; padding: 12px 0; border-top: 1px solid var(--line); }
+    .step .check { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--line); flex-shrink: 0; display: grid; place-items: center; font: 700 11px/1 var(--sans); color: white; }
+    .step.done .check { background: var(--accent); border-color: var(--accent); }
+    .step.done .check::after { content: '✓'; }
+    .step.done .name { color: var(--muted); text-decoration: line-through; }
+    .step .name { font: 14px/1.3 var(--sans); }
+    .step .meta { font: 11px/1 var(--mono); color: var(--muted); margin-left: auto; letter-spacing: 0.06em; }
+    .detail .start {
+      margin: auto 18px 12px; padding: 14px; border-radius: 999px;
+      background: var(--ink); color: #f5efe4; text-align: center;
+      font: 600 14px/1 var(--sans); letter-spacing: 0.06em;
+    }
+    /* Tab bar shared */
+    .tabbar {
+      margin-top: auto; display: grid; grid-template-columns: repeat(5, 1fr);
+      padding: 10px 14px 26px; border-top: 1px solid var(--line); background: var(--paper);
+    }
+    .tab { display: flex; flex-direction: column; align-items: center; gap: 4px; font: 9.5px/1 var(--mono); color: var(--muted); letter-spacing: 0.08em; text-transform: uppercase; }
+    .tab .icon { width: 22px; height: 22px; border-radius: 6px; background: var(--line); }
+    .tab.active { color: var(--accent); }
+    .tab.active .icon { background: var(--accent); }
+    .tab.center .icon { background: var(--ink); color: #f5efe4; display: grid; place-items: center; font: 700 16px/1 var(--sans); border-radius: 50%; }
+    @media (max-width: 1180px) {
+      .phones { gap: 18px; }
+      .phone { width: 320px; height: 700px; }
+      .cover h1 { font-size: 46px; }
+    }
+  </style>
+</head>
+<body>
+  <div class="stage-bar" data-od-id="stage-bar">
+    <span>HI-FI PROTOTYPE · IPHONE</span>
+    <span class="word">level<span style="color:var(--accent);">.</span></span>
+    <span>3 SCREENS · LIGHT MODE</span>
+  </div>
+  <div class="phones" data-od-id="phones">
+    <!-- Phone 1 — cover -->
+    <div class="phone" data-od-id="phone-cover">
+      <div class="screen cover">
+        <div class="status"><span>9:41</span><span class="right">·· 5G · 100%</span></div>
+        <div class="body">
+          <span class="eyebrow"><span class="dot"></span>HI-FI PROTOTYPE · IPHONE</span>
+          <h1>Daily quests for <span class="accent">becoming</span> a better human.</h1>
+          <p class="lede">Level turns the things you already know you should do — exercise, read, reflect, call a friend — into a daily quest log. Finish them, earn XP, watch your classes level up.</p>
+          <p class="tip">Tap quests to open detail. Complete the 6th quest to trigger the level-up moment. Toggle <b>[theme]</b> in the toolbar to switch theme &amp; layout.</p>
+          <div class="next-peek"><div class="swatch"></div>NEXT — TODAY'S QUESTS</div>
+        </div>
+      </div>
+    </div>
+    <!-- Phone 2 — quests dashboard -->
+    <div class="phone" data-od-id="phone-home">
+      <div class="screen home">
+        <div class="status"><span>9:41</span><span class="right">·· 5G · 100%</span></div>
+        <div class="head">
+          <h2>Good morning, Sam</h2>
+          <div class="bell">×3</div>
+        </div>
+        <div class="level-ribbon" data-od-id="level-ribbon">
+          <div class="lv">14</div>
+          <div class="meta"><div class="label">LEVEL</div><div class="name">Level 14</div></div>
+          <div class="xp">1648 / 2480</div>
+          <div class="bar"><span></span></div>
+        </div>
+        <div class="sub">8 quests waiting · earn <span class="pill">430 XP</span> today</div>
+        <div class="quests" data-od-id="quests">
+          <div class="q q1">
+            <div class="glyph">B</div>
+            <p class="title">Body</p>
+            <div class="meta">20-min strength: pushups &amp; planks</div>
+            <span class="xp">+90</span>
+          </div>
+          <div class="q q2">
+            <div class="glyph">R</div>
+            <p class="title">Read</p>
+            <div class="meta">Four Thousand Weeks</div>
+            <span class="xp">+60</span>
+          </div>
+          <div class="q q3">
+            <div class="glyph">L</div>
+            <p class="title">Listen</p>
+            <div class="meta">Huberman Lab — Sleep Architecture</div>
+            <span class="xp">+50</span>
+          </div>
+          <div class="q q4">
+            <div class="glyph">N</div>
+            <p class="title">Nourish</p>
+            <div class="meta">Cook a high-protein lunch</div>
+            <span class="xp">+70</span>
+          </div>
+          <div class="q q5">
+            <div class="glyph">M</div>
+            <p class="title">Mind</p>
+            <div class="meta">10-min focus meditation</div>
+            <span class="xp">+40</span>
+          </div>
+          <div class="q q6">
+            <div class="glyph">W</div>
+            <p class="title">Watch</p>
+            <div class="meta">The Bear · S3 E4</div>
+            <span class="xp">+30</span>
+          </div>
+        </div>
+        <div class="tabbar" data-od-id="tabbar-home">
+          <div class="tab active"><div class="icon"></div>Today</div>
+          <div class="tab"><div class="icon"></div>Library</div>
+          <div class="tab center"><div class="icon">+</div>&nbsp;</div>
+          <div class="tab"><div class="icon"></div>Stats</div>
+          <div class="tab"><div class="icon"></div>Profile</div>
+        </div>
+      </div>
+    </div>
+    <!-- Phone 3 — detail -->
+    <div class="phone" data-od-id="phone-detail">
+      <div class="screen detail">
+        <div class="status"><span>9:41</span><span class="right">·· 5G · 100%</span></div>
+        <div class="topbar"><div class="back">←</div>QUEST · 03 / 08</div>
+        <div class="hero">
+          <span class="stamp">+90 XP</span>
+          <span class="badge">— BODY · STRENGTH</span>
+          <h2>20 minutes that change Wednesday.</h2>
+          <p>A short, repeatable strength block — pushups, planks, and one wildcard. No equipment. Sam, you've finished this 11 times this month.</p>
+        </div>
+        <div class="steps" data-od-id="steps">
+          <h3>Today's micro-tasks</h3>
+          <div class="step done"><div class="check"></div><div class="name">Roll out the mat</div><div class="meta">+5 XP</div></div>
+          <div class="step"><div class="check"></div><div class="name">3 × 12 pushups</div><div class="meta">+30 XP</div></div>
+          <div class="step"><div class="check"></div><div class="name">3 × 45s plank</div><div class="meta">+30 XP</div></div>
+          <div class="step"><div class="check"></div><div class="name">Wildcard: lunges</div><div class="meta">+25 XP</div></div>
+        </div>
+        <div class="start">Start quest</div>
+        <div class="tabbar" data-od-id="tabbar-detail">
+          <div class="tab active"><div class="icon"></div>Today</div>
+          <div class="tab"><div class="icon"></div>Library</div>
+          <div class="tab center"><div class="icon">+</div>&nbsp;</div>
+          <div class="tab"><div class="icon"></div>Stats</div>
+          <div class="tab"><div class="icon"></div>Profile</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</body>
+</html>

package/skills/design-templates/github-dashboard/SKILL.md ADDED Viewed

@@ -0,0 +1,130 @@
+---
+name: github-dashboard
+description: |
+  GitHub repository analytics dashboard — stars, forks, contributors,
+  issues, pull requests, recent activity, and top contributors. Use when
+  the brief asks for a GitHub repo dashboard, open-source growth report,
+  repository health page, or GitHub analytics view.
+triggers:
+  - "github dashboard"
+  - "repo dashboard"
+  - "repository dashboard"
+  - "github analytics"
+  - "open source dashboard"
+  - "github growth"
+  - "仓库看板"
+  - "GitHub 看板"
+od:
+  mode: prototype
+  platform: desktop
+  scenario: operation
+  preview:
+    type: html
+    entry: index.html
+  design_system:
+    requires: true
+    sections: [color, typography, layout, components]
+  outputs:
+    primary: index.html
+    secondary:
+      - template.html
+      - data.json
+      - artifact.json
+      - provenance.json
+  capabilities_required:
+    - shell
+    - file_write
+  example_prompt: "Build a GitHub dashboard for nexu-io/open-design — stars, forks, contributors, issues, PRs, recent activity, and top contributors."
+---
+# GitHub Dashboard Skill
+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.
+## 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
+```
+## 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`.
+## Workflow
+1. **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`.
+2. **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.
+3. **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.
+4. **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.
+5. **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.
+6. **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`.
+## 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.
+## 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.