visual-explainers

Build static-first visual explainers as Svelte dashboard boards or self-contained HTML files.

Updated Aug 5, 2026
One-click install
npx skills add https://github.com/harivansh-afk/loom-index-e2e --skill visual-explainers-harivansh-afk
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: visual-explainers
Source: https://github.com/harivansh-afk/loom-index-e2e/tree/main/skills/visual-explainers
Command: npx skills add https://github.com/harivansh-afk/loom-index-e2e --skill visual-explainers-harivansh-afk

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Explaining a system, mechanism, or dataset visually often produces cluttered, interaction-heavy pages that hide the core lesson behind clicks and decorative animation. This Skill encodes a disciplined design philosophy so every visualization lands its point on load, in plain words, with real data. ## Core Features & Use Cases - Live dashboard boards: Writes Svelte boards to the test-ide fleet dashboard's canvas directory, reusing its component catalog (CodeFile, DiffView, FileIcon, Terminal) and theme tokens, with hot-reload on every save. - Self-contained HTML fallback: Produces a single vanilla HTML file with inline CSS and JS that opens from file:// with no network when the dashboard is unavailable. - System diagrams and data charts: Covers pipeline/protocol explainers, diff walkthroughs, and honest data charts with zero-based axes, direct labeling, and accessible contrast. - Use Case: Ask how sparse flake locks work and get a board showing the three modified files in VCS blue, a DiffView open on the real 18 added lines, a Terminal replaying the actual commands, and a faded contrast block showing the old cost, all visible with zero clicks. ## Quick Start Explain visually how our deployment pipeline promotes a build from staging to production.

Frequently Asked Questions about visual-explainers

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build a visual explainer for a system or pipeline?▼

Write a Svelte board to canvas/boards/<session-id>/main.svelte in the test-ide dashboard repo, reusing catalog components like DiffView and Terminal. The running app renders it live and hot-swaps every save, with the full lesson visible on load.

What components are available for dashboard boards?▼

The board catalog includes CodeFile for editor-style file panes, DiffView for side-by-side diffs with gutter bands, FileIcon for vscode-icons, Terminal for shell replays, and status primitives. Style only with theme tokens like bg-primary and text-muted-foreground.

Can I create a standalone HTML explainer without the dashboard?▼

Yes, fall back to a single self-contained HTML file with inline CSS and vanilla JS that opens from file:// with the network off. Put multi-line code blocks in pre tags, since newlines inside styled divs collapse silently.

When is interaction allowed in a visual explainer?▼

Interaction is allowed only for navigation between real artifacts, like selecting a file, or for disclosing depth that would take over a minute to read inline. The core claim must never hide behind a click, and decorative animation is removed.

Why do my code blocks render as one run-on line in HTML?▼

Newlines inside a styled div collapse into a single paragraph in HTML. Wrap multi-line code or command output in pre elements so line breaks are preserved in the rendered page.

What are the rules for data charts in explainers?▼

Bar charts must start at zero with labeled units and no truncated axes. Prefer direct series labeling over legends, keep accessible contrast in dark and light modes, and limit interaction to exact-value tooltips or series isolation toggles.