# Flint Theme Author

Use when: creating, translating, refining, reviewing, or validating a custom Flint...

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

## Install

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

## Description

Use when: creating, translating, refining, reviewing, or validating a custom Flint ThemeSpec from brand guidelines, websites, slide decks, publication references, design tokens, or an existing visual identity. Produce a reusable ThemeSpec JSON object for Flint Theme Lab without inventing fields or changing chart semantics.

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

# Flint ThemeSpec authoring

Create a reusable visual system for Flint charts. Translate the user's reference
materials into one valid `ThemeSpec` that can be pasted directly into Theme Lab.

## Authoritative references

Read these before authoring. When prose and source disagree, the TypeScript
contract is authoritative.

- Theme guide: https://github.com/microsoft/flint-chart/blob/main/docs/theme-spec.md
- Exhaustive ThemeSpec types and allowed values: https://github.com/microsoft/flint-chart/blob/main/packages/flint-js/src/core/theme/types.ts
- Real preset implementations: https://github.com/microsoft/flint-chart/tree/main/packages/flint-js/src/core/theme/presets
- Theme Lab: https://microsoft.github.io/flint-chart/#/theme-lab

Do not invent keys. If a requested decision cannot be represented by
`ThemeSpec`, omit it and briefly identify the unsupported decision outside the
JSON only when the user asked for an explanation.

## Output contract

Unless the user asks for commentary, return exactly one valid JSON object:

- Return the bare `ThemeSpec`, not `{ "theme_spec": ... }` and not a complete
  `ChartAssemblyInput`.
- Do not wrap JSON in a Markdown fence.
- Do not include comments, placeholders, ellipses, or trailing commas.
- Include a stable kebab-case `id` and a human-readable `label`.
- Include only supported fields and only decisions justified by the references.
- Omit unspecified optional fields rather than guessing.

The top-level output schema is:

```json
{
  "extends": "optional-preset-id",
  "id": "theme-id",
  "label": "Theme label",
  "ink": {},
  "type": {},
  "structure": {},
  "marks": {},
  "labels": {},
  "legend": {},
  "dataLabels": {},
  "annotation": {},
  "furniture": [],
  "facets": {},
  "layout": {},
  "chartDefaults": {},
  "compileDefaults": {},
  "interaction": {},
  "variants": []
}
```

Every block except `id` and `label` may be omitted. The skeleton shows the
shape, not a requirement to emit empty blocks.

## Theme boundary

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