Skip to main content
affpapa.org
RU EN
skill CX Codex GP ChatGPT official · OpenAI

grammar-of-graphics-and-declarative-visualization Codex skill

Generates tabular charts using Vega-Lite, Vega, and Observable Plot. It guides the model to pick the right declarative grammar instead of writing bespoke rendering code.

Install into Codex · Skills CLI (Vercel) All methods and platforms ↓ 
npx skills add openai/plugins --skill grammar-of-graphics-and-declarative-visualization -a codex
Open on GitHub

What grammar-of-graphics-and-declarative-visualization does

This skill guides the agent to express tabular charts through marks and encodings. It defaults to the highest-level grammar available. Observable Plot is chosen for concise JavaScript charts, Vega-Lite for portable multi-view specs, and Vega for lower-level declarative control.

The workflow starts with normalizing the table shape and defining interactions explicitly. It also checks mobile behavior: touch targets, tick reduction, and responsive spec layout. When a chart requires custom layouts, extreme data density, particles, or GPU rendering, the instructions explicitly hand off the task to D3, Canvas, or WebGL.

Install this if your project relies on standard tabular visualisations and you want maintainable declarative specs over low-level rendering code.

What it helps with

  • select between Observable Plot, Vega-Lite, and Vega
  • build declarative chart specs from tabular datasets
  • adjust chart layouts and touch targets for mobile screens
  • detect when to switch from declarative specs to D3 or WebGL

Example prompts for the agent

  • 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.

How to install grammar-of-graphics-and-declarative-visualization

1Skills CLI (Vercel)

npx skills add openai/plugins --skill grammar-of-graphics-and-declarative-visualization -a codex

2Manually: put the files in place

.agents/skills/grammar-of-graphics-and-declarative-visualization/SKILL.md

For all projects use ~/.agents/skills/

From the same set201

The whole set →
supabase official supabase Guides the agent through database configuration and strict RLS policies in Supabase. CX Codex GP ChatGPT 8installs remotion-render official Remotion Exports videos and static stills from Remotion projects using CLI commands. CX Codex GP ChatGPT 3installs figma-create-new-file official Figma Creates blank Figma, FigJam, or Slides files inside draft folders. It resolves planKey and editor types before invoking Figma MCP tools. CX Codex GP ChatGPT 6installs swiftui-performance-audit official OpenAI Pinpoints SwiftUI runtime issues like frame drops, unresponsive taps, and excessive view body computations. Works code-first and guides Instruments profiling. CX Codex GP ChatGPT 109installs swiftui-liquid-glass official OpenAI This skill helps build and review SwiftUI Liquid Glass interfaces for iOS 26+. Use it when adopting the API or checking fallbacks, interaction, and design fit. CX Codex GP ChatGPT 121installs swiftui-ui-patterns official OpenAI This skill helps build and refactor SwiftUI interfaces, from navigation and state to layouts and controls. Use it for new screens or changes to an existing project. CX Codex GP ChatGPT 114installs swiftui-view-refactor official OpenAI Refactors SwiftUI view files into clean, testable structures with dedicated subview types and proper Observation ownership. CX Codex GP ChatGPT 113installs ios-memgraph-leaks official OpenAI Captures and inspects iOS leaks from a simulator process or .memgraph. Useful for tracing retained objects and checking a fix with before-and-after evidence. CX Codex GP ChatGPT 1,054installs

Similar

xlsx official anthropics Creates, reads, edits, and converts spreadsheet files. Use it when the requested deliverable is an Excel workbook or another tabular file. Claude Code Claude.ai 187,223installs google-agents-cli-observability official Google This skill guides you through tracing and monitoring AI agents, including ADK agents. Use it when you need to inspect agent execution or monitor a deployed agent. Claude Code CX Codex Cursor +1 509,900installs caveman-evidence-review JuliusBrussee A read-only skill reviews Caveman Cloud evidence on LLM spend, traces, and routing. Use it to see where a project’s model budget goes. Claude Code CX Codex Cursor +1 103,500installs migration JuliusBrussee Enforces reversible, compatibility-safe transitions for schema, data, and API updates. Useful whenever data loss or rollout downtime is unacceptable. Claude Code CX Codex Cursor +1 102,900installs performance-optimization addyosmani An agent skill that measures before it changes code: Core Web Vitals budgets, N+1 queries, missing indexes and slow endpoints. Claude Code CX Codex Cursor +1 64,500installs

Questions about grammar-of-graphics-and-declarative-visualization

How do I install grammar-of-graphics-and-declarative-visualization in Codex?

Run npx skills add openai/plugins --skill grammar-of-graphics-and-declarative-visualization in your terminal. It adds the configuration under .agents/skills/grammar-of-graphics-and-declarative-visualization/SKILL.md.

What does this skill do?

It provides implementation rules for building charts with Vega-Lite, Vega, and Observable Plot. The agent uses it to compose declarative specs instead of writing imperative DOM or Canvas code.

When does the skill avoid declarative grammars?

It routes to D3, Canvas, or WebGL when a chart requires true 3D, particle effects, extreme density, or bespoke layouts that grammars cannot cleanly express.

Source text

SKILL.md · MIT 
---
name: grammar-of-graphics-and-declarative-visualization
description: 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.
---

# 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

1. Use Observable Plot for fast exploratory and explanatory charts in JavaScript when concise code is valuable.
2. Use Vega-Lite for portable, declarative specs, multi-view composition, transforms, and embed-friendly chart definitions.
3. Use Vega when the user needs lower-level control that still benefits from a declarative runtime.
4. 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

1. Normalize the table shape.
2. Name the mark, encodings, transforms, faceting, and interaction model explicitly.
3. Choose the highest-level grammar that supports the chart without contortions.
4. Keep specs readable and portable.
5. Check whether the declarative approach still fits the expected number of simultaneous chart instances on the page.
6. 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.
7. 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."

© OpenAI · MIT · openai/plugins

See also

Project sponsors

Companies that keep this analytics open
Gold sponsor
Nutra.Club

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor