openai/grammar-of-graphics-and-declarative-visualization
plugins/build-web-data-visualization/skills/grammar-of-graphics-and-declarative-visualization/SKILL.md
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.
$ install --global
skillsauthnpx skillsauth add openai/plugins grammar-of-graphics-and-declarative-visualizationInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: May 27, 2026, 6:14 AM255.9s5 files scanned
SKILL.md
- 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
- 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."
Related Skills
openai/provision-droplet
development
VerifiedTrustedCommunity
Use when the user wants to spin up / create / launch / provision a DigitalOcean droplet (or "a remote dev box on DO") and connect to it from Codex as a remote SSH workspace.
3,575SKILL.mdUpdated Jun 26, 2026
openai/teams
data-ai
VerifiedTrustedCommunity
Search through Microsoft Teams chats or channels, triage unread or recent activity, draft follow-ups, and manage Planner tasks through connected Teams data.
3,575SKILL.mdUpdated May 9, 2026
openai/figma-use-motion
tools
VerifiedTrustedCommunity
Motion / animation context for the `use_figma` MCP tool — animating Figma nodes via manual keyframes, animation styles, easing, and timeline duration. Load alongside figma-use whenever a task involves adding, editing, or inspecting animation on a node.
3,511SKILL.mdUpdated Jun 25, 2026
openai/figma-swiftui
development
VerifiedTrustedCommunity
SwiftUI ↔ Figma translation. Use whenever the user mentions Swift, SwiftUI, iOS, iPhone, or iPad — in EITHER direction — translating a Figma design into SwiftUI (design → code), or pushing SwiftUI views / screens / tokens back into a Figma file (code → design). Triggers on phrases like 'implement this Figma design in SwiftUI', 'build this screen in Swift', 'push this SwiftUI view to Figma', 'mirror my Swift code in a Figma file', or whenever a Figma URL appears alongside `.swift` files / an `.xcodeproj`. Routes to a direction-specific reference doc; loads alongside `figma-use` for the code → design path.
3,511SKILL.mdUpdated Jun 25, 2026