Visual Explainer

Produce editable source and verified, self-contained HTML. The default explainer theme uses the Hairline preset across posters, diagrams, slides, and videos. An explicit brand or requested look takes precedence. Prefer prose when a visual would add no understanding.

Remove any element whose absence changes neither meaning nor operation. Do not add kickers, decorative numbering, badges, metric tiles, or tiny uppercase labels to create hierarchy. Use composition, spacing, readable typography, and direct language.

Use the installed CLI

Require Node 22.12 or newer. Set SKILL_DIR internally to the absolute directory containing this file. Use node "$SKILL_DIR/scripts/artifacture.mjs" for init, add, list, export, video, engine, and verify. The CLI handles runtime setup, required npm packages, and workspace stylesheet imports. The user only installs the skill and asks for an artifact; do not ask them to configure paths, caches, or a second checkout.

When authoring imports or following a reference that uses npm --prefix REPO, obtain the ready runtime with REPO=$(node "$SKILL_DIR/scripts/artifacture.mjs" path). Pass absolute source and output paths. Private brands and copied consumer edits remain user-owned. See installation.md only for development overrides or troubleshooting.

Author, export, verify

1. Select one route below and read its card. Read additional references only when the selected route calls for them.
2. For a standalone chart, author a LieflatChart JSON envelope; for a data story, compose its figures in MDX. Archify uses typed JSON. Otherwise author .mdx by default, or .tsx for local state, generated/custom SVG, or video. Import shared components from REPO/visual-explainer-mdx/components.tsx.
3. Export chart JSON with node "$SKILL_DIR/scripts/artifacture.mjs" chart <abs-source.json> --out <abs-output.html>. Archify uses its validated delivery command. For MDX/TSX, use node "$SKILL_DIR/scripts/artifacture.mjs" export <abs-source> --out <abs-output>; for static HTML, use export-static. Fix export failures in the source.
4. Read verification.md, execute its routed checks, open the artifact, and report the source, HTML, report JSON, and any incomplete verification.