# Visual Explainer

> Build polished visual explainers as zo.space pages. Creates public routes at /explain/[slug] and keeps each explainer shareable at a stable URL.

- Skill: `luokai0/visual-explainer` (Agent Skill, multi-file: 4 files)
- Install (CLI): `npx skillmds@latest add luokai0/visual-explainer`
- Raw SKILL.md: https://api.skillmd.com/api/skills/luokai0/visual-explainer/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: AI & ML
- Author: luokai0 (https://skillmd.com/u/luokai0)
- Updated: 2026-09-08
- Page: https://skillmd.com/skills/luokai0/visual-explainer

---


# Visual Explainer (Zo)

Use this skill when the user asks for a visual explanation, architecture breakdown, implementation walkthrough, roadmap, comparison, or technical explainer page.

This Zo-native version publishes explainers to zo.space route paths:
- `/explain/<slug>` for each explainer page
- optional `/explain` index page that links to all explainers

## Required Behavior

1. Always publish explainers as zo.space page routes via `update_space_route`.
2. Route path format is always `/explain/<slug>`.
3. Default to `public=True` unless the user explicitly asks for private visibility.
4. After each publish/update, run `get_space_errors` and fix issues before proceeding.
5. Respond with the live URL: `https://<handle>.zo.space/explain/<slug>`.

## Workflow

1. Convert the requested title/topic into a URL-safe slug.
2. Create or update route `/explain/<slug>` with a self-contained React page.
3. Use a clear visual system:
- Distinctive typography (avoid default stacks)
- Strong color direction with CSS variables
- At least one meaningful visual (diagram section, timeline, system map, or comparison grid)
- Mobile-responsive layout
4. If this is part of a series, also update `/explain` with links to recent explainers.
5. Validate with `get_space_errors`.

## Route Template

Start from `assets/explainer-page.tsx` and adapt content per topic.

## Fast Slug Helper

Use `scripts/slugify.sh`:

```bash
bash Skills/visual-explainer/scripts/slugify.sh "My Explainer Title"
```