What is the decision-first-dashboard skill?
The decision-first-dashboard skill is a SKILL.md for redesigning KPI-heavy dashboards. It first tests whether a persistent dashboard is warranted, requires a confirmed Decision and Action, routes each metric by role, and delivers HTML written by a compiler with provenance markers.
This skill redesigns KPI-heavy dashboards for your AI coding agent. Give it a messy dashboard, screenshot, Figma frame, existing dashboard code or dataset, and it asks what the dashboard is for before it reorders any metric.
A source can contain 70 valid KPIs without becoming a 70-KPI dashboard. Metrics are routed as primary_signal, diagnostic, exception, drilldown or scorecard_only, and the first view keeps the minimum sufficient decision signals plus active exceptions.
The worthiness test
Before redesigning, the skill checks for a recurring decision or monitoring loop, an accountability path and a response that changes. If the job is one-off or passive, it can recommend a one-off analysis, scheduled summary, alert, report or chat query workflow.
Intake and evidence modes
The skill asks one question at a time, no more than five in total, and stops once it has enough confirmed context. Decision and Action must both be explicitly confirmed before routing or rendering can proceed.
- No-score mode. If the source has no defensible composite model, the skill makes none up. It can still show direction, changes, exceptions and a 3 to 6 dimension radar profile when the dimensions share one source-grounded scale.
- Composite mode. If the source provides a real score model with scale, normalized components, weights, aggregation rule and score bands, the skill preserves and displays that score. Missing facts fall back to no-score mode.
Canonical output
HTML is the primary After deliverable when file generation is available, with SVG as the preview artifact. The compiler also writes output.manifest.json and stamps the HTML and SVG with machine-verifiable provenance.
Where it fits
Best for
- Dashboards where users must scan several independent metrics before they see overall status, the main risk or what needs action.
- Redesigns that start from a screenshot, a Figma frame, existing dashboard code or a dataset of verified metrics.
- Output with no invented action buttons, targets, scores, weights or thresholds.
Not for
- Choosing from 50+ chart types with selection criteria and writing React chart code with Recharts, D3 and Nivo, which the data visualization mastery skill covers.
- Building React and Vite dashboards from Stitch screens with TanStack Query and DESIGN.md tokens, which the stitch react vite dashboard skill covers.
- Creating Stitch screens from text or images and generating up to five design variants through the Stitch MCP, which the stitch generate design skill covers.
- Building three-tier tokens, a component library, a governance process and adoption tracking, which the design system lead skill covers.
How to install Decision-First Dashboard Skill: Fewer KPIs, Clearer Decisions
npx skills add fourleaf13-hue/decision-first-dashboardRun the install command
Run the command above in your project to add the skill for your AI coding agent.
Upload to a Claude workspace
For the Skills upload flow, download the
decision-first-dashboard-skillartifact ZIP from the latest successful Compiler tests run and upload it to Claude. GitHub's Download ZIP is rejected for this flow.Ask for a redesign
Give your agent a dashboard screenshot, Figma frame, existing dashboard code or verified metrics and ask it to redesign the dashboard using the
decision-first-dashboardskill.Answer the intake question
Reply to the first question, which asks what you are trying to figure out or do next when you open the dashboard.
Check that it loaded
Ask your agent to redesign a dashboard using the skill. Expect a first question about the decision and action, and no dashboard artifact until both are confirmed.
Key features
- Dashboard worthiness testThree tests check for a recurring loop, an accountability path and a response that changes before any dashboard is built.
- Alternatives to a dashboardA request that fails the worthiness test is redirected to a one-off analysis, scheduled summary, alert, report or chat query workflow.
- Decision Brief intakeOne question at a time, five at most across worthiness and intake, with the working-language opener of what you are trying to figure out or do next.
- Confirmed Decision and ActionA screenshot cannot confirm either one silently. Without both, the intake gate asks a question and no dashboard artifact is produced.
- Metric RouterEvery extracted metric is routed as
primary_signal,diagnostic,exception,drilldownorscorecard_only, and the full inventory is preserved. - No-score and composite modesA score is shown only when the source holds a real score model. Otherwise the output falls back to real signals with no invented number.
- Four production gatesThe compiler runs worthiness, intake, routing and grounding gates in order, and rendered source claims must resolve back to source evidence.
- Provenance on every outputThe compiler stamps HTML and SVG with provenance and writes
output.manifest.json, so a lookalike artifact is not the canonical After. - Restrained attentionLarge red banners, alarm icons and Action needed wording require explicit source-grounded alert semantics or a user-supplied alert policy.
- Written visual rulesNo four-equal-KPI top row, no dominant giant table, 3 to 6 primary signals in the first view, and radar only for 3 to 6 comparable peer dimensions.
Frequently asked questions
What is the decision-first-dashboard skill?
It is a skill for redesigning KPI-heavy dashboards. Your AI coding agent first checks whether a dashboard is worth building, then confirms the decision and action it supports, routes each metric by role and renders the result through a production compiler. The aim is a dashboard that shows what matters, why it changed and what needs attention next.
How do I install the decision-first-dashboard skill?
Run npx skills add fourleaf13-hue/decision-first-dashboard. Then give your agent a dashboard screenshot, Figma frame, existing dashboard code or verified metrics and ask it to redesign the dashboard using the decision-first-dashboard skill. For a Claude workspace upload, use the dedicated skill artifact ZIP from the latest successful Compiler tests run.
Does the skill build a dashboard for every request?
No. It first asks whether the request has a recurring decision or monitoring loop, an accountability path and a response that changes. If the real job is a one-off analysis, scheduled summary, alert, report or chat query workflow, dashboard rendering stops by default. If you explicitly choose a dashboard after seeing that trade-off, the process continues through intake.
What does the skill need from me before it renders?
It needs an explicitly confirmed Decision and Action. The skill asks one question at a time, at most five across worthiness and intake, and stops once it has enough context. An ambiguous prompt such as redesign this dashboard is not render permission, and a screenshot alone cannot confirm your decision or action.
What happens to metrics that are not on the first view?
They are preserved. The router keeps the complete extracted inventory, and drilldown, scorecard-only and on-demand diagnostic metrics stay available for diagnosis or traceability without becoming first-view clutter. Active exceptions cannot be hidden to make the dashboard look healthier, so they stay visible on the first view.
Will the skill invent a health score?
No. In no-score mode, used when the source has no defensible composite model, it shows direction, important changes, exceptions and a true radar profile only when the dimensions are comparable on one grounded scale. Composite mode preserves a score only when the source supplies the score, scale, normalized components, weights, aggregation rule and score bands. Otherwise it falls back to no-score.
What does the skill deliver?
HTML is the primary deliverable when file generation is available, produced by the canonical compiler. An SVG serves as the preview and support output. The compiler also writes output.manifest.json with hashes for the source, the Decision Brief, the routing manifest, the grounded bundle, the decision state, the HTML and the SVG.