Render data dashboards as static SVG panels embeddable in Markdown. Uses D3.js v7 mental model for scales, shapes, and axes. No runtime JS; output is pure SVG with inline styles for GitHub compatibility.
Standardmäßig ist der Prompt ausgewählt, der zuerst die Quelle prüft. Sie können zu einem direkten Befehl wechseln oder eine lokale Kopie herunterladen.
Quelldateien prüfen
Lesen Sie SKILL.md und alle von SkillsMP angezeigten Begleitdateien, bevor Sie sich für eine Installation entscheiden.
Mit Codex oder Claude installieren Kopieren Sie diesen Prompt, fügen Sie ihn in Codex, Claude oder einen anderen Assistant ein und lassen Sie die Skill-Seite prüfen und installieren.
Ein direkter Befehl überspringt den Prüf-Prompt. Prüfen Sie die Quelle, bevor Sie ihn ausführen.
Render data dashboards as static SVG panels embeddable in Markdown. Uses D3.js v7 mental model for scales, shapes, and axes. No runtime JS; output is pure SVG with inline styles for GitHub compatibility.
Render dashboards as static SVG panels that embed directly in Markdown files. The output works in GitHub READMEs, VS Code preview, and any browser. No JavaScript runtime, no external CSS, no build step.
This is the mid-tier delivery format: richer than ASCII (color, curves, precise positioning), simpler than HTML (no interactivity, no CDN). The agent uses D3.js concepts (scales, shape generators, axes) as a mental model for producing SVG markup, but the output is raw SVG text, not a running D3 program.
When to Use
Dashboards that live in GitHub repos (README, wiki, docs)
Reports rendered in VS Code Markdown preview
Static visual artifacts that need color, precise layout, or curves
Anywhere SVG is supported but JavaScript is not (email clients with SVG support, static sites)
When NOT to Use
Interactive filtering, drill-through, or tooltips needed (use delivery-html-dashboard)
Terminal-only consumers with no graphical display (use delivery-ascii-dashboard)
PowerPoint or PDF required (use delivery-slides or delivery-pdf-report)
The audience is non-technical and expects branded corporate visuals (use HTML or Power BI)
Module 1: SVG Foundations
Coordinate System
SVG uses a top-left origin with y increasing downward. All positioning uses the viewBox attribute for responsive scaling.
Layout: cards evenly spaced across dashboard width. Gap = 16px between cards.
Formula: cardWidth = (dashWidth - (n-1) * gap) / n
Horizontal Bar Chart
<gtransform="translate(60, 80)"><!-- Bar --><rectx="0"y="0"width="320"height="24"rx="2"fill="#4A90D9"/><!-- Label (left of axis) --><textx="-8"y="16"text-anchor="end"fill="#E0E0E0"font-size="12">North</text><!-- Value (right of bar) --><textx="328"y="16"fill="#999"font-size="11">$139.1K</text></g>
Bar spacing: bandwidth = step * 0.7 (30% gap between bars).
Vertical Bar Chart
Same as horizontal, rotated. Y-axis for values, x-axis for categories. Use band scale for x, linear scale for y.
Line Chart
<polylinepoints="60,200 160,180 260,150 360,160 460,130 560,140"fill="none"stroke="#4A90D9"stroke-width="2"stroke-linejoin="round"/><!-- Data points --><circlecx="60"cy="200"r="3"fill="#4A90D9"/>
For multiple series: one <polyline> per series, different stroke colors.
Area Chart
<pathd="M 60,200 L 160,180 L 260,150 ... L 560,250 L 60,250 Z"fill="#4A90D9"fill-opacity="0.3"stroke="#4A90D9"stroke-width="2"/>
Pie / Donut Chart
Each slice is a <path> using arc commands:
<pathd="M cx,cy-r A r,r 0 largeArc,1 x2,y2 L cx,cy Z"fill="#4A90D9"/>
For donut: add inner radius, close path along inner arc.
Maximum slices: 6. Group remaining into "Other."
Sparkline
Minimal line chart without axes, embedded in KPI cards:
