Update to Moda - Slides & Designs

{
  "description": "Data charts on Moda from real data — CSV, a table, pasted numbers: bar, line, area, pie, scatter, combo; an editable chart on a live canvas, exported png or pdf. Use for: \"chart/graph/plot this data\", \"visualize these numbers\". NOT: a chart inside an artifact another moda skill is building — the building skill keeps it; boxes-and-arrows or quadrants → moda-diagram.",
  "included_files": [
    {
      "relative_path": "references/brand.md",
      "size_in_bytes": 15284
    },
    {
      "relative_path": "references/charts.md",
      "size_in_bytes": 5659
    },
    {
      "relative_path": "references/design-quality.md",
      "size_in_bytes": 22265
    },
    {
      "relative_path": "references/edit-code.md",
      "size_in_bytes": 16488
    },
    {
      "relative_path": "references/export.md",
      "size_in_bytes": 7949
    },
    {
      "relative_path": "references/gotchas.md",
      "size_in_bytes": 8693
    },
    {
      "relative_path": "references/markup.md",
      "size_in_bytes": 23958
    },
    {
      "relative_path": "references/omni-and-media.md",
      "size_in_bytes": 7338
    },
    {
      "relative_path": "references/reading-and-verifying.md",
      "size_in_bytes": 21129
    }
  ],
  "name": "moda-chart",
  "skill_md_contents": "---\nname: moda-chart\ndescription: >-\n  Data charts on Moda from real data — CSV, a table, pasted numbers: bar,\n  line, area, pie, scatter, combo; an editable chart on a live canvas,\n  exported png or pdf. Use for: \"chart/graph/plot this data\", \"visualize these\n  numbers\". NOT: a chart inside an artifact another moda skill is building —\n  the building skill keeps it; boxes-and-arrows or quadrants → moda-diagram.\n---\n\n# moda-chart\n\n**PREREQUISITE — `load_skill(\"moda-core\")` once per session** (step-0, write\ncontract, free/metered map). Already loaded? Skip ahead. If you cannot load\nit, the non-negotiables: call `moda_bootstrap` before anything; `brand_list`\nbefore creating; revision-guarded writes use `expected_revision` from your last read.\n`canvas_edit_image` captures its own target state and has no revision argument.\nOn `stale_revision`, re-read and retry once; send the canvas link\nthe moment it exists; stuck or failed? `ask_expert(\"<question>\")` — free and\nfast, never guess.\n\n## Get the data and the form right first\n\n- **Read the real numbers before choosing a form.** A CSV, a pasted table, a\n  spreadsheet in the drive (`file_search`, then `file_read` it): parse it, then\n  restate the series and units back to the user in one line.\n- **Form follows the question**: change over time → line or area; comparison\n  across categories → bar (horizontal when labels are long); part-of-whole\n  with ≤6 slices → pie or donut, otherwise a bar; correlation → scatter; two\n  units on one picture → combo with `dual-axis`.\n- **Not a chart**: a 2×2, quadrant, or market map is positioned shapes →\n  load moda-diagram. Boxes and arrows → moda-diagram. A shape a chart cannot\n  express (waterfall, funnel, heatmap) is built from primitives — stay here\n  and compose it, referencing references/charts.md for what `<chart>` does.\n- **A chart inside something else stays with the builder.** If a deck,\n  document, mockup, site, or social piece is being built, that skill authors\n  its own chart in place — this skill owns the standalone chart.\n\n## Workflow\n\n1. **Create + link**: `canvas_create(name='…', intent='Q3 revenue by region',\n   width=1600, height=1000, category='diagram')`. Size the canvas to the\n   chart's job: a chart handed to a person full-screen wants room; one headed\n   for a document wants the document's proportions. Send the link at once.\n2. **Author one `<chart>` element** with `canvas_apply_markup(canvas_ref,\n   page, markup)`. Authoring mechanics — data columns, series, per-type\n   attributes, chrome — live in references/charts.md; read it before writing\n   markup. Brand kit in play → `brand_show` and pass its palette\n   (`palette=\"…\"` for multi-series, `color` for single).\n3. **Set the type sizes explicitly** — see the legibility note below.\n4. **Verify**: `canvas_screenshot` and LOOK at the axis labels, the\n   legend, and the value labels at the size the user will actually see. A\n   chart whose labels only read when zoomed in is a failed chart.\n5. **Deliver**: the live link first — the chart stays editable, and a\n   teammate can restyle it. Export on format words or one accepted offer:\n   `export(canvas_ref, format='png', pixel_ratio=2)` (pdf when it is headed\n   into a document).\n\n## Legibility — auto-scaled, with one resize gotcha\n\n`<chart>` typography auto-scales with the chart's own size: omit the\ntypography attributes and the base `font-size` derives from\n`min(width, height)` — 12px at 400×300, ~18px at 800×450, capped at 30px on\na full deck slide — with `title-size`, `subtitle-size`, `value-label-size`,\nand legend sizing scaling alongside. A deck-scale chart is legible out of the\nbox; set `font-size` (or any sibling) explicitly only when you want a\nspecific size — an explicit value wins for that field while the others keep\nscaling.\n\nThe gotcha: the derived sizes are **baked in at creation**, so resizing an\nexisting chart does not rescale its text — a chart authored large then\nsqueezed down keeps oversized, crowding labels (and vice versa). After a\ndramatic resize, patch the typography (`fontSize` is the load-bearing field;\nthe 400×300 base values are `fontSize: 12, titleSize: 16, subtitleSize: 12,\nvalueLabelSize: 11, legendMarkerSize: 12, legendGap: 8`). Then screenshot\nand read the labels.\n\n## The bar\n\n- **Data preservation is non-negotiable**: N source rows → exactly N points,\n  same labels, same values, no silent rounding or reordering.\n- **Label in the reader's units**: `y-format=\"currency\" | \"compact\" |\n  \"percent\"`, or a `label` column for per-point display text (`$125K`).\n- **One accent, not a rainbow.** Single-series charts take one brand color;\n  multi-series take an ordered palette with the important series strongest.\n- **Title it with the finding**, not the field name — \"Revenue doubled in\n  EMEA\", not \"Revenue by region\" — whenever the data actually says so.\n- **Editing an existing chart**: patch it in place with `canvas_edit`\n  (data, labels, title, axes, legend, colors) rather than deleting and\n  recreating; references/charts.md has the patch shape.\n\n\n\n## Errors\n\nSmall applies plus a screenshot are the guard — `invalid_markup` names the\nelement it skipped (a data block missing its pipe-table header row is the\ncommon one); `stale_revision` heals on one re-read and retry.\nAnything else, or the same typed code twice: stop and run\n`ask_expert(\"<what failed>\", context=\"<the error>\")` (free). Deeper recipes per\ntyped error live in moda-core's recovery reference.\n\n## References\n\n| Doc | Load when |\n|---|---|\n| references/charts.md | always — authoring mechanics for `<chart>` |\n| references/markup.md | before writing any markup |\n| references/design-quality.md | type ladder, palette discipline, data preservation |\n| references/brand.md | a brand kit exists |\n| references/edit-code.md, references/reading-and-verifying.md | patching a chart in place; DSL reading and the screenshot loop |\n| references/export.md, references/omni-and-media.md, references/gotchas.md | delivering png/pdf; media; anything surprising |\n"
}