visual-report

visual-report is a skill for Claude Code, Codex from murphytrueman/design-system-ops. It costs 156 tokens per session (2,960 once invoked), scanned C, original, MIT.

A tool that turns existing design-system findings, session history, or health data into charts, dashboards, and diagrams. A design system is the shared set of interface styles and reusable components used across a product.

In plain words
What is it for?
It produces interactive HTML dashboards, SVG charts, or Mermaid diagrams for reports and presentations. It is for showing design-system health and audit results visually.
Why use it?
It makes patterns in written reports easier to see, such as weak areas, changes over time, or how components depend on one another. It does not run audits or create new findings.

Skill for Claude CodeCodex

Part of the design-system-ops plugin — 40 skills, 14 commands shipped together

Install

Getting it into your agent

One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.

agentmods
npx agentmods add skills/murphytrueman/design-system-ops/visual-report
Any agent
npx skills add murphytrueman/design-system-ops --skill visual-report
Clone the repo
git clone --depth 1 https://github.com/murphytrueman/design-system-ops

Made for: Claude Code, Codex.

Or install design-system-ops, the plugin that ships this one along with the rest of its 40 skills, 14 commands.

Wrote this? Show the measurements

A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.

agentmods badge for visual-report

README.md
[![agentmods](https://agentmods.dev/badge/skills/murphytrueman/design-system-ops/visual-report.svg)](https://agentmods.dev/skills/murphytrueman/design-system-ops/visual-report)
Your own site
<a href="https://agentmods.dev/skills/murphytrueman/design-system-ops/visual-report"><img src="https://agentmods.dev/badge/skills/murphytrueman/design-system-ops/visual-report.svg" alt="Measured on agentmods" height="20"></a>
Per session 156 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 2,960 The whole file, excluding the scripts and references it only reads on demand.
Security scan C 1 finding. Scan, not verified.
Origin original No closer match found in the catalogue.
Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

ModelPer sessionOnce invoked
Fable 5 $0.00156 $0.02960
Opus 5 $0.00078 $0.01480
Sonnet 5 $0.00031 $0.00592
Haiku 4.5 $0.00016 $0.00296

Measured 4d ago against content hash e56a5ff87d68, method: parsed. Prices are Anthropic first-party input rates as of 2026-08-30, from the pricing page.

Security

Grade C, and why

visual-report scanned grade C with 1 finding against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 4d ago.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Hidden instructionshighPrompt injection

Directives inside HTML comments, invisible characters or bidirectional overrides are read by the model and not by the person reviewing the file.

<!-- System name, date, overall health status badge -->
skills/visual-report/SKILL.md · 353 lines

How it starts

The opening of the file, as written. The whole thing — 353 lines — stays where its author put it; the contents beside it link to each section on GitHub.

Visual Report

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.


Why this exists

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.

Boundaries

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.


Configuration

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"

Read the full file on GitHub · 353 lines

Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

  1. 4d ago First seen · 353 lines · 156 tokens per session scan C e56a5ff87d68

Subscribe to this mod's changes

visual-report is a skill published in the GitHub repository murphytrueman/design-system-ops (174 stars, last pushed 12d ago), licensed MIT. It adds 156 tokens to every session and 2,960 once invoked, about $0.0008 per session on Opus 5. A static security scan graded it C with 1 finding (hidden instructions). No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-30.

Related

Other skills, from other repositories

extract-design

Extract the full design language from any website URL. Produces 8 output files including AI-optimized markdown, visual HTML preview, Tailwind config, React theme, shadcn/ui theme, Figma variables, W3C design tokens, and CSS variables. Also runs WCAG accessibility scoring. Use when user says 'extract design', 'get…

Manavarya09/design-extract · 98 tokens

designlang-tokens

Use when styling UI for cal.com — references the extracted design system tokens instead of inventing colors, spacing, or typography.

Manavarya09/design-extract · 30 tokens

roast-my-design-system

Roast the current repo's design system with real data. Runs a deterministic scanner (no tokens, 1s) that counts everything that betrays a design system, from colours and their near-identical twins to greys, spacing values, typefaces, duplicated and never-imported components, inline styles, !important and arbitrary…

gregkozakiewicz/roast-my-design-system · 161 tokens

design-engineering

Premium design engineering skill for agentic workflows — produces high-end, distinctive UI designs using DESIGN.md as the portable contract across Pencil MCP (in-IDE canvas), Figma MCP (team handoff + design tokens), and Google Stitch (vibe exploration + AI generation). Enforces anti-generic principles, WCAG 2.2 AA…

broomva/skills · 231 tokens

generate-figma-screen

Kod veya açıklamadan Figma'da tam ekran/sayfa oluşturur. Yayınlanmış design system bileşenlerini arayıp instance olarak yerleştirir; hardcode değer yerine DS token'larını kullanır. "Figma'da ekran oluştur", "kodu Figma'ya çevir", "landing page çiz", "ekran tasarla", "generate screen", "UI'ı Figma'ya aktar"…

atezer/FMCP · 118 tokens

figma-a11y-audit

Figma ekranını erişilebilirlik açısından denetler. Renk kontrastı (WCAG AA/AAA), minimum dokunma hedefi, fokus sırası, metin boyutu ve platform-bazlı ekran okuyucu önerileri (VoiceOver, TalkBack, ARIA) üretir. "a11y audit", "erişilebilirlik kontrol", "kontrast kontrol", "accessibility check", "ekran okuyucu spec"…

atezer/FMCP · 124 tokens