Infographic

Give the reader a clear claim and a visible path to its evidence. Composition must clarify the relationship, not make weak evidence look certain.

Callable catalog skills are listed in frontmatter metadata.invokes (and related_skills for discovery). Load a companion skill when its when line matches the task. This skill still owns evidence, layout, and delivery.

Start with surface router when the deliverable could be a poster, deck, cover, social package, or declarative DSL export.

Planning flow: design spec workflow → layout types → design specification template. Long sources also use structured content and project artifacts.

Define and source the claim

Read the supplied material and existing brand guidance. Record the reader, bounded takeaway, surface, final reading size and output paths in the brief. Infer routine choices and proceed within the task. Ask only when a missing fact changes the claim. Keep project assets outside this installed skill.

Read evidence before designing. Record source locators, dates or revisions, transforms, uncertainty and reuse rights. Separate sourced facts, reproducible measurements, editorial inference, unknowns and synthetic examples. Put important limits beside the claim in the artifact. An unsupported factual claim must be corrected, sourced or marked unknown before factual delivery. Missing records do not mean zero or absence. association does not prove cause. Verify time-sensitive facts from current primary sources when available and disclose inaccessible evidence.

Use synthetic values only for a requested mockup, visibly labeled in the asset. A model-generated chart, quote, screenshot or plausible curve is not evidence. Use real captures for product claims, retaining state and capture context. Generated illustration can explain a metaphor. Keep factual marks, exact text and numbers in deterministic editable layers.

Choose the visual relationship

Choose a dominant relationship before styling. Comparable values need a common frame. Dates need honest spacing or an explicit categorical sequence. Links and spatial position need defined meanings. Explain the reading order and layout briefly, then build. A local preview is a review artifact, not an automatic permission gate.

Compute chart geometry from retained data and transformations. Check units, period, population, denominator, missing values, totals, rounding and uncertainty. Bars use a zero baseline. Area encodings scale area rather than radius. Preserve comparison scales across related panels. Keep raw and derived data distinct, and do not invent confidence intervals or missing values.

Compose and produce

Reuse the project's fonts, semantic colors, and design tokens when the repo defines them. A single graphic can use a small local style. Keep copy plain and exact: preserve citations, quantities, units and uncertainty in labels and captions.

Build exact charts and labels with editable SVG, HTML, a plotting tool or an appropriate layout source. Keep its data and generator. Use existing local tools first. Follow the format guide and installed tool help. Do not depend on a remote renderer or guess helper APIs. Report the exact missing dependency, blocked export and check that could not run. Preserve useful source and accessible text. Do not upload private material as an automatic fallback.

Recompose each requested aspect ratio instead of stretching it. Keep caveats and sources attached when panels reflow or a carousel page is shared alone. Verify current platform limits before claiming compliance. A familiar aspect ratio alone proves nothing about current upload rules.

Check and deliver

Run the review against the actual source and delivered file. First repair claims, calculations and inaccessible essential information. Then refine the layout. Inspect at the expected feed width, presentation distance or physical print size. For web, check narrow layouts, zoom and keyboard/touch access to interactive detail. Use measured contrast evidence before claiming a contrast pass. Supply labels or patterns alongside hue and an accessible description or data table.

For motion, keep every claim and caveat available in a complete still. Follow sequenced infographic choreography for tier order, pacing, and final hold. Declare step order and timing, avoid rapid flashes, and inspect the encoded first/final frames and meaningful steps. Test reduced motion in SVG/HTML and provide controls for long or interactive playback. Pair animated SVG with a still. Motion cannot be the only way to read a fact. Do not ship MP4 or GIF as the primary deliverable from this skill.

Inspect the exact exports: SVG structure and live text, PNG dimensions and background, PDF page size and fonts, or the actual native source in its editor where relevant. A parser pass cannot prove visual quality or editor behavior. After repairs, regenerate and inspect the affected file. For compression, preserve originals and compare bytes and readability.

Deliver editable source, data and generator where used, requested exports, accessible text, the source/transform ledger and a receipt listing dimensions, versions, render commands, checks run and remaining limits. Report critique findings as observed problems with concrete fixes, not invented quality scores. Keep delivery local unless publication was requested. An authorized publishing flow receives the exact asset, copy, alt text and destination for its own checks. When copy ships with the image, run publishing gate and publication boundaries.

Tools and examples

• scripts/render_bars.py INPUT.json OUTPUT.svg builds an original zero-baseline bar figure with sources and a text equivalent. It supports nonnegative comparable values only. Use it for that chart, not as a template for every infographic.
• scripts/png_from_svg.py INPUT.svg OUTPUT.png --width 1200 rasterizes a layout or bar SVG with local rsvg-convert.
• scripts/export_figure.py png|png-strict|mermaid-theme|mermaid-svg|themes delegates themed Mermaid and strict static SVG checks to optional export scripts when LEVISTACK_DIAGRAM_SCRIPTS or the default sibling path is set. scripts/sibling_diagram.py resolves that path.
• scripts/image_generate.py loads infographic.prefs.json / infographic.extend.md, lists raster backends, resolves preferred_raster_backend, and calls image APIs when keys are set. Use agent-native when the host should call its own image tool. See raster Python.
• scripts/build_animated_svg.py INPUT.json OUTPUT.svg writes a self-contained sequenced infographic with CSS keyframes and prefers-reduced-motion. See animated SVG sequenced and UPSTREAM.md.
• evals/sample-bars.json is visibly synthetic sample data. evals/cases.json covers research, archival, timeline, chart, screenshot, carousel and critique requests, plus boundary cases.
• examples/cfo-capacity/brief.md is a fictional worked campaign brief (convergence layout, optional technical figure).
• references/prompt-recipes.md lists starter prompts. agents/openai.yaml and agents/README.md package the default prompt for agent hosts.

Run python3 -m unittest discover -s <infographic-skill>/scripts -p 'test_*.py' for checks in scripts/test_render_bars.py, scripts/test_export_figure.py, scripts/test_image_generate.py, and scripts/test_build_animated_svg.py. Exercise the request cases against the selected workflow and record observed checks separately from pending tool checks.