# Visualize

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

- Repository: https://github.com/code-yeongyu/oh-my-openagent (70577 stars)
- Category: Engineering
- License: see repository
- Last updated: 2026-11-01
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add code-yeongyu/oh-my-openagent --skill visualize -g -a claude-code -y`
Codex: `npx skills add code-yeongyu/oh-my-openagent --skill visualize -g -a codex -y`
Cursor: `npx skills add code-yeongyu/oh-my-openagent --skill visualize -g -a cursor -y`
Gemini CLI: `npx skills add code-yeongyu/oh-my-openagent --skill visualize -g -a gemini-cli -y`

## Description

Builds a self-contained HTML page (chart, table, diagram, dashboard) to show inline in a thread. Use before calling show_html_page, html_preview or html_render, or whenever an answer reads better as a page than as prose.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# Visualize

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 a page. The data work belongs to `data-scientist` and the design work to `frontend`: load those skills for their parts instead of improvising them here.

## The loop

Do these in order. Never show a page you have not looked at.

1. **Data: load `data-scientist`.** Compute every figure with its engines (DuckDB or Polars), at the grain the reader needs, and follow its `references/visualization.md` for which chart answers which question. Keep the query: every number on the page must trace back to it.
2. **Design: load `frontend`.** Use it for hierarchy, type, spacing and states. This page's constraints replace its design-system gate: the page brings no palette or fonts of its own and uses the theme the host injects (below).
3. **Build one self-contained page** under the constraints below and the Draft guard in `frontend`.
4. **Lint before you render.** Run `bun $SKILL_DIR/../frontend/scripts/perfection/check-draft-guard.ts <page file>` (the script ships with `frontend`, next to this skill; write a page you built as a string to a file first). Exit 1 means a coloured edge bar, an accent outline, promotional filler copy, an emoji icon, a hype badge, or a hard-coded vanity stat is in the page: remove it and rerun. Nothing is previewed or shown until it exits 0.
5. **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, fix what you see, and preview again. Where `html_preview` is not offered, open the page file in a browser through the `browser` skill and capture the same four views.
6. **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 not already say.

The rest: https://github.com/code-yeongyu/oh-my-openagent/blob/HEAD/packages/omo-senpi/skills/visualize/SKILL.md