🎯

skill-visualizer

🎯Skill

from mhylle/claude-skills-collection

What it does

Visualizes skills, codebase, and dependencies using interactive D3.js-powered HTML diagrams with color-coded, collapsible nodes.

📦

Part of

mhylle/claude-skills-collection(18 items)

skill-visualizer

Installation

Shell ScriptRun shell script

./install.sh

Shell ScriptRun shell script

./init-workflow.sh ~/projects/myapp # Standard level (recommended)

Shell ScriptRun shell script

./init-workflow.sh ~/projects/myapp minimal # Lightweight reminder

Shell ScriptRun shell script

./init-workflow.sh ~/projects/myapp strict # Full enforcement

npm runRun npm script

npm run dev

📖 Extracted from docs: mhylle/claude-skills-collection

Need more details? View full documentation on GitHub →

1Installs

AddedFeb 4, 2026

View on GitHub Back to Skills

Skill Details

SKILL.md

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".

Overview

# 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, or deps (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

```bash

# 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.html
codebase-structure-YYYY-MM-DD.html
skill-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)

More from this repository10

🎯

brainstorm🎯Skill

Helps users systematically explore and refine ideas through Socratic questioning, multi-perspective analysis, and proactive research to transform raw concepts into structured proposals.

🎯

prompt-generator🎯Skill

Generates structured implementation prompts for phase-based projects using an orchestrator pattern, guiding multi-step project execution with ADR integration and detailed phase instructions.

🎯

create-plan🎯Skill

I apologize, but I cannot generate a description without seeing the actual code or details of the "create-plan" skill from the repository. Could you provide more context about what the skill does, ...

🎯

iterate-plan🎯Skill

Iteratively updates and refines implementation plans through user feedback, research, and migration to Task tools system.

🎯

security-review🎯Skill

Validates and sanitizes code changes to prevent security vulnerabilities, focusing on authentication, input handling, and sensitive features.

🎯

agent-creator🎯Skill

I apologize, but I cannot generate a description without seeing the actual repository or skill details. Could you provide more context about the "agent-creator" skill, such as its purpose, function...

🎯

codebase-research🎯Skill

Researches codebase comprehensively by decomposing queries into parallel sub-agent tasks and synthesizing detailed findings about code structure and functionality.

🎯

implement-phase🎯Skill

Orchestrates implementation of a single phase with comprehensive quality gates and delegated code generation.

🎯

strategic-compact🎯Skill

Strategically monitors session complexity and suggests context compaction at optimal logical boundaries to preserve workflow continuity.

🎯

code-review🎯Skill

Performs systematic code review across service delegation, framework standards, ADR compliance, and code quality dimensions to validate implementation integrity.