From design-studio
Designs a production-ready chart or data visualization — selects the optimal chart type, applies accessible color palettes, adds annotations, and outputs HTML/CSS/JS using Chart.js or vanilla SVG.
How this command is triggered — by the user, by Claude, or both
Slash command
/design-studio:chart-designThis command is limited to the following tools:
The summary Claude sees in its command listing — used to decide when to auto-load this command
# /chart-design Design a data visualization: select the right chart type, apply accessible colors, add meaningful annotations, and produce production-ready HTML/CSS/JS with Chart.js (or vanilla SVG for simple charts). **Usage:** `/chart-design <description>` **Examples:** - `/chart-design monthly revenue trend for 2025` - `/chart-design part-to-whole breakdown of user acquisition channels` - `/chart-design scatter plot: ad spend vs conversion rate` - `/chart-design --library d3 geographic distribution by US state` --- ## Process ### 1. Parse the Request Extract from `$ARGUMENTS`: - *...
Design a data visualization: select the right chart type, apply accessible colors, add meaningful annotations, and produce production-ready HTML/CSS/JS with Chart.js (or vanilla SVG for simple charts).
Usage: /chart-design <description>
Examples:
/chart-design monthly revenue trend for 2025/chart-design part-to-whole breakdown of user acquisition channels/chart-design scatter plot: ad spend vs conversion rate/chart-design --library d3 geographic distribution by US stateExtract from $ARGUMENTS:
--library chart.js (default) | d3 | recharts | vanilla--a11y flag or always default to accessible palette)--style dark for dark backgrounds, --style minimal for clean axesApply the chart type selection matrix from the Data Viz Designer reference:
| Data relationship → | Recommended chart |
|---|---|
| Trend over time (continuous) | Line chart |
| Trend over time (discrete periods) | Vertical bar chart |
| Part-to-whole (≤ 5 categories) | Donut chart |
| Part-to-whole (many categories) | Stacked bar |
| Comparison across categories | Grouped bar chart |
| Single metric vs target | Bullet chart |
| Distribution of one variable | Histogram |
| Correlation between 2 variables | Scatter plot |
| Ranking with long labels | Horizontal bar |
| Hierarchical proportions | Treemap |
| Flow between stages | Sankey diagram |
Reject anti-patterns: If the request implies a 3D chart, dual Y-axis, or pie with > 5 slices, note the issue and recommend the appropriate alternative.
Apply palette based on the data type:
Sequential (single variable, ordered values):
--data-seq-1: #dbeafe; --data-seq-2: #93c5fd;
--data-seq-3: #3b82f6; --data-seq-4: #1d4ed8; --data-seq-5: #1e3a8a;
Diverging (values diverge from a midpoint — profit/loss, sentiment):
--data-div-neg-2: #dc2626; --data-div-neg-1: #fca5a5;
--data-div-mid: #f3f4f6;
--data-div-pos-1: #93c5fd; --data-div-pos-2: #1d4ed8;
Categorical (distinct series — up to 8, colorblind-safe):
--data-cat-1: #2563eb; --data-cat-2: #16a34a; --data-cat-3: #dc2626;
--data-cat-4: #d97706; --data-cat-5: #7c3aed; --data-cat-6: #0891b2;
--data-cat-7: #db2777; --data-cat-8: #4b5563;
Identify the key insight and add at least one annotation:
HTML/CSS/JS output requirements:
--library specifiedresponsive: true, maintainAspectRatio: false — chart fills its containerwidth: 100%; height: 300px on <canvas> wrapper (override with --height flag)role="img" + <title> + <desc> elementsaria-labelledby pointing to <figcaption> + <details> data table fallbackchartjs-plugin-annotationOutput structure:
<figure class="chart-figure">
<figcaption id="chart-title">[Chart title]</figcaption>
<div class="chart-wrapper">
<canvas id="chart" aria-labelledby="chart-title"></canvas>
</div>
<details class="chart-data-table">
<summary>View data table</summary>
<table>...</table>
</details>
</figure>
CSS (self-contained):
.chart-figure { margin: 0; }
.chart-wrapper { position: relative; width: 100%; height: 300px; }
figcaption {
font-size: 14px; font-weight: 600;
color: #111827; margin-bottom: 12px;
}
.chart-data-table { margin-top: 12px; font-size: 13px; }
Before outputting:
This command does not require MCP. All output is self-contained HTML/CSS/JS using Chart.js or vanilla SVG.
/dashboard-layout — Place the chart in a full dashboard with KPI cards and filters/design-review — Audit the chart output for accessibility and visual quality/design-framework — Convert the HTML chart to a React/Vue/Svelte componentnpx claudepluginhub rp4ri/claude-local-marketplace --plugin design-studio/chart-designDesigns a production-ready chart or data visualization — selects the optimal chart type, applies accessible color palettes, adds annotations, and outputs HTML/CSS/JS using Chart.js or vanilla SVG.
/chartDesigns and implements optimal charts for data goals using D3.js, Chart.js, Recharts, or Plotly. Builds responsive, accessible charts/dashboards with TSX components, transformers, tests.
/generate-visualizationsGenerates Mermaid diagrams, data charts, token comparisons, and hero images for Medium articles and technical documentation from paths or themes.
/diagramCreate or improve Mermaid, PlantUML, or Excalidraw diagrams for a specific Slidev slide using content analysis and design best practices.
/generate-web-diagramGenerates a standalone HTML diagram from input using visual-explainer skill, CSS patterns, and optional AI images via surf, then opens it in the browser.