From design-system-ops
Produces interactive HTML dashboards, SVG charts, and Mermaid diagrams from design system audit findings, session history, or health data. Use to visualize trends and statuses post-audit.
npx claudepluginhub murphytrueman/design-system-opsThis skill uses the workspace's default tool permissions.
A skill for transforming audit findings, system health statuses, and session history into visual outputs โ interactive HTML dashboards, SVG charts, and Mermaid diagrams โ that make design system health visible at a glance.
Generates static, responsive HTML dashboards from DESIGN-OPS data via Notion, Linear, Figma, GitHub, Vercel. Uses Tailwind CSS, Chart.js from CDNs for zero-dependency browser output.
Generates self-contained interactive HTML dashboards with KPI cards, charts, filters, and tables from queries, CSVs, or samples for reports and monitoring.
Creates self-contained HTML visualizations like slide decks, infographics, dashboards, flowcharts, diagrams, timelines, and org charts from any content or idea.
Share bugs, ideas, or general feedback.
A skill for transforming audit findings, system health statuses, and session history into visual outputs โ interactive HTML dashboards, SVG charts, and Mermaid diagrams โ that make design system health visible at a glance.
Output type: File creation. This skill produces HTML dashboard files, SVG chart files, or Mermaid diagram blocks that can be embedded in documentation, presentations, or shared directly.
Numbers in a markdown table are accurate. They are also invisible. A stakeholder will not register "System health: ๐ก Functional with two weak dimensions" from a text report. But a radar chart showing dimension statuses โ with red zones, amber zones, and green zones โ communicates instantly.
Design system health data is inherently visual. Token coverage maps, component dependency graphs, severity distribution pie charts, trend lines over time โ these are the natural representations of the data that audit skills produce. This skill bridges the gap between raw findings and visual communication.
This skill visualises existing findings โ it does not run audits or generate new data. If no audit output or session history exists, there is nothing to visualise; run the relevant audit skill first. If the request is for a written stakeholder summary rather than a visual artefact, use stakeholder-brief instead. This skill produces HTML dashboards, SVG charts, and Mermaid diagrams โ if the request is for a slide deck or PDF, the visual output from this skill can feed into those formats but this skill does not produce them directly.
Check for .ds-ops-config.yml in the project root:
visuals:
brand_primary: "#0052CC" # Primary colour for charts
brand_secondary: "#FF5630" # Accent colour for warnings/critical
brand_success: "#36B37E" # Success colour
brand_neutral: "#6B778C" # Neutral/baseline colour
output_format: "html" # html, svg, or mermaid
output_directory: ".ds-ops/visuals"
If no configuration exists, use these defaults:
#2563EB (blue)#DC2626 (red)#16A34A (green)#6B7280 (grey)htmlThis skill accepts any of these as input:
Based on the input data and the request, select one or more visual types:
| Type | Best for | Format |
|---|---|---|
| Health radar | System health dimension statuses | Radar/spider chart |
| Severity distribution | Audit findings by severity | Donut chart |
| Trend line | Metric changes over time | Line chart |
| Coverage heatmap | Token or component coverage | Grid heatmap |
| Dependency graph | Component relationships | Mermaid flowchart |
| Comparison bar | Before/after comparisons | Grouped bar chart |
| Action priority matrix | Findings by effort vs. impact | Scatter plot |
| Full dashboard | Multiple visuals on one page | HTML dashboard |
If the request is vague ("make this visual"), choose the visual type that best fits the data:
Extract:
Extract:
Extract:
metrics: [{ label, value, max, category }]
timeseries: [{ date, metric, value }]
findings: [{ id, severity, category, effort, impact }]
relationships: [{ source, target, weight }]
Produce a radar chart with seven axes (one per system health dimension). Map statuses to numeric values for charting: ๐ข Strong = 3, ๐ก Functional = 2, ๐ Weak = 1, ๐ด Absent = 0.
Display axis labels using the status names, not numbers. The numeric mapping is internal for chart rendering only.
Colour coding:
Implementation: Use Chart.js radar chart in HTML, or SVG polygon construction.
Produce a donut chart showing the distribution of findings by severity.
Ring segments:
brand_secondary)#F59E0B)#D97706)brand_primary)brand_neutral)Centre text: Total finding count.
Implementation: Chart.js doughnut, or SVG arc paths.
Produce a line chart with time on the X axis and the metric on the Y axis. One line per metric being tracked.
Include:
Implementation: Chart.js line chart in HTML.
Produce a grid where:
Implementation: HTML table with CSS background colours, or SVG grid.
Produce a Mermaid flowchart showing component relationships:
graph TD
Button["Button (fan-in: 12)"]
Card["Card (fan-in: 8)"]
Modal["Modal (fan-in: 5)"]
Button --> Card
Button --> Modal
Card --> ProductCard["ProductCard"]
Card --> UserCard["UserCard"]
Colour nodes by health status if data is available. Use line thickness to indicate dependency weight.
Implementation: Mermaid.js syntax block.
Produce grouped bars showing before/after values for each metric. One group per metric (e.g., violations, critical count, coverage %).
Colour coding:
Include delta labels above each bar group: "โ 33%" or "โ 5%"
Implementation: Chart.js grouped bar chart in HTML.
Produce a scatter plot where:
Implementation: Chart.js scatter chart with quadrant overlays in HTML.
Combine multiple charts into a single HTML page with:
Implementation: Single self-contained HTML file with Chart.js loaded from CDN. No external dependencies beyond Chart.js. All data embedded inline.
The dashboard is a single HTML file. Structure:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>[System Name] โ Design System Health Dashboard</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<style>
/* Inline styles โ no external CSS */
/* Use CSS Grid for layout */
/* Responsive: 2 columns above 768px, 1 column below */
/* Cards with subtle shadows for key metrics */
/* Colour variables from config or defaults */
</style>
</head>
<body>
<header>
<!-- System name, date, overall health status badge -->
</header>
<section class="metrics-cards">
<!-- 3โ5 key metric summary cards -->
</section>
<section class="charts-grid">
<!-- Individual chart containers -->
</section>
<footer>
<p>Generated by Design System Ops โ visual-report</p>
<p>[Date]</p>
</footer>
<script>
// All chart configuration inline
// Data embedded as JS objects
// Chart.js instantiation for each chart
</script>
</body>
</html>
Each card shows:
Save the file to the configured output directory:
[output_directory]/[system-name]-dashboard-[YYYY-MM-DD].html
Save each chart as a separate SVG file:
[output_directory]/[chart-type]-[YYYY-MM-DD].svg
Output the Mermaid syntax block inline in the conversation (for embedding in markdown documentation).
Also output a text-based summary of what the visuals show, so the findings are accessible without viewing the visual output:
Dashboard generated: agds-dashboard-2026-03-09.html
What the visuals show:
- Health radar: Strongest in Tokens (๐ข Strong), weakest in Documentation (๐ Weak)
- Severity distribution: 12 findings โ 2 Critical, 4 High, 4 Medium, 2 Low
- Trend: Violations decreased 33% since January
- Coverage: Feedback token category has zero coverage across all tiers
- Priority: 3 findings in the "Quick wins" quadrant โ TA-04, NA-02, CA-11
After any audit completes, suggest: "Run visual-report to generate charts from these findings."
The diagnostic agent can chain visual-report after Phase 4 to auto-generate a dashboard from the full diagnostic output.
When generating a stakeholder brief, suggest: "Run visual-report first and attach the dashboard to the brief."
Load session history from memory files to produce trend lines across multiple runs.