Agent skill · code-yeongyu
visualize
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.
What it needs
About 4k tokens when loaded.
What this skill does
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 at its source, at the grain the reader needs: SQL in the database when the data lives in one, DuckDB or Polars over files, and only the aggregate the chart draws comes back. Follow its references/visualization.md for which chart answers which question, where a day starts, and the cross-check. 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. frontend exempts an inline page from its DESIGN.md gate, Lighthouse audit and research lanes, and the constraints below replace them: the page brings no palette or fonts of its own and uses the theme the host injects. 3. Build one self-contained page under the constraints below and the Draft guard in frontend. Give each role its own class name, prefixed or scoped under its chart's parent selector: a short global class such as .k that a KPI grid and a bar segment share styles both, and lifted every cache bar off its baseline in one shipped page. 4. Lint before you render. Run bun $SKILLDIR/../frontend/scripts/perfection/check-draft-guard.ts <page file>, where $SKILLDIR is this skill's own directory, the folder containing this SKILL.md (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. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills code-yeongyu/visualize