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:
- Rift Code — open
https://rift-code.com in browser for full repo architecture visualization
- 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:
- Explain an algorithm with 5+ steps
- Describe system architecture with 3+ components
- Walk through debugging with multiple state changes
- Do a code review touching 3+ aspects
- Explain data flow with 3+ transformation stages
- User pastes a function/class and asks "how does this work" / "איך זה עובד"
DO NOT trigger for: one-liner explanations, trivial code, when excalidraw-diagram-generator is already handling a diagram request.
Always announce: "מייצר הסבר ויזואלי..." so user knows what's happening and can say "skip".
Rift Code Workflow
- Open browser to
https://rift-code.com
- User authenticates with GitHub (first time only)
- Select the relevant repository for analysis
- Use for: dependency graphs, module relationships, cross-file architecture
- After exploration, optionally generate HTML for specific code deep-dives
HTML Generation Workflow
Step 1: Choose Template
| Template |
Use When |
algorithm-walkthrough |
Step-by-step algorithm/function explanation |
architecture-overview |
System design, module relationships, component diagrams |
code-review |
Annotated code review with severity markers |
debugging-flow |
Bug investigation with state changes at each step |
data-flow |
Data transformation pipeline visualization |
slide-deck |
Multi-slide presentation of any code topic |
Step 2: Read Template
Read the chosen template from <SKILL_DIR>/templates/{template-name}.html
Step 3: Generate HTML
Replace placeholder markers in template:
{{TITLE}} — explanation title{{SUBTITLE}} — optional subtitle/context{{LANGUAGE}} — highlight.js language identifier{{CODE_BLOCKS}} — actual code with annotations{{MERMAID_DIAGRAM}} — Mermaid diagram definition{{STEPS}} — step-by-step walkthrough content{{METADATA}} — date, source file, author info
Step 4: Save & Open
- Save to
./code-visualizations/{type}-{name}-{YYYY-MM-DD}.html inside the current project directory (create the folder if missing). If there's no project directory in context (e.g. a standalone question), fall back to <SKILL_DIR>/output/{type}-{name}-{YYYY-MM-DD}.html.
- Open in browser via Playwright or inform user of file path
- File is self-contained — works offline, no server needed
Design System
- Theme: Dark (Dracula) default, Light toggle available
- Code font: JetBrains Mono via Google Fonts CDN
- Text font: Inter via Google Fonts CDN
- Syntax highlighting: highlight.js v11.9.0 (dracula theme)
- Diagrams: Mermaid v10.9.0
- Navigation: Arrow keys for steps/slides, F for fullscreen, Esc to exit
- Responsive: Works on mobile, tablet, desktop
- Print-friendly:
@media print rules included
Mermaid Quick Reference
For common diagram types, read references/mermaid-cheatsheet.md.
For supported highlight.js languages, read references/highlight-languages.md.
Key Principles
- Proactive > Reactive — don't wait for user to ask. If code explanation is complex, visualize it
- HTML is the default — Rift Code only for repo-wide analysis
- Self-contained — every HTML file must work by double-clicking, no dependencies
- Dark theme first — matches developer environments
- Keyboard-first navigation — arrow keys, F, Esc
- No overlap with excalidraw — if user wants a standalone diagram (no code context), defer to excalidraw skill
- Announce activation — always tell user "מייצר הסבר ויזואלי..." before generating
- Keep templates as reference — Claude reads the template structure and generates content inline, adapting layout to the specific explanation need
1---2name: code-visualizer3description: Generate visual code explanations with syntax highlighting, Mermaid diagrams, and interactive walkthroughs. Opens Rift Code for repo-level analysis. TRIGGER when: explaining code, algorithms, architecture, data flow, debugging, or code review. Also triggers on: 'visualize this code', 'show me how this works', 'explain visually', 'code diagram', 'תראה לי ויזואלית', 'הסבר קוד', 'תרשים קוד', 'ויזואליזציה', 'הסבר אלגוריתם', 'סקירת קוד'. PROACTIVELY trigger when Claude is about to explain complex code (5+ steps), describe architecture (3+ components), walk through debugging with state changes, or review code touching 3+ aspects.4---56# Code Visualizer78`<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.910## Purpose1112Generate beautiful, interactive visual code explanations — proactively, without waiting for user to ask. Two modes:13141. **Rift Code** — open `https://rift-code.com` in browser for full repo architecture visualization152. **HTML Generation** — create standalone HTML files with syntax highlighting, Mermaid diagrams, step-by-step walkthroughs1617## Decision Tree — When and What1819```20Code explanation needed?21├── YES: GitHub repo context available?22│ ├── YES: Repo-wide explanation (architecture, dependencies, cross-file)?23│ │ ├── YES → Open Rift Code in browser + optional HTML for deep-dives24│ │ └── NO (single file/function) → HTML only25│ └── NO (standalone snippet, algorithm, concept):26│ └── HTML only27└── NO: Do not trigger28```2930## Proactive Triggers (NO user request needed)3132Activate automatically when Claude is about to:33341. Explain an algorithm with **5+ steps**352. Describe system architecture with **3+ components**363. Walk through debugging with **multiple state changes**374. Do a code review touching **3+ aspects**385. Explain data flow with **3+ transformation stages**396. User pastes a function/class and asks "how does this work" / "איך זה עובד"4041**DO NOT trigger for:** one-liner explanations, trivial code, when excalidraw-diagram-generator is already handling a diagram request.4243**Always announce:** "מייצר הסבר ויזואלי..." so user knows what's happening and can say "skip".4445## Rift Code Workflow46471. Open browser to `https://rift-code.com`482. User authenticates with GitHub (first time only)493. Select the relevant repository for analysis504. Use for: dependency graphs, module relationships, cross-file architecture515. After exploration, optionally generate HTML for specific code deep-dives5253## HTML Generation Workflow5455### Step 1: Choose Template5657| Template | Use When |58|----------|----------|59| `algorithm-walkthrough` | Step-by-step algorithm/function explanation |60| `architecture-overview` | System design, module relationships, component diagrams |61| `code-review` | Annotated code review with severity markers |62| `debugging-flow` | Bug investigation with state changes at each step |63| `data-flow` | Data transformation pipeline visualization |64| `slide-deck` | Multi-slide presentation of any code topic |6566### Step 2: Read Template6768Read the chosen template from `<SKILL_DIR>/templates/{template-name}.html`6970### Step 3: Generate HTML7172Replace placeholder markers in template:73- `{{TITLE}}` — explanation title74- `{{SUBTITLE}}` — optional subtitle/context75- `{{LANGUAGE}}` — highlight.js language identifier76- `{{CODE_BLOCKS}}` — actual code with annotations77- `{{MERMAID_DIAGRAM}}` — Mermaid diagram definition78- `{{STEPS}}` — step-by-step walkthrough content79- `{{METADATA}}` — date, source file, author info8081### Step 4: Save & Open8283- Save to `./code-visualizations/{type}-{name}-{YYYY-MM-DD}.html` inside the current project directory (create the folder if missing). If there's no project directory in context (e.g. a standalone question), fall back to `<SKILL_DIR>/output/{type}-{name}-{YYYY-MM-DD}.html`.84- Open in browser via Playwright or inform user of file path85- File is self-contained — works offline, no server needed8687## Design System8889- **Theme:** Dark (Dracula) default, Light toggle available90- **Code font:** JetBrains Mono via Google Fonts CDN91- **Text font:** Inter via Google Fonts CDN92- **Syntax highlighting:** highlight.js v11.9.0 (dracula theme)93- **Diagrams:** Mermaid v10.9.094- **Navigation:** Arrow keys for steps/slides, F for fullscreen, Esc to exit95- **Responsive:** Works on mobile, tablet, desktop96- **Print-friendly:** `@media print` rules included9798## Mermaid Quick Reference99100For common diagram types, read `references/mermaid-cheatsheet.md`.101For supported highlight.js languages, read `references/highlight-languages.md`.102103## Key Principles1041051. **Proactive > Reactive** — don't wait for user to ask. If code explanation is complex, visualize it1062. **HTML is the default** — Rift Code only for repo-wide analysis1073. **Self-contained** — every HTML file must work by double-clicking, no dependencies1084. **Dark theme first** — matches developer environments1095. **Keyboard-first navigation** — arrow keys, F, Esc1106. **No overlap with excalidraw** — if user wants a standalone diagram (no code context), defer to excalidraw skill1117. **Announce activation** — always tell user "מייצר הסבר ויזואלי..." before generating1128. **Keep templates as reference** — Claude reads the template structure and generates content inline, adapting layout to the specific explanation need
hiyabh