code-visualizerlisted

# Code Visualizer `<SKILL_DIR>` = the folder that contains this SKILL.md (normally `~/.claude/skills/code-visualizer`). Resolve it once to an absolute path before running commands - PowerShell/cmd do not expand `~` inside quotes. ## Purpose Generate beautiful, interactive visual code explanations — proactively, without waiting for user to ask. Two modes: 1. **Rift Code** — open `https://rift-code.com` in browser for full repo architecture visualization 2. **HTML Generation** — create standalone HTML files with syntax highlighting, Mermaid diagrams, step-by-step walkthroughs ## Decision Tree — When and What ``` Code explanation needed? ├── YES: GitHub repo context available? │ ├── YES: Repo-wide explanation (architecture, dependencies, cross-file)? │ │ ├── YES → Open Rift Code in browser + optional HTML for deep-dives │ │ └── NO (single file/function) → HTML only │ └── NO (standalone snippet, algorithm, concept): │ └── HTML only └── NO: Do not trigger ``` ## Proactive Triggers (NO user request needed) Activate automatically when Claude is about to: 1. Explain an algorithm with **5+ steps** 2. Describe system architecture with **3+ components** 3. Walk through debugging with **multiple state changes** 4. Do a code review touching **3+ aspects** 5. Explain data flow with **3+ transformation stages** 6. User pastes a function/class and asks "how does this work" / "איך זה עובד" **DO NOT trigger for:** one-liner explanations, trivial code, when excalidra