Skills

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 saysYou produceSection
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
Read the whole SKILL.md on GitHub

More in AI and agents