Skill Visualizer
by mhylle
Generate interactive HTML visualizations of the skills collection, codebase structure, or dependency graphs. Uses D3.js for interactive visualization with collapsible nodes, color-coded categories, and hover details. Triggers on "visualize skills", "generate skill map", "codebase visualization", or "show skill dependencies".
Skill Details
Repository Files
2 files in this skill directory
name: skill-visualizer description: Generate interactive HTML visualizations of the skills collection, codebase structure, or dependency graphs. Uses D3.js for interactive visualization with collapsible nodes, color-coded categories, and hover details. Triggers on "visualize skills", "generate skill map", "codebase visualization", or "show skill dependencies". allowed-tools: Bash(python *), Read, Glob, Write argument-hint: "[type: skills|codebase|deps]"
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)
Related Skills
Mermaid Diagrams
Comprehensive guide for creating software diagrams using Mermaid syntax. Use when users need to create, visualize, or document software through diagrams including class diagrams (domain modeling, object-oriented design), sequence diagrams (application flows, API interactions, code execution), flowcharts (processes, algorithms, user journeys), entity relationship diagrams (database schemas), C4 architecture diagrams (system context, containers, components), state diagrams, git graphs, pie charts,
Matlab
MATLAB and GNU Octave numerical computing for matrix operations, data analysis, visualization, and scientific computing. Use when writing MATLAB/Octave scripts for linear algebra, signal processing, image processing, differential equations, optimization, statistics, or creating scientific visualizations. Also use when the user needs help with MATLAB syntax, functions, or wants to convert between MATLAB and Python code. Scripts can be executed with MATLAB or the open-source GNU Octave interpreter
Dask
Distributed computing for larger-than-RAM pandas/NumPy workflows. Use when you need to scale existing pandas/NumPy code beyond memory or across clusters. Best for parallel file processing, distributed ML, integration with existing pandas code. For out-of-core analytics on single machine use vaex; for in-memory speed use polars.
Consult Zai
Compare z.ai GLM 4.7 and code-searcher responses for comprehensive dual-AI code analysis. Use when you need multiple AI perspectives on code questions.
Writing Effective Prompts
Structure Claude prompts for clarity and better results using roles, explicit instructions, context, positive framing, and strategic organization. Use when crafting prompts for complex tasks, long documents, tool workflows, or code generation.
Analyze Performance
Establish performance baselines and detect regressions using flamegraph analysis. Use when optimizing performance-critical code, investigating performance issues, or before creating commits with performance-sensitive changes.
Flowchart Creator
Create HTML flowcharts and process diagrams with decision trees, color-coded stages, arrows, and swimlanes. Use when users request flowcharts, process diagrams, workflow visualizations, or decision trees.
Bio Reporting Rmarkdown Reports
Create reproducible bioinformatics analysis reports with R Markdown including code, results, and visualizations in HTML, PDF, or Word format. Use when generating analysis reports with RMarkdown.
Desmos Graphing
Create interactive Desmos graphs in Obsidian using desmos-graph code blocks. Use when visualizing functions, parametric curves, inequalities, or mathematical relationships with customizable styling and settings.
Performance
Rendimiento & Optimización - Atoll Tourisme. Use when optimizing performance or profiling code.