cuozg/visual-explainer
skills/visual-explainer/SKILL.md
Generate beautiful, self-contained HTML pages that visually explain systems, code changes, plans, and data. Use when the user asks for a diagram, architecture overview, diff review, plan review, project recap, comparison table, or any visual explanation of technical concepts. Also use proactively when you are about to render a complex ASCII table (4+ rows or 3+ columns) — present it as a styled HTML page instead.
$ install --global
skillsauthnpx skillsauth add cuozg/oh-my-skills visual-explainerInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: May 13, 2026, 2:48 AM117.6s10 files scanned
SKILL.md
- name:
- visual-explainer
- description:
- Generate beautiful, self-contained HTML pages that visually explain systems, code changes, plans, and data. Use when the user asks for a diagram, architecture overview, diff review, plan review, project recap, comparison table, or any visual explanation of technical concepts. Also use proactively when you are about to render a complex ASCII table (4+ rows or 3+ columns) — present it as a styled HTML page instead.
- author:
- nicobailon
- version:
- 0.5.1
Visual Explainer
Generate self-contained HTML files for diagrams, tables, and data visualizations. Always open the result in the browser. Never fall back to ASCII art when this skill is loaded.
Proactive table rendering: If table has 4+ rows or 3+ columns → HTML page, not ASCII.
Workflow
1. Think — Pick Aesthetic
Pick one and commit. Vary each time — don't repeat the last choice.
Preferred (constrained): Blueprint · Editorial · Paper/ink · Monochrome terminal
Flexible (use with discipline): Named IDE theme (Dracula, Nord, Catppuccin, Gruvbox, Solarized)
Forbidden: Neon cyan+magenta, gradient mesh blobs, Inter font + violet accents, gradient text headings, glowing animated shadows
2. Structure — Read Templates First
| Content | Template/Approach |
|---|---|
| Architecture (text-heavy) | ./templates/architecture.html |
| Flowchart/sequence/ER/state/mindmap/class | ./templates/mermaid-flowchart.html (Mermaid) |
| Data table/comparison/audit | ./templates/data-table.html |
| Slide deck (--slides or /generate-slides) | ./templates/slide-deck.html + ./references/slide-patterns.md |
| Prose page/README/article | CSS prose patterns in ./references/css-patterns.md |
Mermaid rules: Always use theme: 'base' + themeVariables. Add zoom controls (+/−/reset/expand) to every diagram. Never use bare <pre class="mermaid"> — always use the full diagram-shell pattern from the template. Prefer flowchart TD over LR. Use <br/> for line breaks (not \n). Never define .node as a page-level CSS class.
4+ sections: Load ./references/responsive-nav.md for sticky sidebar TOC.
3. Style Rules
- Fonts: Pick from
./references/libraries.mdpairings. Forbidden as body font: Inter, Roboto, Arial, system-ui alone. - Colors: CSS custom properties. Define
--bg,--surface,--border,--text,--text-dim, 3-5 accents. Forbidden accents:#8b5cf6/#7c3aed/#a78bfa, cyan+magenta+pink combo. - Animation: Stagger fade-ins on load. Respect
prefers-reduced-motion. Forbidden: glow pulse loops. - Hierarchy: Vary card depth (hero → elevated → default → recessed). Not everything elevated.
4. Deliver
- Write to
~/.agent/diagrams/<descriptive-name>.html - Open:
open ~/.agent/diagrams/<file>.html(macOS) orxdg-open(Linux) - Tell user the file path
Diagram Type Quick-Ref
| Type | Use |
|---|---|
| Architecture ≤10 nodes | Mermaid graph TD |
| Architecture text-heavy | CSS Grid cards |
| Architecture 15+ nodes | Hybrid: Mermaid overview + CSS detail cards |
| Flowchart/pipeline | Mermaid |
| Sequence/ER/state/mindmap/class | Mermaid |
| C4 | Mermaid graph TD + subgraph (NOT native C4Context) |
| Data table | HTML <table> |
| Timeline | CSS central line + cards |
| Dashboard | CSS Grid + Chart.js |
Anti-Patterns (Slop Test)
Fail if 2+ of these are present: Inter/Roboto + purple gradient · gradient-clip text on headings · emoji section icons · glow-animated cards · cyan-magenta scheme · uniform card grid · three-dot code chrome.
Reference Files
./references/css-patterns.md— layout, SVG connectors, overflow protection, prose elements./references/libraries.md— font pairings, CDN links, Mermaid theming, Chart.js, anime.js./references/responsive-nav.md— sticky sidebar TOC for 4+ section pages./references/slide-patterns.md— slide engine, types, transitions, presets./commands/— prompt templates for diff-review, plan-review, project-recap, fact-check, share
Related Skills
cuozg/unity-image-gen
tools
VerifiedTrustedCommunity
Generate Unity raster image assets through Unity MCP: game sprites, item art, backgrounds, UI icons, portraits, concept images, transparent cutouts, image edits, upscales, background removal, and Unity scene or Game View screenshots. Use when a Unity project needs image files imported under Assets or screenshots captured from the editor. Do not use for meshes, audio, animation, materials, gameplay code, UI Toolkit layout, or generic non-Unity image generation.
4SKILL.mdUpdated May 29, 2026
cuozg/unity-technical
tools
VerifiedTrustedCommunity
Create Unity technical solution documents from user requirements, feature ideas, bug goals, specs, or codebase problems. Use when the user asks for a technical approach, architecture, implementation strategy, solution options, feasibility analysis, system design, or "how should we build/fix this" for Unity runtime, Editor, tools, assets, data, UI, WebGL, SDKs, or production pipelines.
4SKILL.mdUpdated May 26, 2026
cuozg/unity-mcp-orchestrator
tools
VerifiedTrustedCommunity
Orchestrate Unity Editor via MCP (Model Context Protocol) tools and resources. Use when working with Unity projects through MCP for Unity - creating/modifying GameObjects, editing scripts, managing scenes, running tests, or any Unity Editor automation. Provides best practices, tool schemas, and workflow patterns for effective Unity-MCP integration.
4SKILL.mdUpdated May 21, 2026
cuozg/goal-todo
development
VerifiedTrustedCommunity
Convert a spec document into an implementation TODO list in the same spec folder. U se when the user says goal-todo, todo from spec, generate tasks from spec, turn this spec into todos, create implementation checklist, extract tasks, or asks to read a Docs/Specs design doc and produce what must be implemented. Includes UI/UX review and codebase investigation before writing the checklist. Do not use for implementing the tasks, creating new goal files, writing test cases, or verifying completed work.
4SKILL.mdUpdated May 21, 2026