etanhey/html-dashboard

HTML Dashboard

Produce gen-12-quality HTML dashboards by cloning the aesthetic of record, not by improvising a weaker static page.

Non-Negotiable Rule

Never ship a from-scratch lesser version. Clone templates/template.html or the most recent/best prior dashboard first, then replace the content with verified real data.

Aesthetic Of Record

Use these references before producing any dashboard. The two dated files are Etan-ecosystem canonical references; if they are absent in the current environment, open the newest/best local docs.local/dashboards/YYYY-MM-DD-*.html, then fall back to this skill's template.

• ~/Gits/orchestrator/docs.local/dashboards/2026-05-30-orchestration-status.html
• ~/Gits/orchestrator/docs.local/dashboards/2026-05-31-brainlayer-conductor.html
• Skill template: skills/golem-powers/html-dashboard/templates/template.html

The required look and behavior:

• Inter + JetBrains Mono from Google Fonts
• Dark theme with CSS custom properties and radial-gradient background
• Gradient VERDICT hero with large clamp() headline and accent-gradient word
• Summary cards that click into a reasoning side-panel drawer
• Tabbed detail for progressive disclosure
• Inline glossary terms using .g[data-gloss] and plain-language drawer definitions
• High-contrast status pills
• Data arrays (GLOSS, TRACKS, FINDINGS or equivalent) feeding render logic
• Visual verification in Helium only. Do not use Brave for HTML dashboards.

Workflow

1. Search/open the most recent and best prior dashboard in docs.local/dashboards/ before writing anything.
   • Prefer the newest gen-12 dashboard when present.
   • If no local dashboard exists, open this skill's templates/template.html.
2. Clone the template to the target repo:
   • docs.local/dashboards/YYYY-MM-DD-<topic>.html
3. Populate only with verified real content:
   • hero verdict and lede
   • 3-5 summary cards in TRACKS
   • tabs and tab panels
   • at least 5 glossary entries in GLOSS
   • status pills with real state
4. Keep the interaction primitives intact:
   • card to drawer
   • glossary to drawer
   • tabs
   • jump strip
5. Verify with the quality checklist below.
   • Use Helium for opening, previewing, screenshots, and interaction checks.
   • Do not use Brave for HTML dashboards unless Etan explicitly overrides this later.
6. Save the final HTML and send it to Etan with SendUserFile when the environment supports it. If not, give the exact path.

Quality Checklist

Do not claim done until every item is true:

• [ ] Reference dashboard was opened first.
• [ ] Output file is under docs.local/dashboards/YYYY-MM-DD-<topic>.html.
• [ ] Google Fonts link includes Inter and JetBrains Mono.
• [ ] Hero has a gradient verdict headline using .verdict-word and .accent.
• [ ] At least 3 summary cards render from TRACKS and open the drawer.
• [ ] Tabs render and switch visible panels.
• [ ] At least 5 .g[data-gloss] terms exist and each has a matching GLOSS entry.
• [ ] High-contrast .pill elements are used for state.
• [ ] Dark theme, radial-gradient background, and CSS custom properties remain intact.
• [ ] All claims are backed by real data from files, command output, or user-provided content.
• [ ] No fabricated PR numbers, statuses, metrics, dates, agent states, or decisions.
• [ ] Visual/behavioral verification was done with a browser-capable tool or clearly marked as not performed.
• [ ] HTML dashboard browser verification used Helium, not Brave.

Output Contract

When finished, report:

## Skill: html-dashboard
### Baseline Score (without skill): X%
### With-Skill Score: Y%
### Delta: +Z%
### Compliance: X/10 | Structure: X/10 | Quality: X/10
### Verdict: SHIP / ITERATE / FLAG FOR HUMAN / RETIRE
### Issues Found: [list]
### Iterations: N/3

Also include:

• Dashboard path
• Template/reference path used
• Verification receipt