AgentSkillsCN

codebase-visualizer

以交互式可折叠树形图的形式，可视化您的代码库结构。当您需要探索新仓库、理解项目架构、识别大文件，或快速融入某个项目时，可使用此技能。

SKILL.md
--- frontmatter
name: codebase-visualizer
description: Generate an interactive collapsible tree visualization of your codebase. Use when exploring a new repo, understanding project structure, identifying large files, or onboarding to a project.
allowed-tools: Bash(python *)

Codebase Visualizer

Generate an interactive HTML tree view that shows your project's file structure with collapsible directories.

Usage

Run from your project root:

bash
python ~/.claude/skills/codebase-visualizer/scripts/visualize.py .

Options

bash
# Custom output file
python ~/.claude/skills/codebase-visualizer/scripts/visualize.py . -o project-structure.html

# Limit depth
python ~/.claude/skills/codebase-visualizer/scripts/visualize.py . --max-depth 3

# Include hidden files
python ~/.claude/skills/codebase-visualizer/scripts/visualize.py . --include-hidden

# Don't auto-open browser
python ~/.claude/skills/codebase-visualizer/scripts/visualize.py . --no-open

Features

  • •Collapsible directories: Click folders to expand/collapse, with expand/collapse all buttons
  • •File sizes: Human-readable sizes (KB, MB) next to each file
  • •Size indicators: Visual bars showing relative file sizes
  • •Directory statistics: File count and total size per folder
  • •Color-coded file types: Different colors for code, config, docs, assets
  • •Search/filter: Quickly find files by name
  • •Gitignore support: Automatically respects .gitignore patterns
  • •Keyboard navigation: Arrow keys to navigate, Enter to expand/collapse
  • •Export: Copy tree structure as text

What it helps you understand

  • •Where the bulk of the code lives
  • •Project organization patterns
  • •Unusually large files that may need attention
  • •Overall project complexity at a glance