Agent skill

Visualize

by code-yeongyu in code-yeongyu/oh-my-openagent

Builds a self-contained HTML page (chart, table, diagram, dashboard) to show inline in a thread.

Custom licenceAuto-check passedFrontend & Design

Install Visualize

skills CLI
$ npx skills add code-yeongyu/oh-my-openagent --skill visualize -a claude-code

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

GitHub CLI
$ gh skill install code-yeongyu/oh-my-openagent visualize --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/code-yeongyu/oh-my-openagent.git skills-src && mkdir -p .claude/skills && cp -r skills-src/packages/omo-senpi/skills/visualize .claude/skills/visualize && 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
visualize
GitHub stars
70k
Token cost
~954 tokens
SKILL.md length
569 words
Files
1
Skills in repo
45
Repo updated
First seen
Licence
Custom licence

At a glance

Builds a self-contained HTML page (chart, table, diagram, dashboard) to show inline in a thread.

  • Works in 5 steps: Data: load data-scientist. Compute every… → Design: load frontend. Use it for… → Build one self-contained page under the… → …
  • Tasks that involve HTML artifacts
  • SKILL.md covers The loop, Constraints of an inline page and Before you show it
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

Visualize is an agent skill from code-yeongyu/oh-my-openagent. Builds a self-contained HTML page (chart, table, diagram, dashboard) to show inline in a thread. Use before calling showhtmlpage, htmlpreview or htmlrender, or whenever an answer reads better as a page than as prose.

Its SKILL.md is about 950 tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

It sits in Frontend & Design, covering HTML artifacts. The repository describes itself as: OmO: Just type "mass ulw" keyword with your prompt. Now you are the master of graph engineering.

When your agent uses it

  • Tasks that involve HTML artifacts

Example prompts

  • “Use the visualize skill to build a self-contained HTML page (chart, table, diagram, dashboard) to show inline in a thread”
  • “/visualize”

Workflow steps

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

  1. Data: load data-scientist. Compute every figure with its engines (DuckDB or Polars), at the grain the reader needs, and follow its…
  2. Design: load frontend. Use it for hierarchy, type, spacing and states. This page's constraints replace its design-system gate: the page…
  3. Build one self-contained page under the constraints below.
  4. Preview and look. Render with html_preview in dark and in light, at the reply's width and at 390 px. Read the screenshot and the console…
  5. Show it with show_html_page (OmO) or html_render (other hosts), with the height the preview measured. Then write only what the page does…

What it can do on your machine

Read from SKILL.md and the folder at commit ab81169. 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

    No scripts in the folder and no shell commands in SKILL.md.

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

  • Network

    No URLs in SKILL.md.

    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

Visualize loads about 954 tokens when it runs. Until then it costs about 58 tokens; SKILL.md has 569 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~58
When it runs · the whole SKILL.md, loaded when a task matches
~954

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

Its licence (Custom licence) doesn't allow us to republish the file, so here is its outline and opening line. It has 569 words (~954 tokens).

“A page shown inline sits beside a reply, in the reader's theme, and is read in a few seconds. It earns its place only by being clearer than the paragraph it replaces. This skill owns what is particular to such…”

— opening of SKILL.md by code-yeongyu, Custom licence
name
visualize

Read the full SKILL.md on GitHub

Files

Just SKILL.md in packages/omo-senpi/skills/visualize of code-yeongyu/oh-my-openagent.

Open the folder on GitHubat commit ab81169

Compare with similar skills

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

Visualize compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Visualize this skillcode-yeongyu/oh-my-openagent70k—~954Automated safety check: PassCustom licence
Downtrend Duration Analyzertradermonty/claude-trading-skills3k2 repos~1.4kAutomated safety check: PassMIT
Report With HTMLdaymade/claude-code-skills1.4k—~11kAutomated safety check: PassMIT
LobeHub Interactive Prototypelobehub/lobehub83k—~1.6kAutomated safety check: PassCustom licence
Paperclip Pagepaperclipai/paperclip99k—~1kAutomated safety check: PassMIT
Openkb Deck NeonVectifyAI/OpenKB4.7k1 repos~4.3kAutomated safety check: PassApache-2.0

Similar skills

  • Downtrend Duration Analyzer

    tradermonty/claude-trading-skills

    Analyze historical downtrend durations and generate interactive HTML histograms showing typical correction lengths by sector and market cap.

    3k GitHub starsUsed in 2 repos~1.4k tokens
    Frontend & DesignAuto-check passed
  • Report With HTML

    daymade/claude-code-skills

    Produces the reader-facing HTML artifact — report, dashboard, architecture view, data browser, or review workbench — evidence-backed, browser-verified.

    1.4k GitHub stars~11k tokensUpdated today
    Frontend & DesignAuto-check passed
  • Builds single-file interactive HTML prototypes rendered with the real LobeHub UI components and written as production-style React, so they can later be split into files.

    83k GitHub stars~1.6k tokensUpdated today
    Frontend & DesignAuto-check passed
  • Paperclip Page

    paperclipai/paperclip

    Publish static HTML pages and asset folders to the Paperclip S3/CloudFront page host.

    99k GitHub stars~1k tokensUpdated today
    Frontend & DesignAuto-check passed
  • Openkb Deck Neon

    VectifyAI/OpenKB

    A skill your agent uses when the user asks the openkb chat to make a deck / slide presentation / PPT / slides / 演示稿 / 幻灯片 from their compiled KB content AND wants a dark, high-tech, neon / glow /…

    4.7k GitHub starsUsed in 1 repo~4.3k tokens
    Frontend & DesignAuto-check passed
  • Build, review, debug, reverse-engineer data sources for, and package FongMi/WebHome custom homepage single-file HTML.

    1.7k GitHub stars~3.8k tokensUpdated today
    Frontend & DesignAuto-check passed

More from code-yeongyu/oh-my-openagent

All 45 skills in this repo
  • Browser Control with Omowright

    code-yeongyu/oh-my-openagent

    Drives a real browser through the omowright library, either the user's own signed-in browser or a separate browser the code launches, for forms, QA, screenshots and scraping.

    70k GitHub starsUsed in 1 repo~2.2k tokens
    Auto-check passed
  • Codex Plugin QA

    code-yeongyu/oh-my-openagent

    Tests the omo Codex plugin in an isolated CODEX_HOME with a local mock model, proving hooks fired through app-server notifications without touching ~/.codex.

    70k GitHub starsUsed in 1 repo~1.9k tokens
    Auto-check passed
  • Coding Agent Session Finder

    code-yeongyu/oh-my-openagent

    Finds, reads and reconstructs past coding-agent sessions across Codex, Claude, OpenCode, Senpi and many other local agent logs.

    70k GitHub starsUsed in 1 repo~2.8k tokens
    Auto-check passed
  • ast-grep Structural Search

    code-yeongyu/oh-my-openagent

    Searches and rewrites code by syntax-tree shape across 25 languages with ast-grep, for codemods, structural queries and YAML lint rules, using a Python wrapper script.

    70k GitHub stars~3.3k tokensUpdated today
    Auto-check passed
  • LSP Setup

    code-yeongyu/oh-my-openagent

    Detects which languages a project uses, installs the matching language server, writes its config and checks it with a real call so diagnostics and go-to-definition work.

    70k GitHub stars~1.4k tokensUpdated today
    Auto-check: notes
  • OpenCode QA Toolkit

    code-yeongyu/oh-my-openagent

    Tests the opencode coding agent itself: its CLI, server, plugin hooks and events, the terminal UI under tmux, and its SQLite session database, using tested helper scripts.

    70k GitHub stars~2.9k tokensUpdated today
    Auto-check passed

Questions about Visualize

What does Visualize do?

Builds a self-contained HTML page (chart, table, diagram, dashboard) to show inline in a thread. Visualize is an agent skill from code-yeongyu/oh-my-openagent. Builds a self-contained HTML page (chart, table, diagram, dashboard) to show inline in a thread.

When should I use Visualize?

Visualize fits situations like: tasks that involve HTML artifacts.

How do I install Visualize in Claude Code?

Run `npx skills add code-yeongyu/oh-my-openagent --skill visualize -a claude-code`. Or copy the skill folder (packages/omo-senpi/skills/visualize in code-yeongyu/oh-my-openagent) into .claude/skills/visualize in your project. Claude Code loads it when a task matches its description.

How do I install Visualize in Codex?

Run `npx skills add code-yeongyu/oh-my-openagent --skill visualize -a codex`. Or copy the skill folder (packages/omo-senpi/skills/visualize in code-yeongyu/oh-my-openagent) into .agents/skills/visualize in your project. Codex loads it when a task matches its description.

Can I use Visualize 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 code-yeongyu/oh-my-openagent --skill visualize -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/visualize, .gemini/skills/visualize, .github/skills/visualize and .opencode/skills/visualize in your project.

What does Visualize need to run?

SKILL.md names no scripts, command-line tools or credentials: Visualize is instructions for the agent only.

Does Visualize access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Visualize 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 Visualize use?

Visualize has a licence file (the repository's licence) that doesn't match a standard licence. Read it on GitHub before reusing the skill.

How many tokens does Visualize use?

About 954 tokens (SKILL.md is roughly 3.8k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Visualize?

Skills that share tags, products or a category with Visualize: Downtrend Duration Analyzer (tradermonty/claude-trading-skills, 3k stars), Report With HTML (daymade/claude-code-skills, 1.4k stars), LobeHub Interactive Prototype (lobehub/lobehub, 83k stars) and Paperclip Page (paperclipai/paperclip, 99k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Visualize?

code-yeongyu (a GitHub user) maintains it in code-yeongyu/oh-my-openagent, which has 69,882 GitHub stars. The repository holds 45 skills in this directory. The repository was last updated on October 8, 2026.

Source: code-yeongyu/oh-my-openagent on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.