Build Transparency Dashboard

build-transparency-dashboard

Scaffold a live public "build dashboard" that automatically shows proof of work — commit count, last commit message, timestamp — pulled from a private GitHub repo and displayed on a public static site.

When to Use

Use this skill when you want to:

The Pattern

Private repo (your code)
  └── GitHub Actions: on push → runs update-status.js
        └── Writes status.json → commits to public site repo
              └── Public site fetches status.json every 60s → displays live stats

Result: every git push to your private repo automatically updates your public dashboard within minutes.

What's Included

build-transparency-dashboard/
├── SKILL.md                     ← this file
├── scripts/
│   ├── update-status.js         ← generates status.json from git log
│   └── ideas-api.js             ← Express routes for community ideas board
├── assets/
│   ├── build.html               ← dashboard page template
│   ├── nav.js                   ← shared nav renderer (configurable)
│   ├── nav.css                  ← nav styles
│   └── github-actions.yml       ← GitHub Actions workflow template
└── references/
    └── setup-guide.md           ← step-by-step setup instructions

Quick Setup

1. Variables to Customize

In assets/build.html, search for these TODOs:

| TODO | Replace With | |------|-------------| | YOUR_PROJECT_NAME | Your project's display name (e.g. MyApp) | | YOUR_BORN_DATE | ISO date your project started (e.g. 2026-01-01T00:00:00-05:00) | | YOUR_BRAND_COLOR | Hex color (default: #7c6eff) | | YOUR_COIN_CA | Token contract address, or remove the coin section entirely | | YOUR_IDEAS_API_URL | Base URL of your ideas API (e.g. https://myapp.fly.dev/public/ideas) | | YOUR_TWITTER_HANDLE | Your @handle for the nav badge | | YOUR_QUEUE_ITEMS | What you're building next (edit the queue section) |

In assets/github-actions.yml, set these:

| Variable | Description | |----------|-------------| | SITE_REPO | Your public site repo (e.g. username/my-site) | | SITE_REPO_PATH | Directory name for checkout (e.g. my-site) | | BOT_NAME | Committer name (e.g. StatusBot) | | BOT_EMAIL | Committer email |

In assets/nav.js, edit the config object at the top:

const NAV_CONFIG = {
  brand: 'MYAPP',            // nav logo text
  links: [
    { href: '/', label: 'Home' },
    { href: '/build', label: 'The Build' },
  ],
  badge: { label: '@yourhandle ↗', href: 'https://x.com/yourhandle' },
};

2. GitHub Secret Required

Add to your private repo → Settings → Secrets and variables → Actions:

3. Deploy Your Public Site

The build.html file is a standalone static page. Deploy anywhere:

4. Add the Ideas API (Optional)

The community ideas board requires a running API. Copy scripts/ideas-api.js into your backend app and mount the routes. It uses a flat JSON file for storage — no database needed.

Or skip it entirely: remove the coin/ideas section from build.html and it works as a pure static display.

5. Add the Workflow to Your Private Repo

Copy assets/github-actions.yml to .github/workflows/update-build-status.yml in your private repo. Push a commit — the workflow fires automatically.

status.json Shape

The workflow generates this file and commits it to your public site repo:

{
  "generatedAt": "2026-02-28T21:00:00Z",
  "version": "1.0.0",
  "project": {
    "name": "MyApp",
    "description": "Your project description.",
    "born": "2026-01-01T00:00:00-05:00",
    "status": "building",
    "statusText": "Online · Building"
  },
  "lastCommit": {
    "message": "feat: add dark mode",
    "time": "2026-02-28T20:55:00Z"
  },
  "commitsThisWeek": 12,
  "shipped": [],
  "queue": [],
  "ideas": []
}

Design System

The template uses:

Swap --nova / --nova2 CSS vars for your brand color.

See a Live Example

The pattern was built for novaiok-site.fly.dev/build. That's the reference implementation.

Files to Read Next