Flint is a visualization language that turns compact, human-editable chart descriptions into charts without requiring an agent to specify every layout detail. Its library produces output for formats including Vega-Lite, ECharts, Chart.js, Plotly, and editable Excel charts, while its MCP server lets agents create, validate, and render visualizations. The catalogue skills, agent, and MCP integration help coding agents use Flint.
Getting it into your agent
One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.
npx skills add microsoft/flint-chart --skill flint-interaction-authorgit clone --depth 1 https://github.com/microsoft/flint-chartWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/skills/microsoft/flint-chart/flint-interaction-author)<a href="https://agentmods.dev/skills/microsoft/flint-chart/flint-interaction-author"><img src="https://agentmods.dev/badge/skills/microsoft/flint-chart/flint-interaction-author/github.svg" alt="Measured on agentmods" height="20"></a>Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.
<a href="https://agentmods.dev/skills/microsoft/flint-chart/flint-interaction-author"><img src="https://agentmods.dev/badge/skills/microsoft/flint-chart/flint-interaction-author.svg" alt="Reviewed on agentmods" width="80" height="20"></a>What it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5.1 | $0.00087 | $0.16573 |
| Opus 5.5 | $0.00035 | $0.06629 |
| Sonnet 5.5 | $0.00017 | $0.03315 |
| Haiku 4.5 | $0.00009 | $0.01657 |
Grade A, and why
flint-interaction-author scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured today.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
How it starts
The opening of the file, as written. The whole thing — 1,114 lines — stays where its author put it; the contents beside it link to each section on GitHub.
flint-chart: interactions and updates on a chart
A Flint chart is shared state. A reader's gesture becomes an event, a handler
turns the event into an update { id, ops }, updates compose as layers, and
the layers render into a state the host and the agent read back. An
application and an agent write the same kind of update directly. The full
model is in the documentation:
https://microsoft.github.io/flint-chart/#/documentation/interaction-introduction
The chart itself (chart_spec, semantic_types) is the flint-chart-author
skill. Everything here runs on the Vega-Lite backend; a static render and the
other backends leave interaction_spec and updates untouched.
What you produce (and what you do NOT)
| The request says | You produce | Section |
|---|---|---|
| A gesture or a behaviour on the chart: "highlight on click", "zoom", "brush a period", "make it interactive", "add behaviour to this chart". | One interaction_spec: { "interactions": [ ... ] }, presets only. |
Add interactions to the chart |
| A change to a chart that is already on screen, from outside: "point out Japan", "frame 2010 to 2020", "note this value", "reorder by value", an agent answering a user with the chart. | One ChartUpdate: { "id", "ops": [ ... ] }. |
Update the chart |
| Code around a chart: "in my app", "on click open the record", "a panel that follows the hover". | TypeScript against flint-chart/interactive: mount, presets as factories, onChange, dispatch. |
Use Flint in an application |
| Code across charts or over time: "link these two charts", "a table that follows the selection", "play the years". | linkCharts or useLinkedCharts; dispatch on a timer. On an MCP board, link_spec instead (board skill, "Step 5 — connect them"). |
Link charts |
| A gesture no preset gives: "drag along the path", "draw a guess", "a rule for the box", "a lens the app draws". | A CanvasInteractionDef: a trigger, affordances, a handler. |
When no preset fits |
- DO use only the names in this skill: preset types, options, ops, states, triggers, cursors, event actions. Every name here is one the library ships. When the request asks for a behaviour no preset gives, say which preset comes closest and what it leaves out, then offer a bespoke definition if the host runs code.
- DO add behaviour only when the request or the session asks for it. A
static image or a bare spec gets no
interaction_spec.
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- today First seen · 1,114 lines · 87 tokens per session scan A 8b0e8e108e90
flint-interaction-author is a skill published in the GitHub repository microsoft/flint-chart (4,399 stars, last pushed today), licensed MIT. It adds 87 tokens to every session and 16,573 once invoked, about $0.0003 per session on Opus 5.5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-10-22.
Other skills, from other repositories
wireframe-power-bi-page
Use when planning the layout of a Power BI report page. Triggers on phrases like "wireframe a page", "layout for a dashboard", "where should I put the visuals", "design the page layout", "how should I arrange these visuals". Covers canvas geometry (1280x720), 5 validated layouts, the pbirlayoutgrid tool, spacing math.
design-power-bi-report
Use when polishing or theming a Power BI report — typography, colors, KPI cards, slicer placement, formatting taste decisions. Triggers on phrases like "make my report look better", "improve the design", "what colors should I use", "format this dashboard", "report doesn't look professional".
diagram-design
Create branded architecture, architecture delta, IT current-state, flowchart, sequence, state machine, ER/data model, timeline, swimlane, quadrant, radar/spider, polar chart (polar/radial lollipop), loop/flywheel, nested, tree, org chart, layer stack, exploded axonometric, axonometric plan, Venn, pyramid/funnel…
dashboard-design
Use this skill first when the user wants to design or plan a dashboard, especially Vizro dashboards. Enforces a 3-step workflow (requirements, layout, visualization) before implementation. Activate when the user asks to create, design, or plan a dashboard. For implementation, use the dashboard-build skill after…
bklit-ui-design
Turns plain-language chart design requests into exact Bklit UI (@bklit shadcn registry) components and props, styled to fit the host app. Use when someone describes how a chart should look rather than naming props, e.g. "diagonal pattern background that fades out", "squircle bars", "3D glass bars", "hatched area"…
reimagine-it-extract
Emit the content signals reimagine-it reads from an HTML file — title, anchors, proper nouns, dates, numbers, emails, links, source hex colors, and the derived palette — as JSON without generating a redesign. Use when the user says /reimagine-it extract, "what does the engine see in this page", "extract the palette"…