跳到正文
cccskills
免费在 GitHub 公开

codebase-visualizer

Generate an interactive HTML tree visualization of the current project's file structure, with file sizes, color-coded file types, and a sidebar summary. Use when exploring a new repository, understanding project layout, identifying large files, or getting an overview of a codebase.

中文简介正在准备中。当前显示原文说明。

查看安装方法

包含的文件(2)

  • SKILL.md1.6 KB
  • scripts/visualize.py10.7 KB

SKILL.md(原文)

安装前可以查看交给 AI 代理的指令内容。

Generate an interactive collapsible HTML tree of the project.

Usage

Run the visualizer script from the project root:

python3 ${CLAUDE_SKILL_DIR}/scripts/visualize.py .

This creates codebase-map.html in the current directory and opens it in the default browser.

What it shows

  • Collapsible directory tree — click any folder to expand or collapse it
  • File sizes displayed next to each file name
  • Color-coded dots for file types (.js, .ts, .py, .go, .rs, and more)
  • Directory size totals (sum of all files within)
  • Sidebar summary: total file count, directory count, total size, number of unique file types
  • Bar chart of the top 8 file types by total size

Ignored automatically: .git, node_modules, __pycache__, .venv, venv, dist, build, and any directory or file whose name starts with ..

Instructions

  1. Run the command above from the root of the project you want to visualize.
  2. Report the absolute path of the generated file.
  3. The script opens the file in the default browser automatically. If it does not open, tell the user to open the reported path manually.
  4. If Python 3 is not available, report the error from the command and stop.

评价

还没有评价。欢迎分享你的使用感受。

评论

无需登录即可发表。欢迎分享使用感受、提问,或说明在哪些环境下无法运行。

还没有评论。来写第一条吧。

提交后会立即公开。请勿填写邮箱、电话等个人信息。URL 最多 2 个。

0 / 1000 字

此表单受 reCAPTCHA 保护,适用 Google 的隐私权政策和服务条款。

同一仓库的技能

Write an Architecture Decision Record (ADR) document for a technical decision. Use when documenting a technical choice, architectural decision, or design decision.

中文简介正在准备中。当前显示原文说明。

davila7/claude-with-skills132026年5月15日 更新

REST API design conventions for this codebase. Use when writing or reviewing API endpoints, route definitions, response formatting, or client code that calls the API.

中文简介正在准备中。当前显示原文说明。

davila7/claude-with-skills132026年5月15日 更新

Automatically format code files after every edit using Prettier and ESLint. Active in the background whenever Claude edits a file. Formatting is silent — no prompts, no output unless a formatter fails. Use when you want consistent formatting enforced automatically during a coding session.

中文简介正在准备中。当前显示原文说明。

davila7/claude-with-skills132026年5月15日 更新

Create a git branch named after a GitHub issue.

中文简介正在准备中。当前显示原文说明。

davila7/claude-with-skills132026年5月15日 更新

Draft a CHANGELOG.md entry for the current changes in Keep a Changelog format. Use when releasing, tagging a version, or updating CHANGELOG.md.

中文简介正在准备中。当前显示原文说明。

davila7/claude-with-skills132026年5月15日 更新

Draft the changelog entry for all unreleased commits in Keep a Changelog format. Groups commits into Added, Changed, Fixed, Removed, and Security. Use before releasing a new version or when updating CHANGELOG.md.

中文简介正在准备中。当前显示原文说明。

davila7/claude-with-skills132026年5月15日 更新

查看 davila7 的全部技能

报告此技能的问题