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.
npx skills add imMamdouhaboammar/get-fable --skill datavizgit clone --depth 1 https://github.com/imMamdouhaboammar/get-fableWrote 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.
[](https://agentmods.dev/skills/immamdouhaboammar/get-fable/dataviz)<a href="https://agentmods.dev/skills/immamdouhaboammar/get-fable/dataviz"><img src="https://agentmods.dev/badge/skills/immamdouhaboammar/get-fable/dataviz/github.svg" alt="Measured on agentmods" height="20"></a>Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.
<a href="https://agentmods.dev/skills/immamdouhaboammar/get-fable/dataviz"><img src="https://agentmods.dev/badge/skills/immamdouhaboammar/get-fable/dataviz.svg" alt="Reviewed on agentmods" width="80" height="20"></a>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.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5.1 | $0.00021 | $0.01744 |
| Opus 5 | $0.00010 | $0.00872 |
| Sonnet 5 | $0.00004 | $0.00349 |
| Haiku 4.5 | $0.00002 | $0.00174 |
Grade A, and why
dataviz scanned grade A with 0 findings 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 12d 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.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
How it starts
The opening of the file, as written. The whole thing — 116 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Data Visualization
A chart is read by people and executed by you. This skill turns "make it look good" into a procedure with checks, so the result is right by construction rather than by taste.
The method here is design-system-agnostic. Nothing in the procedure, the form
heuristic, the six checks, or the mark specs is specific to one product. A design
system supplies a small set of parameters (its ramps, a categorical order, a
diverging pair, a status palette, a texture, its surfaces, its filter components);
the method consumes them unchanged. A validated default palette is the
reference instance, fully specified in references/palette.md. To target your
brand, read that file's structure and substitute its values — touch nothing else.
The single most important habit: the color part is computable, so compute it. Never eyeball whether a palette is colorblind-safe — run
scripts/validate_palette.js.
The procedure — do these in order
Color comes LAST. Most bad charts pick colors first.
- Pick the form. What is the data's job — magnitude, identity, polarity, a
single headline, change-over-time? The job picks the chart type, and sometimes
the answer is not a chart (a stat tile or hero number). →
references/choosing-a-form.md - Assign color by the job it does. Categorical (identity), sequential
(magnitude), diverging (polarity), or status (state) — each has one rule.
Assign categorical hues in fixed order, never cycled. →
references/color-formula.md - VALIDATE the palette — run the script, don't reason about ΔE.
node scripts/validate_palette.js "<hex,hex,…>" --mode light(relative to this skill's base directory — or load it as<script type="module">in the chart's own page, where it readsdata-paletteoff<body>and logs aconsole.tablereport). It returns pass/fail on the lightness band, chroma floor, adjacent-pair CVD separation, the normal-vision floor, and contrast. Fix anything that FAILs before continuing. Re-run for--mode darkwith that mode's surface. - Apply mark specs & spacers. Thin marks, 4px rounded data-ends anchored to
the baseline, 2px lines, ≥8px markers, a 2px surface gap between fills (stacked
segments and adjacent bars alike) and a 2px surface ring on overlapping marks,
selective direct labels. →
references/marks-and-anatomy.md - Add the hover layer — by default. An HTML/SVG chart is interactive; ship
a crosshair+tooltip on line/area and a per-mark hover tooltip on bar/dot/cell.
The only form that skips it is a bare stat tile with no plot. Hit targets bigger
than the mark; filters in one row above the charts. →
references/interaction.md - Final accessibility pass. For ≥ 2 series a legend is always present and ≤ 4 are also direct-labeled (a single series needs no legend box — the title names it), so identity is never color-alone; a table view exists; dark mode is selected — its own steps from the same ramps, validated against the dark surface, not an automatic flip; texture is available for the CVD/print/forced-colors case.
- Render it and look at it. The validator checks color, not layout — open or screenshot the output and eyeball it for label collisions, geometry, and overflow before calling it done.
What ships with it
9 files beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.
- references/anti-patterns.md 6.0 KB
- references/choosing-a-form.md 3.0 KB
- references/color-formula.md 8.0 KB
- references/components.md 2.1 KB
- references/interaction.md 3.7 KB
- references/marks-and-anatomy.md 5.9 KB
- references/palette.md 8.9 KB
- scripts/validate_palette.js 18 KB runs code
- scripts/validate_palette.py 16 KB runs code
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.
- 12d ago First seen · 116 lines · 21 tokens per session scan A 9836259d0d8b
dataviz is a skill published in the GitHub repository imMamdouhaboammar/get-fable (4 stars, last pushed today), licensed MIT. It adds 21 tokens to every session and 1,744 once invoked, about $0.0001 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-31.
Other skills, from other repositories
design-system
DESIGN.md integration for Forge — ensures visual consistency across all UI tasks through standardized design specifications.
html-artifacts
Author the HTML for a plan artifact, dashboard iframe, or Slack attachment — structure, design plan, available runtime, theming, and craft. Read this before writing HTML for saveplan, outputiframe, or slackattachhtml.
omh-accessibility-audit
This is a Hermes-native accessibility-audit workflow skill.
omh-design-quality-gate
This is a Hermes-native design-quality-gate workflow skill.
omh-apple-design
This is a Hermes-native apple-design workflow skill.
design-negotiation
Advocate for design quality, scope, and timeline with partners and leadership using evidence and shared goals. Use in the conversation itself. For the commercial vocabulary behind it, use business-design (ux-strategy).