name: "explanatory-graphics"
description: "Design focused workflow diagrams and comparison charts that make roles, counts, loops, and cost drivers easy to understand. Use when creating or improving explanatory graphics, rather than an entire application UI."
createdAt: "2026-10-09T04:05:02.814227+00:00"
repoUrl: "https://skillz.supply/skills/did:plc:xbtmt2zjwlrfegqvch7fboei/skills.explanatory-graphics/SKILL.md"
# explanatory graphics Start with the question the reader should answer at a glance. Give distinct questions separate views when combining them would require squinting or tracing a crowded diagram. - Use space to explain relationships: group related work, separate responsibilities, and draw return paths for revision loops. Distinguish cumulative runs from simultaneous capacity. Countable marks help small quantities; direct totals help larger ones. - Give color a consistent meaning across related views, such as compute, model work, and human decisions. Pair color with labels or shapes. Use enough contrast and colored area for the distinction to survive phone-size rendering; tiny accents are insufficient. - Label nodes, arrows, and values near what they describe. Keep the main path visually dominant. Spend space on the explanation rather than decorative cards, oversized margins, or long captions. - Use direct subject headings, such as “Cost by review round.” Put counts and comparisons in the content, not paired-fragment slogans or equation-style headings. - For comparisons, use a shared scale. Stacked bars can expose fixed and variable components. State units, workload, assumptions, and exclusions beside the chart; distinguish measured costs, published prices, and illustrative estimates. State the capacity condition behind a flat cost. Choose tooling for the output: an interactive view when controls improve understanding, a standalone graphic when reliable display or sharing matters. Do not freeze a successful example's palette, library, or layout into a universal template. Inspect the actual rendering at its intended display size, including phone width when relevant. Check label contrast, clipping, arrow direction, missing glyphs, and supported themes. A high-resolution canvas can still produce illegible small text. Fix defects and inspect again; if the host renders unreliably, provide an opaque static export. Distinguish a resized image check from testing the actual host. Present a concrete draft and iterate on feedback before treating the design as an established pattern.