Skip to content
Development
Skill

/codebase-visualizer

Generate an interactive tree visualization of your codebase. Use when exploring a new repo or understanding project structure.

From plugin
claude-code-engineering
1.1k11 skills16 agents11 commands6 MCP
Install
$ npx -y skills add huangjia2019/claude-code-engineering --skill codebase-visualizer --agent claude-code

How it fires

How this skill gets triggered: by you, by Claude, or both.

  • Fires itselfAuto-invocation. Claude auto-loads it when your prompt matches the work.Auto-invocation is when the right skill fires by itself at the right moment, driven by a FLOW.md router and a hook, instead of you invoking it by name. It is the difference between a skill being installed and a skill actually getting used.Read the full definition →
  • You can call itInvoke it directly when you want it.
  • Slash command/codebase-visualizer

Context preview

The summary Claude sees to decide when to auto-load this skill.

Generate an interactive tree visualization of your codebase. Use when exploring a new repo or understanding project structure.

SKILL.md

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

Run the visualization script from your project root:

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

This creates `codebase-map.html` and opens it in your default browser.

Ships withclaude-code-engineering

This repository demonstrates how to use Claude Code to do real engineering work, not just writing code. 本项目是极客时间专栏 《Claude Code 工程化实战》 的官方配套示例仓库,目标就是: 👉 把 Claude Code 从“对话式编码工具”,变成 可设计、可复用、可治理的工程系统。

Get the whole plugin

Other skills on claude-code-engineering.