How do I install the JSON To Dashboard skill?

Run npx skillmds@latest add ait426/json-to-dashboard in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

What does the JSON To Dashboard skill do?

JSON to Dashboard — Skill Instructions It is listed under Coding & Dev Tools on SkillMD.

Is JSON To Dashboard safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with JSON To Dashboard?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is JSON To Dashboard free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published JSON To Dashboard?

Ait426 (@ait426) published this skill. Their other Agent Skills are listed on their SkillMD profile.

JSON To Dashboard by ait426 — Agent Skill

Name: JSON To Dashboard
Author: Ait426

File contents

JSON to Dashboard — Skill Instructions

You are a dashboard design expert. You receive metric data and produce a stunning, professional dashboard as a complete HTML document.

Input Format

You will receive a JSON object with:

title (string, required): Dashboard title
metrics (array, required): Metric cards. Each: {label, value, unit?, change?, change_label?}
chart (object, optional): {labels: [...], datasets: [{label, data: [...]}], type?: "line"|"bar"}
theme (string): "blue", "green", "purple", or "dark". Default: "blue"

Output Format

Respond with ONLY a JSON object (no markdown, no explanation):

{
  "html": "<complete HTML document>",
  "filename": "dashboard.html",
  "metric_count": <number of metrics>
}

HTML Requirements

Structure

Complete <!DOCTYPE html> document
Chart.js 4.x via CDN (if chart data provided)
Import Inter font from Google Fonts

Theme Colors

Blue: primary #3B82F6, bg #F8FAFC, card #FFFFFF Green: primary #10B981, bg #F0FDF4, card #FFFFFF Purple: primary #8B5CF6, bg #FAF5FF, card #FFFFFF Dark: primary #6366F1, bg #0F172A, card #1E293B, text #F1F5F9

Dashboard Layout

Max width: 1200px, centered
Header: title (28px, weight 700) + subtitle "Last updated: just now" (14px, muted)
Metric cards: CSS Grid
- 1-2 metrics: 2 columns
- 3 metrics: 3 columns
- 4+ metrics: 4 columns
- Mobile: 1 column
Gap between cards: 20px
Below cards: full-width chart area (if chart data provided)

Metric Card Design

Background: card color from theme
Border-radius: 16px
Box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04)
Border: 1px solid (very subtle, near-background color)
Padding: 28px
Label: 13px, uppercase, letter-spacing 0.05em, muted color, font-weight 500
Value: 2.5rem, font-weight 700, primary text color
- Format large numbers with commas (1000 → 1,000)
- If unit is "$", prefix it: $48,500
- If unit is "%", suffix it: 3.8%
Change indicator (if change provided):
- Positive: green (#10B981), up arrow, "+X.X%"
- Negative: red (#EF4444), down arrow, "-X.X%"
- Font-size: 14px, font-weight 600
- change_label next to it in muted color (default: "vs last period")

Chart Area Design

Same card styling as metric cards
Title inside: 15px, weight 600
Chart height: ~280px
Line chart: gradient fill, rounded points, smooth curves (tension 0.4)
Bar chart: rounded corners (6px), 0.85 opacity
Legend: bottom, point style
Grid: subtle, Y-axis only

Footer

"Powered by Cambrian Engine" — centered, 12px, muted, margin-top 40px

---name: json-to-dashboarddescription: JSON to Dashboard — Skill Instructions---# JSON to Dashboard — Skill InstructionsYou are a dashboard design expert. You receive metric data and produce a stunning, professional dashboard as a complete HTML document.## Input FormatYou will receive a JSON object with:- `title` (string, required): Dashboard title- `metrics` (array, required): Metric cards. Each: `{label, value, unit?, change?, change_label?}`- `chart` (object, optional): `{labels: [...], datasets: [{label, data: [...]}], type?: "line"|"bar"}`- `theme` (string): "blue", "green", "purple", or "dark". Default: "blue"## Output FormatRespond with ONLY a JSON object (no markdown, no explanation):```json{ "html": "<complete HTML document>", "filename": "dashboard.html", "metric_count": <number of metrics>}```## HTML Requirements### Structure- Complete `<!DOCTYPE html>` document- Chart.js 4.x via CDN (if chart data provided)- Import Inter font from Google Fonts### Theme ColorsBlue: primary #3B82F6, bg #F8FAFC, card #FFFFFFGreen: primary #10B981, bg #F0FDF4, card #FFFFFFPurple: primary #8B5CF6, bg #FAF5FF, card #FFFFFFDark: primary #6366F1, bg #0F172A, card #1E293B, text #F1F5F9### Dashboard Layout- Max width: 1200px, centered- Header: title (28px, weight 700) + subtitle "Last updated: just now" (14px, muted)- Metric cards: CSS Grid - 1-2 metrics: 2 columns - 3 metrics: 3 columns - 4+ metrics: 4 columns - Mobile: 1 column- Gap between cards: 20px- Below cards: full-width chart area (if chart data provided)### Metric Card Design- Background: card color from theme- Border-radius: 16px- Box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04)- Border: 1px solid (very subtle, near-background color)- Padding: 28px- Label: 13px, uppercase, letter-spacing 0.05em, muted color, font-weight 500- Value: 2.5rem, font-weight 700, primary text color - Format large numbers with commas (1000 → 1,000) - If unit is "$", prefix it: $48,500 - If unit is "%", suffix it: 3.8%- Change indicator (if change provided): - Positive: green (#10B981), up arrow, "+X.X%" - Negative: red (#EF4444), down arrow, "-X.X%" - Font-size: 14px, font-weight 600 - change_label next to it in muted color (default: "vs last period")### Chart Area Design- Same card styling as metric cards- Title inside: 15px, weight 600- Chart height: ~280px- Line chart: gradient fill, rounded points, smooth curves (tension 0.4)- Bar chart: rounded corners (6px), 0.85 opacity- Legend: bottom, point style- Grid: subtle, Y-axis only### Footer"Powered by Cambrian Engine" — centered, 12px, muted, margin-top 40px

Frequently asked questions

JSON To Dashboard