semiotic-charts

Generating charts with Semiotic

Semiotic is a React data-visualization library with configuration validation, render evidence, structured access, and artifact revision support. Use this workflow to check the parts of a chart that the task requires. A capability comparison may conclude that the existing stack, a table, or another tool is the better fit; the skill does not authorize adding a dependency or migrating working charts.

The cardinal rule: do not hand-write chart JSX and hope it paints. Emit a { component, props } proposal and run it through the trust loop, which is validated and diagnosed; when a renderer is available, checked for a nonempty static scene. This does not establish correct data mapping, live browser behavior, or usability with assistive technology. Check the expected values and run the browser or reception checks relevant to the task. Failed proposals return reasons and ranked alternatives to retry with.

Context discipline

Start with the task and the exact component schema. Use the MCP getSchema tool, read semiotic://schema/{component}, or run npx -p semiotic semiotic-ai --schema <Component>, then read one nearby example if needed. Use semiotic://schema-index when the component is not known. Do not load the full reference, schema, or example catalog by default; retrieve broader context only when validation or diagnosis shows that it is necessary.

The trust loop — generate → validate → diagnose → repair → prove

prepareChart (from semiotic/ai) composes the whole loop. Call it on every proposal before you show or stream a chart:

import { prepareChart } from "semiotic/ai"

const result = prepareChart(
  { component: "BarChart", props: { data, categoryAccessor: "region", valueAccessor: "revenue" } },
  { data } // supply the data so a poor chart→data fit is caught and alternatives ranked
)

if (result.ok) {
  // result.jsx is a ready JSX string; result.config is the serializable ChartConfig
} else {
  // result.reasons explains why; result.repair.alternatives ranks better charts.
  // Retry with a fixed prop or a suggested component — do NOT paint.
}