snappy-chart

The chart skill - purpose TBD.

One paragraph: what this skill does, why it exists, and what failure mode it prevents. If you can't name a failure mode, the skill probably doesn't need to exist - leave it out. Replace this paragraph as soon as the first agent runs the skill and discovers the real shape.

Observed user requests

These are the prompts that triggered this skill being scaffolded:

• "make that chart better with trend arrows for each skill"
• "now make that chart better - show it as a grouped bar chart with trend arrows for each skill"
• "show me a bar chart with three data points: A=10, B=25, C=15"

The Steps section below is a first-draft response to this cluster - refine as eval scores accumulate.

Steps

1. Parse request

Extract the data and chart type from the prompt. Support bar, line, area, pie, and radar charts. Normalize data shape to {labels, datasets}.

2. Compose OpenUI Lang

Emit a [[TOOL:Lang]]...[[/TOOL]] block containing OpenUI primitive chart composition (BarChart, LineChart, PieChart, etc. from the genui-library).

3. Render in cockpit

The chart appears inline in snappy-chat as a generative-UI card via the Lang renderer in dispatch-card.tsx.

4. Score

score("snappy-chart", run_id, {
  score: valid_chart ? 1.0 : 0.0,
  primary_issue: valid_chart ? null : "invalid-data-shape",
});

Eval

Actor: the thing that produces the output (a dispatch model, a CLI, or the state/lib/snappy-chart.ts library if one exists). Auditor: the thing that judges (must be different - see CONSTITUTION invariant #3). Name both explicitly.

Score convention:

If you cannot name a deterministic auditor, switch the frontmatter to eval: manual and log to state/log/pending-eval.ndjson - but fight to avoid manual. Manual is the escape hatch that leaks the thesis.

Gotchas

• List concrete failure modes you hit while building. Examples: "API

returns 200 with empty body"; "round-tripped text has a , artifact where em-dashes used to be"; "cache file is stale after 12h."

• If a gotcha matches an entry in user memory (see ~/.claude/CLAUDE.md),

cite the memory name so future agents can follow the trail.

snappy-chart - loader

Per-turn rules for snappy-chart. Full reference: state/skills/snappy-chart/SKILL.md.

Critical Rules

1. Compose via OpenUI Lang, not raw components. Emit [[TOOL:Lang]]...[[/TOOL]] containing BarChart/LineChart/AreaChart/PieChart/RadarChart from the genui-library. No custom TSX.
2. Data normalization required. Normalize input to {labels: string[], datasets: [{label, data: number[]}]} before composing. Reject malformed data with score 0.0.
3. Trend arrows via annotation layer. If user requests trend arrows, use a Stack wrapper around chart primitive with Tag elements per datapoint showing delta vs prior value.
4. Scope-only by default (apply:false). Render preview in chat; no writes unless explicitly confirmed.
5. Eval row mandatory. After run: score("snappy-chart", run_id, { score: valid_chart ? 1.0 : 0.0 }).

Commands

| ui dashboard | state/skills/snappy-chart/resources/ui.openui |

Self-Test

An agent reading this should correctly:

1. [ ] Compose charts via OpenUI Lang markers, not raw TSX?
2. [ ] Normalize data to labels/datasets shape before composing?
3. [ ] Write eval row with score 1.0 for valid charts?
4. [ ] Use Tag elements for trend arrows rather than custom SVG?

Self-correcting loader (PID feedback)

Before exit: edit this file if any gap found, then log:

echo "[$(date -u +%FT%TZ)] snappy-chart: <what was missing or fixed> [FIXED|LOGGED] action_kind=<kind>" >> state/log/loader-feedback.log

OpenUI Resource

• Skill-owned OpenUI Lang resource: state/skills/snappy-chart/resources/ui.openui. Read it before rendering or editing this skill's generated component surface.
• Treat this resource as a first-class artifact of the skill, not a generic chat response. Improve it when the skill's user-facing output needs to become richer.
• System resources compose OpenUI primitives and inherit SnappyChat tokens. Use ui_contract: branded in SKILL.md only for deliberate platform or client visuals.