← get-fableCONTENT HISTORY

Update to get-fable

Snapshot Sep 30, 2026 · 23:14 UTC · version 1.5.1

Collection source: not recorded for this historical snapshot.

WHAT CHANGED · RULE-BASED ANALYSIS

First saved snapshot

No earlier snapshot is available to establish a change.

Compare saved observations

Download comparison JSON
Full technical diff · 0 changed fields
Full snapshot data
{
  "description": "Design and generate accessible, cohesive data visualizations, SVG charts, metric cards, and dashboard tiles with theme-adaptive styling and verified viewports. Use when creating SVG charts, rendering metrics plots, designing dashboard visuals, or visualizing performance trends — even if the user does not explicitly say \"fable-dataviz\" (e.g. \"make a chart of this data\", \"plot these benchmarks\", \"create an SVG graph\", \"visualize these metrics\"). Do NOT use for non-visual text-only data summaries or generic code edits.",
  "included_files": [
    {
      "relative_path": "agents/openai.yaml",
      "size_in_bytes": 385
    },
    {
      "relative_path": "evals/scenarios.json",
      "size_in_bytes": 3798
    },
    {
      "relative_path": "examples/render-bar-chart.md",
      "size_in_bytes": 459
    },
    {
      "relative_path": "references/dataviz-design-system.md",
      "size_in_bytes": 2329
    },
    {
      "relative_path": "references/truthful-chart-selection-and-validation.md",
      "size_in_bytes": 2912
    },
    {
      "relative_path": "skill.package.json",
      "size_in_bytes": 452
    },
    {
      "relative_path": "templates/svg-chart.template.md",
      "size_in_bytes": 1395
    }
  ],
  "name": "fable-dataviz",
  "skill_md_contents": "---\nname: fable-dataviz\ndescription: \"Design and generate accessible, cohesive data visualizations, SVG charts, metric cards, and dashboard tiles with theme-adaptive styling and verified viewports. Use when creating SVG charts, rendering metrics plots, designing dashboard visuals, or visualizing performance trends — even if the user does not explicitly say \\\"fable-dataviz\\\" (e.g. \\\"make a chart of this data\\\", \\\"plot these benchmarks\\\", \\\"create an SVG graph\\\", \\\"visualize these metrics\\\"). Do NOT use for non-visual text-only data summaries or generic code edits.\"\nversion: 1.3.0\npack: system\ninputs:\n  - data_source\nrequires:\n  - metric_specs\nproduces:\n  - visualization_artifact\n  - svg_chart\ngates:\n  - theme_contrast_valid\n  - viewbox_defined\nfallback: fable-execute\nmutatesWorkspace: true\nparallelSafe: true\nneural_links:\n  precursors:\n    - fable-discover\n  continuations:\n    - fable-artifact\n    - fable-run\n    - fable-verify\n  lateral_peers:\n    - fable-artifact\n  recovery: fable-recover\n---\n\n# Fable DataViz\n\nTurn data into a visual claim that is easy to read **without changing what the data actually says**.\n\n## Mission\nA chart is an argument about magnitude, trend, distribution, relationship, uncertainty, or composition. The first job is to choose a visual encoding that matches that question. The second is to preserve statistical meaning. Styling comes after both.\n\nA valid SVG with attractive colors can still be a bad visualization if it truncates axes deceptively, aggregates incompatible groups, hides missing data, implies causality from correlation, or invents precision the source does not support.\n\n## Activate When\n- a metric/trend/distribution/comparison/relationship needs visual explanation;\n- benchmark/eval results need charts or stat graphics;\n- a report/artifact needs an evidence-backed visual;\n- raw data must be transformed into SVG/chart code or a visual specification.\n\n## Do Not Activate When\n- there is no actual data and the request would require inventing values;\n- a plain table is more accurate/readable for a small lookup task;\n- the core task is document structure rather than visual encoding (`fable-artifact`);\n- the user requests an illustrative image rather than a data visualization.\n\n## Question Classification\n| Question | Useful first encoding | Typical misuse |\n| --- | --- | --- |\n| Compare categories | bar/dot plot | pie with many similar slices |\n| Trend over ordered time | line/area with careful baseline | unordered category line chart |\n| Distribution | histogram/box/violin/dot | average-only bar |\n| Relationship | scatter/bubble with scale caveats | dual-axis correlation theater |\n| Part-to-whole | stacked bar/100% bar; limited pie | sum components that are not one whole |\n| Ranking | sorted bar/dot | alphabetic order hiding rank |\n| Single KPI + context | stat + baseline/change | giant number without denominator/timeframe |\n| Uncertainty | interval/band/error bars | precise point with hidden variance |\n\n## Protocol\n### Stage 1 — Establish data provenance and semantic contract\nRecord:\n- source/dataset/version/time window;\n- unit and denominator;\n- category/time definitions;\n- missing/null semantics;\n- whether values are counts, rates, percentages, currency, estimates, or modeled outputs;\n- uncertainty/precision available.\n\nIf source or metric meaning is ambiguous, stop and resolve it before rendering.\n\n### Stage 2 — State the visual question\nWrite one sentence: `This chart should help the reader see ___`.\n\nIf there are multiple unrelated questions, create separate views rather than forcing one overloaded chart.\n\n### Stage 3 — Validate transformations\nBefore plotting, explicitly define:\n- filters;\n- grouping/aggregation;\n- normalization/denominator;\n- sorting;\n- date bucketing/time zone;\n- handling of missing/outliers;\n- derived metrics/calculations.\n\nCheck totals/ranges before and after transformation. Never silently drop records that change the claim.\n\n### Stage 4 — Choose encoding and scales\nUse position/length for precise comparisons where possible. Choose linear/log/percentage scales based on metric semantics.\n\nBaseline rules:\n- bar length usually needs meaningful zero because length encodes magnitude;\n- line/scatter axes may use non-zero domains if clearly labeled and not exaggerating the story;\n- log scales require positive values and explicit labeling;\n- dual axes are high-risk and need strong justification.\n\n### Stage 5 — Encode uncertainty and data quality\nIf estimates have intervals/variance/sample sizes, show or state them when material. Mark missing periods/categories rather than connecting them as if observed.\n\nDo not show more decimal places than source precision justifies.\n\n### Stage 6 — Design for reading and accessibility\nPrioritize:\n- descriptive title stating metric/context;\n- direct labels where they reduce legend decoding;\n- readable typography/spacing;\n- contrast and non-color cues;\n- accessible title/description for SVG;\n- responsive `viewBox`/appropriate container behavior;\n- units and source note.\n\nDo not rely on red/green or hue alone for meaning.\n\n### Stage 7 — Validate the rendered artifact\nCheck:\n- chart renders without clipping/overlap;\n- data coordinates match source values;\n- axes/ticks/labels/legend are correct;\n- small/large screens when responsive;\n- light/dark theme if required;\n- accessibility metadata;\n- no transformation/render code silently changes ordering or values.\n\n### Stage 8 — Run a deception audit\nAsk:\n- would a reasonable reader infer a larger/smaller effect than raw data supports?\n- is the denominator/time window obvious?\n- are missing values hidden?\n- does annotation imply causality not established?\n- are categories incomparable due to different bases?\n\nFix the visual claim, not only the pixels.\n\n## Decision Rules\n- Never invent data, labels, sample sizes, sources, or benchmark results.\n- A percentage without denominator/base often needs contextualization before visualization.\n- Avoid pie/donut when readers need precise comparison or categories are numerous.\n- Do not downsample by simply dropping points when extrema/events matter; use a documented aggregation/sampling strategy.\n- Missing values are not zero unless the domain explicitly defines them that way.\n- Sort categories to support the question unless natural/order semantics require otherwise.\n- Use zero baseline for bars by default; exceptions require an encoding where truncation is not misleading and must remain visible.\n- Correlation chart/temporal coincidence does not justify causal annotation.\n- If a chart cannot remain legible at target size, simplify/segment rather than shrink labels into illegibility.\n\n## Invariants\n- Every plotted mark maps to source/transformation logic.\n- Units, denominator, and timeframe remain truthful.\n- Missing/uncertain data is not silently converted into certainty.\n- Scale choices do not intentionally exaggerate magnitude.\n- Accessibility does not depend on color alone.\n- Rendered output can be traced back to source data and transformation steps.\n\n## Failure Taxonomy\n### Wrong chart question\nEncoding answers composition while reader needs precise comparison. Re-select chart by analytical question.\n\n### Aggregation distortion\nGrouping/normalization changes denominator or hides important subgroup behavior. Recompute and document transformation.\n\n### Scale deception\nAxis/domain makes modest changes look extreme. Restore appropriate baseline/domain and labels.\n\n### Missing-data fiction\nNull periods are plotted as zero/interpolated without justification. Mark gaps or document imputation.\n\n### Overplotting/crowding\nMarks/labels overlap and conceal distribution. Aggregate, facet, sample responsibly, or change encoding.\n\n### Accessibility failure\nContrast/color-only meaning/text size prevents interpretation. Add non-color cues/direct labels/accessible metadata.\n\n### Source uncertainty\nMetric meaning or provenance is unclear. Stop rendering and resolve source contract.\n\n## Anti-Patterns\n- starting with \"make it a donut\" before understanding the question;\n- truncating bar axes to dramatize change;\n- dual axes used to manufacture correlation;\n- treating missing values as zero;\n- inventing sample data to make the chart look complete;\n- downsampling away spikes without disclosure;\n- 3D/perspective effects that distort area/length;\n- rainbow palettes with no semantic reason;\n- title like \"Revenue\" with no unit/timeframe;\n- declaring a chart verified because SVG syntax parses.\n\n## Visualization Packet\n```text\nQuestion / intended takeaway:\nSource + version/timeframe:\nMetric definition / unit / denominator:\nTransformations:\nMissing/outlier/uncertainty handling:\nEncoding + scale rationale:\nAccessibility choices:\nRendered validation:\nDeception audit:\nSource note:\n```\n\n## Completion Criteria\nVisualization completes when:\n- visual question and metric semantics are explicit;\n- transformations are reproducible and totals/ranges checked;\n- encoding/scale match the analytical task without distortion;\n- missing/uncertain data is honest;\n- artifact renders accessibly at target size/theme;\n- source/data-to-mark traceability exists;\n- no claim exceeds what the data supports.\n\n## Progressive Resources\n- Deep guide: `references/truthful-chart-selection-and-validation.md`\n- Existing design system: `references/dataviz-design-system.md`\n- Example: `examples/render-bar-chart.md`\n"
}

SHA-256 of public snapshot: 513e4b9da89a42a46f1085135ab1a9ac06fbe30c97efc7dee9c65bdeb03d9b2b