Translate semantic encodings into TanStack Charts marks, layers, annotations, facets, and coordinated views. Load when choosing marks, combining layers, assigning interaction-point ownership, or deciding whether a custom mark is justified.
Installer avec Codex ou Claude Copiez ce prompt, collez-le dans Codex, Claude ou un autre assistant, puis laissez-le vérifier la page du skill et l'installer pour vous.
Une commande directe contourne le prompt de vérification. Examinez la source avant de l'exécuter.
Translate semantic encodings into TanStack Charts marks, layers, annotations, facets, and coordinated views. Load when choosing marks, combining layers, assigning interaction-point ownership, or deciding whether a custom mark is justified.
Use trigger → inspect → decide → build → verify. A chart type is usually a composition of marks with shared scales, not a component to look up by name.
Setup
Layer broad context first and direct evidence last:
Use facets for repeated questions, views for distinct roles
Use facetChart when every panel asks the same question over a group. Use composeViews for focus-and-context, marginal summaries, or panels with distinct roles. Keep semantic shared state in the application; do not synchronize views through DOM nodes.
Common Mistakes
CRITICAL Encoding the chart as one custom path
Wrong: emit one path containing the complete visualization.
Correct: retain mark-local data, channels, scales, and interaction points; extend only the geometry that built-ins cannot express.
A monolithic path discards automatic domains, typed rows, portable rendering, focus ownership, and composability.
Wrong: project polar, spatial, hierarchy, or network geometry into arbitrary pixels before chart layout.
Correct: use first-party coordinate/layout primitives, or a resolved-layout mark when final bounds are truly required.
Userland projection hides responsive final-bounds work and duplicates capability modules. Current first-party primitives fixed many early gaps, but old examples still encourage application-owned engines.
See also: build-chart-interactions/SKILL.md and extend-tanstack-charts/SKILL.md — layering determines point ownership, and native composition should be exhausted before extension.
