# Flint Interaction Author

Use when: a Flint chart should respond to the reader (highlight, zoom, brush, legend...

- Repository: https://github.com/microsoft/flint-chart (4524 stars)
- Category: AI and agents
- License: MIT
- Last updated: 2026-11-01
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add microsoft/flint-chart --skill flint-interaction-author -g -a claude-code -y`
Codex: `npx skills add microsoft/flint-chart --skill flint-interaction-author -g -a codex -y`
Cursor: `npx skills add microsoft/flint-chart --skill flint-interaction-author -g -a cursor -y`
Gemini CLI: `npx skills add microsoft/flint-chart --skill flint-interaction-author -g -a gemini-cli -y`

## Description

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.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# 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 |

The rest: https://github.com/microsoft/flint-chart/blob/HEAD/agent-skills/flint-interaction-author/SKILL.md