# Flint Chart Author

Use when: the user asks to make or render charts with flint-chart, visualize tabular...

- 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-chart-author -g -a claude-code -y`
Codex: `npx skills add microsoft/flint-chart --skill flint-chart-author -g -a codex -y`
Cursor: `npx skills add microsoft/flint-chart --skill flint-chart-author -g -a cursor -y`
Gemini CLI: `npx skills add microsoft/flint-chart --skill flint-chart-author -g -a gemini-cli -y`

## Description

Use when: the user asks to make or render charts with flint-chart, visualize tabular data, generate a ChartAssemblyInput, validate/render through MCP, or add Flint to a JS/TS project. Author the semantic spec, transform data before Flint when needed, install/import Flint only when executable code is needed, and reserve backend-specific style tweaks for after compiling from Flint.

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

# flint-chart: authoring and using a chart spec

## What you produce (and what you do NOT)

Your output is the **spec**: the `chart_spec` and `semantic_types` of a
`ChartAssemblyInput`. You reference data columns **by name**. The host
passes the resulting input to `assembleVegaLite`, `assembleECharts`,
or `assembleChartjs` to get a backend spec.

**You write the input spec, not the output spec.** And critically:

- **DO** emit `chart_spec` (chart type, channel→field mapping, properties)
  and `semantic_types` (field → semantic type).
- **DO** add `interaction_spec` when the user asks for behaviour (highlight,
  legend toggle, pan and zoom, brush), asks for an interactive chart, or the
  session's goal is to explore the data. List presets by name; see
  "Interactions", and load the `flint-interaction-author` skill for an intent,
  an interactive chart with nothing named, or a combination.
- **Reference columns by name.** How `data` itself gets bound depends on
  the situation, a URL, a host-side variable, or embedded rows (see "How
  data gets bound"). Embedding is fine for small tables; just don't
  re-serialize a *large* dataset by hand, since that risks truncation and
  silent value corruption and wastes tokens.
- **Transform data before Flint.** If the requested chart needs aggregation,
  filtering, joins, pivots, derived columns, or long/wide reshaping beyond
  Flint's built-in static-series fold, use a coding, notebook, SQL, or data tool
  first. Then author the Flint spec against the transformed table.
- **Style after Flint, only when needed.** Author structure in Flint. For a
  presentation tweak Flint does not express (a reference line, annotation, or
  shaded band), use the Vega-Lite escape hatch, see "Post-Flint style
  customization". Never feed edited Vega-Lite JSON back to `render_chart`.

## When the user wants more than a spec

First decide which workflow the user is asking for:

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