API Dashboard Builder

Turn the APIs you already have into a clean, live dashboard, without a 20-question intake. A Claude Code skill that reads your endpoints, recommends what's worth measuring, picks the right chart for each metric, and ships a single self-contained HTML file that pulls the numbers live.

What it does

• Asks the fewest questions it can. It looks at what your endpoints actually return, proposes 5-9 metrics worth watching, and confirms with one question instead of an interrogation.
• Picks the right chart. Big number, bar, line, or donut, chosen from the question each metric answers, not from what looks flashy. Bars carry their value labels, lines show the latest value, "lower is better" metrics color their arrows correctly, and every mark has a hover tooltip.
• Builds a real, live dashboard. A single HTML file that fetches your endpoints, formats the numbers, stamps a last-updated time, and works on desktop and mobile. A failed endpoint shows an error with a Retry button, not a dead card, and fetches time out instead of hanging.
• Can stay live. Set a refresh interval and the dashboard refetches on its own and restamps the time.
• Wears your brand. Optional: hand it a hex color and a logo, or a full brand gradient, and the whole thing themes to match, in light and dark.
• You control the ratio. A chartHeight setting tunes the dashboard's proportions, from compact and landscape to tall, with no other layout math required.

Install

Clone into your skills directory:

# user-level (available in every project)
git clone https://github.com/brittanyslay/api-dashboard-builder.git ~/.claude/skills/api-dashboard-builder

# or per-project
git clone https://github.com/brittanyslay/api-dashboard-builder.git /path/to/project/.claude/skills/api-dashboard-builder

Then just ask: "Build me a dashboard from these APIs," and paste your endpoints (or an OpenAPI spec). Claude picks the skill up from there.

What's inside

File	What it's for
SKILL.md	The workflow Claude follows: intake, metric selection, chart mapping, build, test.
references/dashboard-template.html	The zero-dependency engine Claude fills in. Inline-SVG charts, theming, live fetch.
references/intake.md	Collect little, infer a lot. The one-question intake.
references/chart-selection.md	Which chart answers which question.
references/metric-frameworks.md	The 5-9 rule, leading vs. lagging, F-pattern layout.
references/example-run.md	A full worked example, start to finish.
examples/example-dashboard.html	The rendered dashboard from the screenshot. Open it in a browser.

Example prompts

Natural ways to reach for this skill once it's installed:

• build me a dashboard from these APIs
• visualize our metrics in one place
• turn our RevOps endpoints into a pipeline dashboard
• make a marketing dashboard from our HubSpot/Salesforce data
• I have these API endpoints, what should I even measure?
• build a KPI dashboard I can drop on a static host
• dashboard our Stripe and product APIs together
• track influenced pipeline, MQL to SQL, and channel performance
• make a live metrics dashboard in our brand colors
• chart these endpoints without me installing anything

Try the example

Open examples/example-dashboard.html in any browser. It renders with inline sample data, so it works offline and shows exactly what the skill produces.

License

Noncommercial use only (PolyForm Noncommercial 1.0.0). Commercial use requires a license from Brittany Slay. See LICENSE.md. Use, adapt, and share it for noncommercial purposes with attribution intact.

---

Built by Brittany Slay, a B2B marketing leader who builds AI-native tools. More free Claude skills at brittanyslay.com/skills. Want a dashboard, a GTM build, or an AI-native marketing function built for real? Get in touch.