Agent skill

Openai Dotcom Viz

by yzlnew in yzlnew/infra-skills

Build figures in OpenAI's blog / research / system-card "dotcom" visual style — both (a) bar charts (monochrome bars with a darker same-hue stroke, rounded corners, a black y-axis with outward ticks…

No licenceAuto-check passedData & Analytics

Install Openai Dotcom Viz

skills CLI
$ npx skills add yzlnew/infra-skills --skill openai-dotcom-viz -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install yzlnew/infra-skills openai-dotcom-viz --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/yzlnew/infra-skills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/openai-dotcom-viz .claude/skills/openai-dotcom-viz && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
openai-dotcom-viz
GitHub stars
149
Token cost
~1.3k tokens
SKILL.md length
435 words
Files
7 (incl. references, assets)
Skills in repo
8
Repo updated
First seen
Licence
None found

At a glance

Build figures in OpenAI's blog / research / system-card "dotcom" visual style — both (a) bar charts (monochrome bars with a darker same-hue stroke, rounded corners, a black y-axis with outward ticks…

  • Works in 2 steps: Bar charts — grouped or single-series. →… → Flow / process diagrams — e.g. the…
  • Pipeline/flow diagram
  • SKILL.md covers Bar charts, Flow diagrams, Fonts & offline and Verifying output
  • Runs JavaScript scripts from its folder; reaches cdn.openai.com

What it does

Openai Dotcom Viz is an agent skill from yzlnew/infra-skills. Build figures in OpenAI's blog / research / system-card "dotcom" visual style — both (a) bar charts (monochrome bars with a darker same-hue stroke, rounded corners, a black y-axis with outward ticks and no gridlines, circle legend markers left-aligned to the y-axis, value labels above bars, angled category labels) and (b) flow / process diagrams (rounded boxes, monospace uppercase pills, pink highlights, thin open-chevron "arrow" connectors with rounded corners, dashed = negative branch). Everything uses the real…

Its SKILL.md is about 1.3k tokens, which your agent loads only when the skill is triggered. The skill folder holds 8 other files, including reference files and assets (for example `assets/openai-chart.js`, `references/design-spec.md` and `references/flow-diagram.md`).

It sits in Data & Analytics, covering Diagrams and Data visualization. It works with OpenAI, Chart.js, Mermaid and Matplotlib. The repository describes itself as: A collection of specialized agent skills for AI infrastructure development, enabling Claude Code to write, optimize, and debug high-performance systems.

When your agent uses it

  • Pipeline/flow diagram
  • Figure that looks like OpenAIs website / posts / papers
  • Asks to reproduce an OpenAI figure
  • Is building a deck

Example prompts

  • “s blog / research / system-card”
  • “/openai-dotcom-viz”

Requirements

  • Node.js

Workflow steps

2 steps, taken from the first numbered list in SKILL.md.

  1. Bar charts — grouped or single-series. → see "Bar charts" below.
  2. Flow / process diagrams — e.g. the "Quality assurance pipeline". → see

What it can do on your machine

Read from SKILL.md and the folder at commit f3a8d7d. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Ships script files (JavaScript), which the agent can run.

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    Hosts in commands or code, which the agent is likely to contact:

    • cdn.openai.com

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Openai Dotcom Viz loads about 1.3k tokens when it runs, and up to ~3.3k if it reads all its reference files. Until then it costs about 245 tokens; SKILL.md has 435 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~245
When it runs · the whole SKILL.md, loaded when a task matches
~1.3k
With references · SKILL.md plus every file in references/, read only if the agent opens them
~3.3k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

Without a licence we can't republish the file, so here is its outline and opening line. It has 435 words (~1,286 tokens).

“Reproduce the two figure types OpenAI uses in its posts, as self-contained HTML/SVG (no Vega, D3, Mermaid, or build step):”

— opening of SKILL.md by yzlnew
name
openai-dotcom-viz

Read the full SKILL.md on GitHub

Files

SKILL.md and 6 other files (references, assets) in openai-dotcom-viz of yzlnew/infra-skills.

  • SKILL.md
  • assets/chart-example.html
  • assets/flow-example.html
  • assets/openai-chart.js
  • assets/openai-figure.css
  • references/design-spec.md
  • references/flow-diagram.md

Open the folder on GitHubat commit f3a8d7d

Compare with similar skills

Openai Dotcom Viz next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Openai Dotcom Viz compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Openai Dotcom Viz this skillyzlnew/infra-skills149—~1.3kAutomated safety check: PassNone
Microsim Generatorynulihao/AgentSkillOS618—~2.1kAutomated safety check: PassNone
Microsim Generatordmccreary/ibook-skills105—~11kAutomated safety check: PassNone
AI Daily DigestvigorX777/ai-daily-digest1.6k—~1.3kAutomated safety check: PassNone
Scientific Schematicsjimmc414/Kosmos595—~16kAutomated safety check: NotesNone
Diagram Designcathrynlavery/diagram-design48k1 repos~7.6kAutomated safety check: PassMIT

Similar skills

  • Microsim Generator

    ynulihao/AgentSkillOS

    Creates interactive educational MicroSims using the best-matched JavaScript library (p5.js, Chart.js, Plotly, Mermaid, vis-network, vis-timeline, Leaflet, Venn.js).

    618 GitHub stars~2.1k tokensUpdated 7 mo ago
    Data & AnalyticsAuto-check passed
  • Microsim Generator

    dmccreary/ibook-skills

    Creates interactive educational MicroSims, routing to the best-matched generator - p5.js, Chart.js, Plotly, Mermaid, vis-network, timelines, maps, Venn, causal-loop/feedback-loop diagrams (CLD)…

    105 GitHub stars~11k tokensUpdated today
    Data & AnalyticsAuto-check passed
  • AI Daily Digest

    vigorX777/ai-daily-digest

    Fetches RSS feeds from 90 top Hacker News blogs (curated by Karpathy), uses AI to score and filter articles, and generates a daily digest in Markdown with Chinese-translated titles, category…

    1.6k GitHub stars~1.3k tokensUpdated 7 mo ago
    Data & AnalyticsAuto-check passed
  • Scientific Schematics

    jimmc414/Kosmos

    Create publication-quality scientific diagrams, flowcharts, and schematics using Python (graphviz, matplotlib, schemdraw, networkx).

    595 GitHub stars~16k tokensUpdated yesterday
    Data & AnalyticsAuto-check: notes
  • Diagram Design

    cathrynlavery/diagram-design

    Creates branded diagrams, from architecture, flowchart and sequence to charts and maps, as self-contained HTML with inline SVG, with import from draw.io, Mermaid and Excalidraw.

    48k GitHub starsUsed in 1 repo~7.6k tokens
    DevelopmentAuto-check passed
  • Paper Figures

    EvoScientist/EvoSkills

    A skill your agent uses to produce standalone, publication-ready PNG graphics and reproducible matplotlib scripts from tabular data (CSVs or DataFrames).

    478 GitHub starsUsed in 1 repo~4.4k tokens
    Data & AnalyticsAuto-check passed

More from yzlnew/infra-skills

All 8 skills in this repo
  • Hf Architecture Tikz

    yzlnew/infra-skills

    Draw Sebastian-Raschka-gallery-style TikZ architecture diagrams for any HuggingFace decoder-only LLM, with per-block parameter formulas and concrete numbers.

    149 GitHub stars~2k tokensUpdated 3 mo ago
    Auto-check passed
  • Megatron Memory Estimator

    yzlnew/infra-skills

    Estimate GPU memory usage for Megatron-based MoE (Mixture of Experts) and dense models.

    149 GitHub stars~2.2k tokensUpdated 3 mo ago
    Auto-check passed
  • HTML Flowchart Anthropic

    yzlnew/infra-skills

    Create and revise pure HTML/CSS flowcharts using an Anthropic-inspired design language.

    149 GitHub stars~1.5k tokensUpdated 3 mo ago
    Auto-check passed
  • Slime User

    yzlnew/infra-skills

    Guide for using SLIME (LLM post-training framework for RL Scaling).

    149 GitHub stars~3.2k tokensUpdated 3 mo ago
    Auto-check passed
  • Tilelang Developer

    yzlnew/infra-skills

    Write, optimize, and debug high-performance AI compute kernels using TileLang (a Python DSL for GPU programming).

    149 GitHub stars~2.4k tokensUpdated 3 mo ago
    Auto-check passed
  • Material You Slides

    yzlnew/infra-skills

    Create presentation slides using Material You (Material Design 3) style.

    149 GitHub stars~3.7k tokensUpdated 3 mo ago
    Auto-check passed

Questions about Openai Dotcom Viz

What does Openai Dotcom Viz do?

Build figures in OpenAI's blog / research / system-card "dotcom" visual style — both (a) bar charts (monochrome bars with a darker same-hue stroke, rounded corners, a black y-axis with outward ticks…. Openai Dotcom Viz is an agent skill from yzlnew/infra-skills. Build figures in OpenAI's blog / research / system-card "dotcom" visual style — both (a) bar charts (monochrome bars with a darker same-hue stroke, rounded corners, a black y-axis with outward ticks and no gridlines, circle legend markers left-aligned to the y-axis, value labels above bars, angled category labels) and (b) flow / process diagrams (rounded boxes, monospace uppercase pills, pink highlights, thin open-chevron "arrow" connectors with rounded corners, dashed = negative branch).

When should I use Openai Dotcom Viz?

Openai Dotcom Viz fits situations like: pipeline/flow diagram; figure that looks like OpenAIs website / posts / papers; asks to reproduce an OpenAI figure; is building a deck.

How do I install Openai Dotcom Viz in Claude Code?

Run `npx skills add yzlnew/infra-skills --skill openai-dotcom-viz -a claude-code`. Or copy the skill folder (openai-dotcom-viz in yzlnew/infra-skills) into .claude/skills/openai-dotcom-viz in your project. Claude Code loads it when a task matches its description.

How do I install Openai Dotcom Viz in Codex?

Run `npx skills add yzlnew/infra-skills --skill openai-dotcom-viz -a codex`. Or copy the skill folder (openai-dotcom-viz in yzlnew/infra-skills) into .agents/skills/openai-dotcom-viz in your project. Codex loads it when a task matches its description.

Can I use Openai Dotcom Viz in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add yzlnew/infra-skills --skill openai-dotcom-viz -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/openai-dotcom-viz, .gemini/skills/openai-dotcom-viz, .github/skills/openai-dotcom-viz and .opencode/skills/openai-dotcom-viz in your project.

What does Openai Dotcom Viz need to run?

Going by SKILL.md and its folder, Openai Dotcom Viz needs JavaScript for the scripts in its folder. Our summary lists: Node.js.

Does Openai Dotcom Viz access the network?

SKILL.md names 1 domain. In commands or code: cdn.openai.com; the agent is likely to contact it when it follows the instructions. This is read from the text; nothing was executed.

Is Openai Dotcom Viz safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Openai Dotcom Viz use?

No licence was found for Openai Dotcom Viz or its repository. Without one, default copyright applies: ask the author before reusing or redistributing it.

How many tokens does Openai Dotcom Viz use?

About 1.3k tokens (SKILL.md is roughly 5.1k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 2k tokens, read only when the agent opens those files.

What are the alternatives to Openai Dotcom Viz?

Skills that share tags, products or a category with Openai Dotcom Viz: Microsim Generator (ynulihao/AgentSkillOS, 618 stars), Microsim Generator (dmccreary/ibook-skills, 105 stars), AI Daily Digest (vigorX777/ai-daily-digest, 1.6k stars) and Scientific Schematics (jimmc414/Kosmos, 595 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Openai Dotcom Viz?

yzlnew (a GitHub user) maintains it in yzlnew/infra-skills, which has 149 GitHub stars. The repository holds 8 skills in this directory. The repository was last updated on July 9, 2026.

Source: yzlnew/infra-skills on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.