astro-dashboard-pages

Builds static Astro dashboard pages rendering repo-tracked JSON evidence with ECharts visualizations.

11|9|Updated May 25, 2026
One-click install
npx skills add https://github.com/projectbluefin/lab --skill astro-dashboard-pages-projectbluefin
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: astro-dashboard-pages
Source: https://github.com/projectbluefin/lab/tree/main/docs/skills/astro-dashboard-pages
Command: npx skills add https://github.com/projectbluefin/lab --skill astro-dashboard-pages-projectbluefin

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Dashboard detail pages often invent client-side state, hide missing data, or break under static hosting constraints. This Skill guides building Astro pages that render only real, repo-tracked JSON evidence with explicit unavailable states, so GitHub Pages output stays deterministic and every number links back to raw evidence. ## Core Features & Use Cases - Build-time data contracts: Load docs/data/*.json and NDJSON history at prerender time with repo-root paths, join linked result files, and derive metrics only from published fields. - ECharts integration: Pass chart payloads via JSON script blobs, initialize charts in colocated component scripts, and render explicit empty-state panels instead of hiding missing data. - Static hosting hardening: Scrub stale build outputs, keep data-cfasync="false" on runtime scripts for Cloudflare Rocket Loader, and use root-relative paths for custom-domain hosting. - Use Case: Add a /tests route that renders a pass-rate matrix from tests-matrix.json, links each row to raw result JSON and workflow runs, and shows gray unavailable cells for lanes without evidence. ## Quick Start Use the astro-dashboard-pages skill to add a new dashboard detail page that renders the published JSON contract with charts and evidence links.

Frequently Asked Questions about astro-dashboard-pages

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I load JSON data into an Astro page at build time?▼

Load JSON in the Astro frontmatter during prerender using repo-root paths like path.join(process.cwd(), 'docs', ...). This keeps build-time resolution independent of import.meta.url and produces deterministic static output.

How do I add ECharts to a static Astro page?▼

Pass chart data through a script tag of type application/json, then initialize ECharts in a colocated component script with echarts.init and setOption. Attach one shared window resize handler for all chart instances on the page.

Why do Astro charts break on Cloudflare-hosted sites?▼

Cloudflare Rocket Loader rewrites module script types, silently killing chart boot code. Mark runtime scripts with data-cfasync="false" and load chart code as plain-global scripts rather than bare ESM module tags.

Should missing dashboard data hide the chart section?▼

No. Render an explicit empty-state panel naming the missing file and reason instead of omitting the chart. Hiding unavailable data conceals gaps that operators need to see.

When should I not use this dashboard approach?▼

Avoid it for overview shells that only mount existing legacy dashboard JS, workflow or collector changes in CI configuration, cluster data production bugs, and broad visual-design decisions about palette or typography.