Infographic
Build a real information graphic from data or a document — full-scale, text-dense, client-grade. Routes between an HTML render path and a raster path, and checks the result with five scripts that print numbers instead of adjectives. Every cap is measured: 25 published infographics and 8 controlled render tests. Those tests found that the field's stated reason for avoiding image models is out of date — text stays correctly spelled to 20 labels; what breaks at 8 is which labels appear at all. So the raster path is capped at 6 and verified by an exact set comparison on the rendered image, not by a legibility judgement. GUIDANCE-ONLY: the agent's own LLM composes the work from the bundled references, recipes, registry and learnings.
Every infographic skill in this space states the same six load-bearing rules as prose, and not one of them checks any of it. This one ships 5 scripts that report numbers you cannot argue with: whether every rendered word traces back to your source, whether the copy fits the canvas you chose, whether the layout sits inside its measured density caps, whether the export actually rendered, and a design grade with a concept veto that catches a filled-in template. The caps are not inherited. I measured 25 published information graphics and ran 8 controlled image renders, and that work overturned the assumption the category rests on. The field says image models garble dense text, so render from code. Spelling was in fact perfect up to 20 labels. What fails, from 8, is the label set: words dropped, duplicated, or attached to the wrong picture. A spellcheck passes that graphic while it is quietly missing one of your facts. So the router splits on a measured line, the image path stops at 6 labels and refuses above 16, and the check compares the requested label set against the rendered image. Composes with @di-atomic/media-generator to render.
Features5
Splits on a measured line: image path to 6 labels, refuses above 16.
Names every dropped, duplicated and mis-bound label in the rendered image.
Reads limits off the active canvas; no global word rule, no silent default.
Lists each unsourced claim with its nearest match in your source.
Ships canvases, sections, styles and elements, each tagged measured or thin.
Videos1 video
DemoInfographic · Demo video
Demo · SpiderMediaArticles about Infographic2 articles
Perfect spelling at 20 labels. Missing facts at 8.
opvs.ai10 Aug 2026Perfect spelling at 20 labels. Missing facts at 8.
Every infographic skill justifies rendering from code the same way: image models garble dense text. I ran eight controlled renders. Spelling was perfect through twenty labels. What breaks at eight is which labels appear at all, and a spellcheck passes that graphic while it is quietly missing one of your facts.
Videos1 video
DemoInfographic · Demo video
Demo · SpiderMediaArticles about Infographic2 articles
Showing all 2
SKILL.mdthe file your agent reads
SKILL.md loads when you open this tab.
What's new4 releases · newest first · from the package's CHANGELOG
v0.2.12026-11-09Latest
Marketplace listing update: added the launch explainer film (`media.demo_video_url`). No code, schema, copy or guidance changes; hero and screenshots unchanged from 0.2.0.
v0.2.02026-08-22
Registry addition. The router, the five scripts and every existing registry item behave exactly as in 0.1.x — all 7 test fixtures return byte-identical verdicts. ### Added - **`style/hand-drawn-html`** — the sketch register on the HTML path. Marker display face, handwriting body, irregular drawn box edges, highlighter underline, grained off-white paper. Token-based, `render_path: ["html"]`, no label ceiling. - **`learnings/2026-08-22-a-hand-built-style-disables-check-c/`**. - **`registry/style-hand-drawn-html/SKETCHY.md`** — an opt-in SVG displacement filter (`feTurbulence` + `feDisplacementMap`) that wobbles box edges into real drawn strokes. Adapted with attribution from `cathrynlavery/diagram-design` (MIT, commit `da45d4a`), which was evaluated as a merge candidate and rejected as one: it is a diagram skill budgeting **9 nodes maximum**, where a normal artifact here runs to 88 text nodes, and it ships no contrast mathematics at all. Complementary, not superior — installed alongside, not absorbed. Its filter-shapes-not-text rule is stated upstream as a binary. On an HTML canvas — where text is a *child* of the filtered box rather than an SVG sibling — we measured it as a **threshold**: the naive construction holds to `scale 3`, degrades visibly at **4** (baseline waves, digits drift) and breaks at **6** (glyphs skew, digits fall off the baseline). The shell-layer construction we derived keeps text crisp at every scale tested, so the ceiling disappears for three CSS rules. Verified against a 5-point render sweep. ### Why `style/hand-drawn-marker` is raster-only and hard-capped at 6 labels. The cap is correct — it comes from 8 controlled renders — but it made the sketch register **unselectable for any real information graphic**, because real ones exceed 6 labels. On 2026-08-22 a live client run wanted that register, could not select it, and hand-built the look in CSS instead. At which point `verify-density-caps` check C returned **UNCHECKED**: it resolves the style by name against the registry, and there was no item to resolve. The summary line still printed `RESULT: PASS`. A registry gap on one path had turned into an unmeasured artifact on the other. Against that same spec, check C now returns `PASS · html ∈ [html]` with **zero unchecked**, and returns `FAIL` when the style is selected on the raster path. ### Changed - `style/hand-drawn-marker` now names its HTML counterpart in its description, tags and prompt, so the next session finds the pair instead of a dead end. Two entries, two render paths, one look — still no style declaring both. - `references/style-system.md` — 25 styles / 17 HTML; the pairing rule; a gotcha stating that hand-building an unregistered style silently disables check C. - `references/render-path-routing.md` — the "warm and hand-made, here are 14 stats" ambiguity now routes to `hand-drawn-html` and is **served** rather than argued down, which is what the gap was costing. ### Contrast recomputed, not inherited The reference build is the source of the look, not of the values. Two of its colours did not survive measurement: - Rule-gold `#C9A227` measured **2.22:1** on paper — below WCAG 1.4.11's 3:1 floor for graphical objects. Ships as `#A6841A` at **3.25:1**. - Marker yellow `#EEBF01` measures **1.59:1** as text and is restricted to ground-only use, where ink on it measures **10.02:1**. ### Declared limitations - Evidence is **`MEASURED (n=1)`** — one rendered, gate-verified build, not the 25-artifact corpus. The item says so on its face. `c90` was not captured on that build, so `expected_c90_range` is the token-based regime default and is **unconfirmed for this style**. - **Two families, not three.** The reference used a third, IBM Plex Mono, for file trees and script names. `grade-design.py` penalises `font_families != 2` by 3 points globally, so the mono is not in this token set. Mono-native content should choose `technical-brief` or `editorial-mono`. Whether a content-class monospace should count as a decorative family is carded separately. - **`RESULT: PASS` still rolls up over `UNCHECKED`.** Not fixed here. The same run also had all 7 sections unregistered, so check B measured 0 of 7 and also printed PASS. Both are changes to how the summary computes its verdict and deserve their own evidence, not a rider on a registry addition. ---
v0.1.12026-08-10
Propagation release. No behaviour change: the router, the registry, the references and all five scripts are byte-identical to 0.1.0. ### Added - Marketplace card asset kit. `media.hero_image_url` plus four 3:2 screenshot panels (peer chain, the router fork, the ASKED-vs-DREW set comparison, and the canvas copy caps), rendered in the Di-Atomic dark-board chalk house style. ### Changed - `marketing.long_description` tightened to the SPEC-3 card band (194 words, first person, 7 numbers) and `marketing.features[]` reduced from 7 long entries to 5 verb-led lines of 90 characters or less, so the card renders without truncation. ---
v0.1.02026-08-10
First release. ### Added - **The router.** Two render paths — HTML and raster — with a measured routing rule. No other tool in this space routes between them; the mechanism that makes it safe is a `render_path` field on every style, checked at selection time rather than trusted. - **Five verification scripts**, one concern each: `verify-source-fidelity.mjs` · `verify-copy-density.mjs` · `verify-density-caps.mjs` · `verify-render.py` · `grade-design.py`. All exit 0. They report; they do not gate. - **59 registry items** — 4 canvases, 21 sections, 24 styles (16 HTML-path, 8 raster-path), 10 elements. Every cap carries an evidence tag. - **14 references**, 4 recipes, 13 learnings, `AGENTS.md` + `DEPLOYMENT.md`. - **Evals** — 24 trigger cases including 12 negatives, 8 output cases with literally checkable assertions. - Multilingual support across EN / DE / HE / RU / RO / FR / ES, with word counts reported alongside grapheme counts. ### The measurement that set the design 25 published information graphics measured for structure, plus 8 controlled image renders varying only label count. **The field's stated reason for avoiding image models turned out to be measuring the wrong failure.** Spelling held perfectly through 20 labels and first garbled at 24. What breaks — at 8 labels, three times earlier — is the label *set*: dropped, duplicated, mis-bound to the wrong icon, or icons rendered bare. A legibility check passes an artifact that is missing one of the user's facts. So the raster-path check is an **exact set comparison performed on the rendered image**, the ceiling is **6 labels**, and above 16 the path is refused outright because the model saturates there and discards the surplus silently. Two further findings shaped the build: - **Copy caps are per-canvas and per-atom, not global.** A 14-word body cap is correct on a dense canvas and rejects a real, nationally distributed public-health poster whose bullets run 25-45 words. `verify-copy-density.mjs` therefore contains no cap table and reads caps from the active canvas item. - **Effective palette size predicts the render path from the output.** It partitions all 25 artifacts into three non-overlapping regimes, corroborated independently by background fraction. That makes render-path agreement checkable *after* the fact, not only at selection. ### Known limitations, declared - Commercial marketing infographics are 4 of 25 measured artifacts, three of them business diagrams. Not closable from open sources — copyrighted and WAF-protected. The `THIN`-evidence section items cluster here. - Render tests: one model, English only, one aspect ratio, one sample per point (two at the failure point). Failure floors, not a curve. The ceiling is per-backend and re-measurable. - Multilingual is the thinnest evidence: 2 of 25 artifacts, 0 render tests. - `c90` false positive: a single large embedded photograph inflates effective palette size without the build being illustration-dominant. Mitigation specified, not implemented. - No hybrid path (illustrated hero + HTML data sections, composited). - `verify-render.py` requires Playwright and reports NOT VERIFIED rather than passing without it; ink-fraction measurement additionally needs Pillow. ### Provenance Four skills in this space were read during design. **Zero files were copied.** Two of the four ship no licence at all and were treated as read-only; the other two are MIT. Everything in this bundle is re-derived from our own measurements or from cited public standards — and the pack's headline findings contradict the prior art rather than restate it. Details in `source/ATTRIBUTION.md`. No exemplar image ships in this bundle or as a marketplace asset. Structure was measured; artwork was not reproduced.
Showing all 4
