luokai0 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
/explainindex page that links to all explainers
Required Behavior
- Always publish explainers as zo.space page routes via
update_space_route. - Route path format is always
/explain/<slug>. - Default to
public=Trueunless the user explicitly asks for private visibility. - After each publish/update, run
get_space_errorsand fix issues before proceeding. - Respond with the live URL:
https://<handle>.zo.space/explain/<slug>.
Workflow
- Convert the requested title/topic into a URL-safe slug.
- Create or update route
/explain/<slug>with a self-contained React page. - 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
- If this is part of a series, also update
/explainwith links to recent explainers. - 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 Skills/visual-explainer/scripts/slugify.sh "My Explainer Title"