メニュー
Instructions for creating dashboard artifacts with KPI tiles, chart specifications, and breakdown tables from the built-in template
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
Instructions for creating sortable and filterable data-table artifacts from the built-in template
Instructions for creating explainer artifacts with numbered-step or section walkthrough structures from the built-in template
Instructions for creating long-form report artifacts with a masthead, table of contents, structured sections, and optional appendix from the built-in template
Guided setup and customization workflow for auto mode environment context, optional rule carve-outs, and settings updates
Shared /code-review finder-angle block covering line-by-line diff scanning, removed-behavior auditing, and cross-file tracing
Template for medium and high inline code-review prompts that run eight finder angles, deduplicate without verification, and enforce a minimum findings target
| name | artifact-dashboard |
| description | Instructions for creating dashboard artifacts with KPI tiles, chart specifications, and breakdown tables from the built-in template |
| metadata | {"originalName":"Skill: Artifact dashboard","ccVersion":"2.1.206","sourceUrl":"https://github.com/Piebald-AI/claude-code-system-prompts/blob/main/system-prompts/skill-artifact-dashboard.md","source":{"owner":"Piebald-AI","repo":"claude-code-system-prompts","ref":"main","path":"system-prompts/skill-artifact-dashboard.md"}} |
Base styling and reusable components for an operational dashboard: KPI tile cards, a spec-driven line-chart renderer, and table styles, arranged in a sensible default layout (KPI row, primary chart, breakdown table). The template sets the visual foundation — it does not fix the structure or content of the final dashboard.
template.html from this skill's base directory (listed above).<!-- SLOT: ... --> marker with real content — the comment inside each slot describes what goes there. Remove the slot comments from the final output.dataviz skill is the right companion for designing richer or additional visualizations), reorder or drop sections, extend the layout grid. The slots are where you start, not where you stop — customization is key for data visualization, and the card system, renderer, and table styles are components to build with, keeping the base styling so the result reads as one coherent design.SLOT markers left, and no placeholder text or values left (see Notes).Artifact tool.Creation only. When editing an existing dashboard artifact, work with its current HTML directly — don't re-read or re-apply this template.
| Slot | What to fill in |
|---|---|
TITLE | Plain-text page title, e.g. "Q2 Revenue Dashboard". |
KPI_TILES | 2–5 .card.kpi blocks — one headline number each, with optional up/down delta. Color deltas by meaning, not direction (see Notes). |
PRIMARY_CHART_SPEC | JSON spec inside <script type="application/json" id="primary-chart-spec" data-chart-runtime>. Supports "type": line (default), bar, or donut — multi-series specs get a legend, and optional axis captions and y-domain knobs are documented next to the slot. The data-chart-runtime attribute is load-bearing (publish-time chart injection keys on it — keep it). Fill the spec for the standard cases; for other chart types or richer behavior, add your own chart alongside it. |
BREAKDOWN_ROWS | Table header <th> cells and one <tr> per row. Add class="num" to right-align numeric columns. |
FOOTER_NOTE | Data source and generation timestamp. |
The template also has a few minor inline slots (subtitle, chart title, breakdown title) — each is labelled in place.
<!DOCTYPE>/<html>/<head>/<body> wrapper. The Artifact tool adds its own skeleton at publish time.renderChart() owns the pixels. Spec shape is documented inline next to the slot."type": "bar" or "type": "donut" in the chart spec when that shape fits (deterministic, preferred for standard shapes); hand-draw your own SVG or HTML chart when you want a shape the spec doesn't cover or full visual control (the dataviz skill helps design it — reuse the card chrome and palette); or drop the chart section and lead with the KPI tiles and breakdown table. Prefer "line" for anything that is a trend: it is the only spec type the page can still draw if the published page's chart runtime is unavailable — a hand-drawn SVG chart has no such dependency.up/down classes pick the arrow and default to green-up/red-down. When a decrease is the improvement — latency, cost, error rate — add the good (or bad) class so the color says whether the news is good.y.min/y.max in the chart spec to zoom the domain, and mention the truncated axis in the chart title or footer so the zoom doesn't mislead.:root palette ships CDS token values with a built-in dark mode; a follow-up styling/theming pass is encouraged — tune --accent toward the subject (prefer another CDS color token so the page stays on-system), adjust surfaces, or restyle entirely. When restyling or hand-drawing SVG charts, route colors through the CSS custom properties via style attributes (var() fails silently in bare SVG presentation attributes), and keep every custom color legible in both light and dark — hardcoded near-black strokes vanish on the dark background.