Is the output file portable?

Absolutely; it generates a single codebase-map.html file that can be shared with teammates or opened in any modern web browser without additional dependencies.

Does it support different programming languages?

Yes, it visualizes any file structure regardless of the language and uses color-coding to help distinguish between various file types.

How do I generate the codebase map?

Run the provided Python script within your project root via Claude Code to generate a standalone interactive HTML file.

Can I see the total size of my folders?

Yes, the skill calculates and displays aggregate size totals for each directory to help you identify which parts of the project are the largest.

Codebase Visualizer

Name: Codebase Visualizer
Author: iamhoonse-dev

byiamhoonse-dev

0•

Developer Tools

Generates interactive, collapsible HTML tree maps of your project structure to simplify codebase exploration and file analysis.

Codebase Visualizer is a powerful Claude Code Skill designed to provide a bird's-eye view of any project. By generating a dynamic HTML map, it helps developers quickly grasp the architecture of unfamiliar repositories, identify large files that may need optimization, and navigate complex directory structures with ease. Whether you are onboarding onto a new team or auditing a legacy system, this skill transforms text-based directory listings into an intuitive, color-coded interactive experience that highlights both file sizes and directory aggregates.

Key Features

01Color-Coded File Types: Differentiate between source code, assets, and configuration files at a glance.

02Automated HTML Generation: Creates a portable codebase-map.html file that opens in any browser.

03Interactive Collapsible Tree: Expand and collapse directories to focus on specific modules.

04Python-Powered Analysis: Uses a robust script to scan and calculate directory metrics accurately.

050 GitHub stars

06File Size Visualization: Instantly see the size of individual files and aggregate directory totals.

Use Cases

01Performing a codebase audit to identify bloated directories or unnecessarily large files.

02Onboarding to a new repository to understand the high-level project architecture.

03Creating visual documentation of a project structure for team reviews and architectural planning.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add iamhoonse-dev/iamhoonse-claude-code-plugin visualize-codebase

For use in Claude.ai and ChatGPT

Download Skill