📘 folder-tree-html 使用說明

這是一個 Claude Code Skill,會幫指定的資料夾產生一份互動式 HTML 樹狀結構圖,方便在整理檔案前後快速掌握資料夾現況。

註:SKILL.md 是寫給 Claude 讀的執行步驟(技術細節),這份 README.html 是給人看的使用說明。

安裝方式(分享給同事使用)

把整個 folder-tree-html 資料夾(含裡面的 SKILL.md 與這份 README.html)複製到您自己電腦的以下路徑:

%USERPROFILE%\.claude\skills

備註:如果大家已經順利安裝好Claude code的話,立論上電腦就會有%USERPROFILE%\.claude的路徑,如果先前大家尚未請claude生成任何skill檔的話,我們需要在這個路徑新增一個skills的資料夾

放好之後,開一個新的 Claude Code 對話即可使用(Skill 清單通常在對話開始時載入,複製完若舊對話沒抓到,開新對話再試一次)。

怎麼呼叫

在 Claude Code 對話中,直接用自然語言請求即可,例如:

也可以指定其他資料夾,例如:「幫我對 C:\Projects\某案子 產生資料夾結構圖」。若未指定路徑,預設會以目前工作目錄為對象。

會產生什麼

一個檔名為 資料夾結構圖_YYYYMMDD.html 的檔案,存放在被掃描的資料夾根目錄下(跟資料一起放,方便日後對照)。用瀏覽器打開即可看到:

使用時機

系統需求

需要 GNU find(支援 -printf)與 GNU awk(支援 \x 十六進位跳脫)。在 Windows 上這代表要透過 Git Bash 執行;純 PowerShell 或 macOS 內建的 BSD find 需要調整指令才能相容(SKILL.md 裡有註記這點)。

客製化

如果想調整規則(例如想額外標示 .tmp、desktop.ini,或想改變預設展開層級、輸出檔名格式),可以直接請 Claude「照 folder-tree-html 這個 skill 的做法,但改成標示 xxx」,不需要自己改 SKILL.md,Claude 會依需求微調步驟。

已知限制