Board Builder — dashboards that don't lie

A rulebook + parts kit that makes your coding agent build honest, consistent, phone-ready dashboards — with zero dependencies.

Drop it into Claude Code / Codex / OpenClaw. Then just say "build me a board for my inventory CSV" or "portfolio dashboard, I'll check it on my phone" — and every board comes out with the same discipline: tabs instead of endless scrolling, monospace right-aligned numbers, colour only where it means something, and the assumptions written on the screen.

Three boards from the same rules — finance, schedule, study. All fictional data.

What you get

• SKILL.md — 12 sections of rules the agent follows before it writes a line: what to ask first, tabs & sections, column alignment, phone layout, typography, colour semantics, which infographic fits which kind of number, state beyond colour, the words on the screen, three ways to build (static HTML / Python single-file server / Google Apps Script), finance-board rules, and a 13-point completion checklist the agent must pass before saying "done".
• references/infographics.md — 10 copy-paste CSS/SVG/Unicode widgets: progress bar, threshold bar, range indicator, diverging bar, status lamps, semicircle gauge, sparkline, slot dots, status dots, badges/chips. No Chart.js, no CDN.
• references/python-board.md — a standard-library-only Python server skeleton: JSON API + page in one file, re-reads data on every request, narrow binding by default, desktop/phone launchers.
• examples/ — three finished boards with screenshots (desktop, phone, dark). The agent reads the closest one first so new boards match.

What it looks like

Portfolio board — currency-native P&L, stop─entry─target gauge, "reference only · not an order condition" on the sentiment gauge, one blinking lamp for the single item that needs action.

Schedule board — D-day ordering, overdue in red, an "Needs review" section for rows the parser couldn't resolve (never silently fixed).

Study board — threshold bars with the pass line, slot dots (honest because ≤10 per row), the accuracy definition printed next to the title, wrong answers in their own tab with a count badge.

Phone & dark — 5+ column tables fold into cards, swipe between tabs, light by default with a remembered dark toggle.

Why it's different

Most "dashboard" prompts produce pretty pages that quietly lie: a sparkline invented from a snapshot, "up" and "danger" in the same red, a failed lookup painted as a failure, a blank "No data". This skill encodes the judgment calls:

• Don't invent comparison baselines — no arrows or sparklines unless the source has the prior value.
• "Bad" ≠ "unknown" — a fetch failure is grey "unverified", not red.
• Write the assumption on the screen — formula next to the title, refresh timestamp, scope in parentheses.
• Direction colour ≠ verdict colour — separate variables, so up/down never collides with ok/danger.
• Every empty state says what to do next.

Same task, with and without the skill

Identical inventory CSV, identical prompt. Left: agent on its own. Right: agent with Board Builder installed.

Works with

Claude Code · Codex CLI · OpenClaw — any agent that reads SKILL.md. Output runs on your machine (static HTML or a stdlib Python server), or on Google's for the Apps Script path. Language, currency and market colour conventions follow you — the rules are written in Korean, the agent reads them fine, and the boards come out in your language.

Good for / not for

Good for: portfolio & trading monitors · inventory & ops status · schedules & to-dos · study progress & quiz banks · KPI boards for small teams · anything with numbers you check daily on a phone.

Not for: printed reports, slide decks, BI-tool replacements, or executing trades — finance boards are display-only by rule.

Install

Unzip so SKILL.md sits at ~/.claude/skills/board-builder/SKILL.md (Codex: ~/.codex/skills/, OpenClaw: ~/.openclaw/skills/). Restart the session and ask for a board in your own words. No packages to install.

한국어

대시보드가 거짓말하지 않게 하는 규칙집 + 부품 키트. Claude Code·Codex·OpenClaw에 넣고 "보드 만들어줘" 하면, 용도가 주식이든 재고든 일정이든 같은 결로 나옵니다 — 탭, 모노 숫자, 의미로만 쓰는 색, 화면에 적힌 가정, 폰 대응, 외부 의존성 0. 규칙 12장 + 완성 전 13항 점검표, 인포그래픽 10종 코드, 표준 라이브러리 파이썬 서버 골격, 완성 예시 3종(금융·일정·학습) 동봉. 언어·통화·등락색 관례는 사용자에게 맞춥니다.

繁體中文

讓儀表板不說謊的規則書＋元件包。 放進 Claude Code / Codex / OpenClaw，說一句「幫我做看板」，不論是股票、庫存還是行程，都會以同樣的紀律產出：分頁、等寬數字、只在有意義處上色、把假設寫在畫面上、手機版、零外部依賴。內含 12 章規則＋完成前 13 項檢查表、10 種資訊圖表程式碼、純標準函式庫 Python 伺服器骨架、3 個完整範例（金融・行程・學習）。