Agent skill

codebase-visualizer

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

huangjia2019github.com/huangjia2019GitHub ↗
claude-coderead-onlyships scripts
Install
npx skills add huangjia2019/claude-code-engineering --skill 04-codebase-visualizer --agent claude-code

Same command for any agent — swap --agent for codex, cursor, copilot.

Facts
Files in the skill folder: 5
SKILL.md size: 0 KB
Bundled scripts: yes
Allowed tools: -Bash(python*)
Path: 04-Skills/projects/04-codebase-visualizer/SKILL.md
Open the folder on GitHub →
Where it comes from
Stars: 1,040
Language: JavaScript

Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.

From the SKILL.md

Run the visualization script from your project root: ```bash python .claude/skills/codebase-visualizer/scripts/visualize.py . ``` This creates `codebase-map.html` and opens it in your default browser.

What's inside
Ships with 4 files
  • .claude/skills/codebase-visualizer/SKILL.md
  • .claude/skills/codebase-visualizer/scripts/visualize.py
  • README.md
  • scripts/visualize.py
Commands it runs
python .claude/skills/codebase-visualizer/scripts/visualize.py .
More from claude-code-engineering
All skills →
route-scanningScan Express.js source files to discover all API route definitions.Backend & APIcode-reviewingReview code for quality, security, and best practices. Use when the user asks for code review…Securityapi-documentingGenerate API documentation from code. Use when the user wants to document APIs, create API…Backend & APIfinancial-analyzingAnalyze financial data, calculate financial ratios, and generate analysis reports. Use when the…Data & Analyticsfinancial-analyzingAnalyze financial data, calculate financial ratios, and generate analysis reports. Use when the…Data & Analyticsapi-generatingGenerate API endpoint code and documentation from specifications. Use when the user wants to create…Backend & API
About this skill
What does the codebase-visualizer skill do?

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

How do I install it?

Run `npx skills add huangjia2019/claude-code-engineering --skill 04-codebase-visualizer --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.

Where does this skill come from?

From huangjia2019/claude-code-engineering, a repository with 1,040 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.

Is a popular skill a good skill?

Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.

Keep going
All skills →
The full catalog, by category and by tool.
Open Source Radar →
The repositories these skills come from, watched daily.
The people behind them →
Makers and builders across the ecosystem.