Grammar Of Graphics And Declarative Visualization Skill for Codex

Build data visualizations with declarative grammars. Use when the user needs Vega-Lite, Vega, Observable Plot, or grammar-of-graphics reasoning, especially for tabular charts that do not require bespoke rendering.

2k tokens

context cost

the whole folder, loaded on every use

files

instructions only

copies elsewhere

how many repositories repackaged it

4915

stars on the repo

on the repository, not the skill itself

Install

one command, takes just this skill from the repository

npx skills add https://github.com/openai/plugins --skill grammar-of-graphics-and-declarative-visualization

What comes with it

3 453 bytes besides the instruction

agents/openai.yaml

references/observable-plot.md

references/vega-lite-and-vega.md

references/when-to-stay-declarative.md

The instruction itself

7 sections, as written by the author

Grammar of Graphics and Declarative Visualization

Overview

Use this skill as the default implementation path for many tabular charts. Declarative grammars are often the fastest, clearest, and most maintainable route when the chart can be expressed as data plus marks plus encodings plus transforms.

This skill covers Vega-Lite, Vega, and Observable Plot. Default to the highest-level tool that cleanly expresses the needed chart and interaction.

Selection Rules

Use Observable Plot for fast exploratory and explanatory charts in JavaScript when concise code is valuable.
Use Vega-Lite for portable, declarative specs, multi-view composition, transforms, and embed-friendly chart definitions.
Use Vega when the user needs lower-level control that still benefits from a declarative runtime.
Leave this skill and route to D3, Canvas, or the Three.js/WebGL skill only when the chart requires bespoke layout, extreme density, GPU-scale rendering, particles, true 3D, or rendering control that the grammar no longer expresses cleanly.

Working Pattern

Normalize the table shape.
Name the mark, encodings, transforms, faceting, and interaction model explicitly.
Choose the highest-level grammar that supports the chart without contortions.
Keep specs readable and portable.
Check whether the declarative approach still fits the expected number of simultaneous chart instances on the page.
Check mobile portrait and optional landscape behavior: responsive spec, label/tick reduction, hover replacement, touch target policy, and whether the grammar can keep the main visualization visible around controls.
Use declarative composition before custom code.

Output Expectations

Explain why the chosen grammar fits better than bespoke rendering.
Keep the spec readable enough to be reused, embedded, or translated across stacks.
Call out when the declarative path is reaching its limits and a lower-level skill should take over.
Call out whether the grammar can support the mobile concept contract or whether D3, Canvas, WebGL, or framework-owned layout should take over.
For new work, include a technical design section covering instance-count assumptions, performance implications, and the maintenance upside of staying declarative.

References

Shared theory:
../../references/foundations/task-abstraction-and-chart-selection.md
../../references/foundations/perception-color-and-encoding.md
../../references/foundations/mobile-first-responsive-visualization.md
../../references/foundations/implementation-design-and-tradeoffs.md
Skill references:
./references/vega-lite-and-vega.md
./references/observable-plot.md
./references/when-to-stay-declarative.md

Representative Prompts

"Write a Vega-Lite spec for this dataset."
"Should I use Plot, Vega-Lite, or D3 for this chart?"
"Build a layered declarative chart with faceting and tooltips."
"Tell me when this declarative approach stops being a good fit."

Other skills for the same job

different authors, same section of the catalogue

XLSX

by anthropics

vendor ×15

Comprehensive spreadsheet creation, editing, and analysis with support for formulas, formatting, data analysis, and visualization. When Claude needs to work with spreadsheets (.xlsx, .xlsm, .csv, .tsv, etc) for: (1) Creating new spreadsheets with formulas and formatting, (2) Reading or analyzing data, (3) Modify existing spreadsheets while preserving formulas, (4) Data analysis and visualization in spreadsheets, or (5) Recalculating formulas

Use this skill any time a spreadsheet file is the primary input or output. This means any task where the user wants to: open, read, edit, or fix an existing .xlsx, .xlsm, .csv, or .tsv file (e.g., adding columns, computing formulas, formatting, charting, cleaning messy data); create a new spreadsheet from scratch or from other data sources; or convert between tabular file formats. Trigger especially when the user references a spreadsheet file by name or path — even casually (like \"the xlsx in my downloads\") — and wants something done to it or produced from it. Also trigger for cleaning or restructuring messy tabular data files (malformed rows, misplaced headers, junk data) into proper spreadsheets. The deliverable must be a spreadsheet file. Do NOT trigger when the primary deliverable is a Word document, HTML report, standalone Python script, database pipeline, or Google Sheets API integration, even if tabular data is involved.

Picks random winners from lists, spreadsheets, or Google Sheets for giveaways, raffles, and contests. Ensures fair, unbiased selection with transparency.

Query openFDA API for drugs, devices, adverse events, recalls, regulatory submissions (510k, PMA), substance identification (UNII), for FDA regulatory data analysis and safety research.

MATLAB and GNU Octave numerical computing for matrix operations, data analysis, visualization, and scientific computing. Use when writing MATLAB/Octave scripts for linear algebra, signal processing, image processing, differential equations, optimization, statistics, or creating scientific visualizations. Also use when the user needs help with MATLAB syntax, functions, or wants to convert between MATLAB and Python code. Scripts can be executed with MATLAB or the open-source GNU Octave interpreter.

UMAP dimensionality reduction. Fast nonlinear manifold learning for 2D/3D visualization, clustering preprocessing (HDBSCAN), supervised/parametric UMAP, for high-dimensional data.

Creating interactive data visualisations using d3.js. This skill should be used when creating custom charts, graphs, network diagrams, geographic visualisations, or any complex SVG-based data visualisation that requires fine-grained control over visual elements, transitions, or interactions. Use this for bespoke visualisations beyond standard charting libraries, whether in React, Vue, Svelte, vanilla JavaScript, or any other environment.

Access AlphaFold 200M+ AI-predicted protein structures. Retrieve structures by UniProt ID, download PDB/mmCIF files, analyze confidence metrics (pLDDT, PAE), for drug discovery and structural biology.

7k tokens

How to use it

Copy the folder

Take openai/grammar-of-graphics-and-declarative-visualization from the repository into ~/.claude/skills for personal use, or into .claude/skills inside a project.

Check the name does not clash

The agent identifies a skill by the name field in its header. Two skills with the same name cannot sit side by side — one of them will be ignored.