levalencia Skill Visualizer
Generate interactive HTML visualizations for exploring skills, codebase structure, and dependencies.
Overview
This skill creates browser-viewable HTML files with interactive diagrams. It supports multiple visualization types and outputs self-contained HTML files that open directly in any browser.
Arguments
$0: Output type -skills,codebase, ordeps(default: skills)
Examples:
/skill-visualizer- Generate skills collection map/skill-visualizer skills- Generate skills collection map/skill-visualizer codebase- Generate codebase structure visualization/skill-visualizer deps- Generate skill dependency graph
Visualization Types
Skills Map (skills)
Generates an interactive force-directed graph of all skills showing:
- Skill nodes with name and type indicator
- Color coding by skill type:
- Green: Orchestrators (context: fork)
- Blue: Read-only (allowed-tools restrictions)
- Orange: Hybrid (standard skills)
- Hover tooltips with skill descriptions
- Drag to reposition nodes
Codebase Structure (codebase)
Generates a treemap visualization of the project structure:
- Directory hierarchy with expandable nodes
- File type distribution by color
- Size indicators for each file/directory
Dependency Graph (deps)
Generates a directed graph showing skill dependencies:
- Which skills invoke other skills
- Integration points between skills
- Visual workflow representation
Usage
- Invoke the skill with desired output type
- The skill runs Python scripts to analyze the codebase
- Generates self-contained HTML with embedded CSS/JS
- Opens in default browser automatically
# Run directly
python ~/.claude/skills/skill-visualizer/scripts/visualize.py skills
# Output location
docs/visualizations/skills-map-YYYY-MM-DD.html
Output
All visualizations are saved to docs/visualizations/:
skills-map-YYYY-MM-DD.htmlcodebase-structure-YYYY-MM-DD.htmlskill-deps-YYYY-MM-DD.html
HTML Features
- Self-contained: No external dependencies (D3.js embedded)
- Responsive design: Works on any screen size
- Interactive: Pan, zoom, drag nodes
- Tooltips: Hover for details
- Dark theme: Easy on the eyes
- Export-ready: Can screenshot for documentation
Python Scripts
The skill uses Python scripts in scripts/ directory:
visualize.py- Main visualization generator- Requires only standard library (no pip install needed)