SKILL.md · v0.3.2 · MIT

Visualize

Create a self-contained HTML file — dashboard, infographic, deck. Invoke with /visuals:visualize, “visualize this”, or “이거 시각화해줘”.

Author careerhackeralex Category document-creation Model sonnet tier Tags visualization · html · slides · dashboard · infographic

Critical Requirements

Followed for every visualization — the full list lives in references/requirements.md. Always start from references/skeleton.md.

CSS Custom Properties

Exact names required: --bg, --surface, --surface-hover, --border, --text, --text-secondary, --accent, --accent-secondary, --positive, --negative, --warning.

Utility Menu

.viz-menu with .viz-menu-toggle + .viz-menu-dropdown: download PNG (downloadImage()), print (window.print()), and the html-to-image CDN script. Full implementation in references/menu.md.

Theme Classes

Define both .theme-light and .theme-dark in the stylesheet — class-based only, never @media prefers-color-scheme.

Semantic HTML

<main id="main-content">, multiple <section> elements, and a skip-to-content link.

Chart.js (charts only)

CDN before </head>, Chart.defaults.animation = false; immediately after, ChartManager pattern preferred. See references/chartjs-patterns.md.

Responsive Design

No horizontal overflow at 375px. Font hierarchy: h1 ≥ 3rem, h2 ≥ 2rem, h3 ≥ 1.5rem, body = 1rem. See references/sizing-rules.md.

Print & Accessibility

@media print, @media (prefers-reduced-motion: reduce), and aria-labels on all interactive elements and charts.

Entrance Animations

.animate classes or data-reveal — patterns in references/animations.md.

JavaScript

cycleTheme(), toggleMenu(), and all top-level variables in the generated HTML use var (never let/const — avoids TDZ errors with CDN-loaded libraries).

Bedrock-Safe Output

One Write call for the whole file, and never echo the generated HTML back into chat. references/bedrock-safe-write.md § Hard Rules owns this rule in full — read it before delivering.

Core Principles

Six guardrails that keep every output professional, portable, and content-first.

Single-file HTML

One .html file, inline CSS/JS, opens anywhere, works offline.

Light-theme optimized

Modern designs prioritize light mode. Dark available via toggle.

Beautiful by default

First output looks professional with zero iteration.

Content-first

Visualization serves the message. Never sacrifice clarity for aesthetics.

Responsive

Works on desktop, tablet, mobile unless explicitly fixed-dimension.

Visual restraint

No floating gradient orbs, rainbow borders, or ornamental animations.

Visualization Types

Choose the right format — structural patterns in references/types.md, type-specific rules (Carousel, Slide Deck, Poster, Auto-Recommend, interactivity, layout variation) in references/type-rules.md. When content arrives without a specified format: analyze → recommend 1–2 formats → wait for confirmation.

Slide deck Presentation Infographic Dashboard Flowchart Diagram Timeline Comparison table Data visualization Landing page One-pager Org chart Mind map Process flow Kanban board Report summary Carousel Poster

Output Rules

Start from references/skeleton.md — never write HTML from scratch. Write exactly one .html file.

File input/visualize /path/abc.md → same directory, same basename, .html extension.
No inputSave to ~/Downloads/ with a descriptive kebab-case name.
User pathA user-specified output path is always honored.
LibrariesReveal.js nav pattern and the full CDN library list live in references/libraries.md.
GraphicsSVG for icons and simple graphics — never external image URLs unless the user provides them.

Design System

Inter font mandatory · class-based theming only · minimum CSS variables below. Full specs in references/design-system.md and references/css-techniques.md.

Minimum CSS variables

SKILL.md's minimum is --bg/--surface/--text/--accent/--border; requirement 01 names the full set, shown in both themes.

--bg --surface --border --text --accent --accent-secondary --positive --negative --warning

After writing the file

Always do all three:

1Auto-open: xdg-open (Linux/WSL) · open (macOS) the .html file — never wslview, it errors on HTML.
2Return URL: include file://<absolute-path> in the response.
3Do not echo the generated HTML into chat — summary, URL and open command only. See references/bedrock-safe-write.md.

Status line: [OK] visuals:visualize type=<…> out=<path> · on failure [FAIL] visuals:visualize step=<n> detail=<reason>.

Context Awareness

This skill runs mid-conversation. Use all available context — conversation history, URLs (crawl + extract), pasted data (CSV/JSON → charts), code/architecture (→ system diagrams). Always use real content — never placeholder data.

Process

Five steps from intent to verified output. Run them in order, and stop with [FAIL] on an unresolved ambiguous format or an unfixed verify-html.sh failure.

Understand

Message, audience, format. If format is unclear, run Auto-Recommend from references/type-rules.md and wait for confirmation — never guess a format.

Start from skeleton

Open references/skeleton.md. Never start blank; if it cannot be loaded, stop and emit [FAIL].

Structure

Outline the sections before filling the skeleton.

Build

Add content, charts, and styles. All colors as CSS variables.

Verify

bash "$_skill/lib/vendor/verify-html.sh" --profile viz <out>.html must exit 0 (resolve $_skill with the guard block atop references/checklist.md), then the human-judgement items in references/checklist.md.

Chart.js patterns → references/chartjs-patterns.md · Debugging → references/debugging.md · Bedrock-safe delivery → references/bedrock-safe-write.md

Related Skills

The boundary is the deliverable, never the topic. This skill owns everything visual that is not one of the two below.

visuals:md-to-scrolldeck

A Markdown file into a vertical scroll-snap deck. Everything else — dashboards, infographics, posters, horizontal decks — stays here.

visuals:excalidraw-diagram

When the deliverable is an .excalidraw file rather than HTML.

In-chat charts and Artifacts go to the built-in dataviz instead.