SKILL.md · v0.3.2 · MIT

Visualize

Turn any idea, data, or content into a stunning single-file HTML visualization.

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

Critical Requirements

Non-negotiable. Each visualization must include every one of these — 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 toggle + dropdown: download PNG (downloadImage()), print (window.print()), and the html-to-image CDN script.

Theme Classes

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

Evaluation Critical

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.

Evaluation Critical

Responsive Design

No horizontal overflow at 375px. Font hierarchy: h1 ≥ 3rem, h2 ≥ 2rem, h3 ≥ 1.5rem, body = 1rem.

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 — evaluation detects and requires animation presence.

JavaScript

cycleTheme(), toggleMenu(), and all top-level vars use var (never let/const — avoids TDZ errors with CDN libs).

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

Always start from the skeleton — 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.
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.

Minimum CSS variables

The core palette every visualization defines, available in both themes.

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

Auto-open & return

After writing the file, always do both:

1Auto-open: wslview · xdg-open · open the .html file.
2Return URL: include file://<absolute-path> in the response.

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.

Understand

Clarify message, audience, and format. If format is unclear, run Auto-Recommend.

Start from skeleton

Open references/skeleton.md. Never start blank.

Structure

Outline the sections before filling the skeleton.

Build

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

Verify

Run references/checklist.md before outputting.