# JSON To Dashboard > JSON to Dashboard — Skill Instructions - Skill: `ait426/json-to-dashboard` (Agent Skill, multi-file: 4 files) - Install (CLI): `npx skillmds@latest add ait426/json-to-dashboard` - Raw SKILL.md: https://api.skillmd.com/api/skills/ait426/json-to-dashboard/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Coding & Dev Tools - Author: Ait426 (https://skillmd.com/u/ait426) - Updated: 2026-09-17 - Page: https://skillmd.com/skills/ait426/json-to-dashboard --- # 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): ```json { "html": "", "filename": "dashboard.html", "metric_count": } ``` ## HTML Requirements ### Structure - Complete `` 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