
Flint Interaction Author
Use when: a Flint chart should respond to the reader (highlight, zoom, brush, legend...
Install
npx skills add microsoft/flint-chart --skill flint-interaction-author -g -a claude-code -y- Repository
- microsoft/flint-chart4.5k
- Category
- AI and agents
- Updated
- 3d ago
- License
- MIT
- Context cost
- Mediumabout 3,000 tokens
- Runs scripts
- No, instructions only
What it does
Use when: a Flint chart should respond to the reader (highlight, zoom, brush, legend toggle, reorder, annotate, explore, link charts); an application or an agent changes a mounted chart from outside or reads what it shows; or a gesture no preset gives must be built. Produce one valid interaction_spec, one ChartUpdate, or code against flint-chart/interactive, with no invented names.
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 |

