# Visualize > Turns a PM artifact into a clean, self-contained HTML visual you can open and screenshot — a RICE/Kano prioritization matrix, a Now/Next/Later roadmap board, an OKR tree, a metrics scorecard, or a journey-map swimlane. Use when you say "make this visual", "turn this into a board / matrix / chart", "render the roadmap", "show me a scorecard", "visualize this", "I want to screenshot this", or after any skill produces a structured artifact and a picture would land harder than text. - Skill: `sidsaladi9/visualize` (Agent Skill) - Install (CLI): `npx skillmds@latest add sidsaladi9/visualize` - Raw SKILL.md: https://api.skillmd.com/api/skills/sidsaladi9/visualize/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Product & Planning - Author: Sidsaladi9 (https://skillmd.com/u/sidsaladi9) - Updated: 2026-09-17 - Page: https://skillmd.com/skills/sidsaladi9/visualize --- # Visualize **Grounded in:** *The Visual Display of Quantitative Information* — Edward Tufte: maximise the data-ink ratio and let the structure of the data pick the form. The rule that does the work here — a PM artifact is usually a **comparison**, a **ranking**, or a **sequence**, and each has one obvious right shape. A RICE table is a ranking, a Now/Next/Later board is a sequence, an OKR tree is a hierarchy. Match the form to the structure and the visual needs almost no decoration. Turns the structured output of a PM skill into a **single self-contained HTML file** — no server, no build, no external fonts or CDNs — that opens in any browser and is built to be screenshotted into a deck, a Slack post, or a doc. Text artifacts inform; a clean visual *persuades* and travels. This is the skill that makes the work shareable. It renders five PM artifacts, each with a purpose-built layout: | Artifact | Visual | Comes from | |---|---|---| | Prioritization | **RICE / Kano matrix** (impact × effort quadrant, or ranked bars) | `prioritize` | | Roadmap | **Now / Next / Later board** (3 columns of cards) | `roadmap` | | OKRs | **Objective → Key Result tree** with progress bars | `okrs` | | Metrics | **Scorecard** of KPI cards with trend arrows + 🟢🟡🔴 status | `metrics-review` | | Journey | **Swimlane** (stages × actions / thoughts / pains / opportunities) | `journey-map` | ## When to use this - A skill just produced a prioritization, roadmap, OKR set, metrics review, or journey map and you want a picture, not a table. - You're prepping a deck, a leadership update, or a Slack/Notion post and need a screenshot-ready visual. - Someone says "can you make this a board / matrix / scorecard / chart" or "visualize this." - You want the artifact to travel — a RICE matrix lands in a planning review far harder than a markdown table. ## Before you start (gather these) - **The artifact + its data** — the prioritized list (with RICE/Kano scores), the roadmap items by horizon, the OKRs with progress, the metrics with current/prior/target, or the journey stages. If a sibling skill just produced it, use that output directly. - **Which visual** — infer it from the artifact type; if genuinely ambiguous, ask once. Don't render a roadmap as a matrix. - **House style** — if `memory/house-style.md` defines brand colors/fonts, use them via the CSS variables below so the visual looks like the company's, not generic. If you have the structured data, **proceed and render** — don't make the user reformat it for you. If the data is missing scores/values a widget needs (e.g. RICE numbers), fill what you can and clearly mark gaps in the visual rather than inventing numbers. ## Process 1. **Pick the widget** from the artifact type (table above). One artifact → one focused visual; don't cram two. 2. **Map the data into the widget's structure** — e.g. for the matrix, each item needs an x (effort) and y (impact); for the board, each card needs a title, horizon, and one-line why. 3. **Build ONE self-contained `.html` file** using the design system and the matching template below. Inline every style. No `