Claude Code 的 Mods：改變 Claude Code 的運作方式 ☕ Buy me a coffee

🧑‍🏫 這支影片介紹 Claude Code 的新功能 mod：一種可以改變工具本身運作方式的改裝套件。影片講它能改什麼、內部怎麼運作、怎麼載入，最後實際做一個「錄影時把 email 遮起來」的 mod。看完你會知道，Claude Code 的畫面和行為有哪些地方可以自己動手改。

• 00:00 Claude Code 新增了 mods，可以直接改變 Claude Code 本身的運作方式
  ↳ Claude Code 是 Anthropic 出的、讓 AI 幫你寫程式和處理檔案的工具。mod 是改裝套件，裝上去能改變這個工具本身怎麼運作。
• 00:00 mod 能改變畫面渲染的內容、送進 prompt 的內容、它發出的 tool call，還能加入自己的 UI、skills 和 commands
  ↳ 能改的很廣：畫面顯示、送給 AI 的指示（prompt）、AI 動用工具的請求（tool call），還能加自己的介面（UI）、技能包（skills）和指令（commands）。
• 00:00 範例一：在 prompt 正上方即時顯示 context 的細項分解，讓 context 更透明
  ↳ context 是 AI 當下記在腦中的全部內容，容量有限。這個範例把它拆開列在輸入框上方，隨時看得到空間被什麼占掉。
• 00:00 範例二：在側邊面板列出專案裡所有的 agent（不只執行中的那個），點一下就能啟動
  ↳ agent 是被派去負責特定任務的 AI 分身。這個範例把專案裡的 agent 全列在旁邊，沒在跑的也看得到，點一下就開工。
• 00:00 範例三：錄影時把 email 地址藏起來，滑鼠移過去（hover）才顯示
  ↳ hover 是滑鼠游標移到某處停著。這個範例讓 email 平常被遮住，游標移過去才露出來，錄螢幕時不會洩漏個資。
• 00:31 mod 其實就是 plugin，一樣用 plugin.json 和 hook.json，唯一差別是 hook.json 多一個 key：modules
  ↳ plugin 是 Claude Code 的擴充套件，靠 plugin.json、hook.json 兩個設定檔描述。mod 格式一樣，只在 hook.json 多一個 modules 欄位（key）。
• 00:31 modules 指向一個 TypeScript 檔，這個檔案就是 mod 本體，裡面寫的函式會在 Claude Code 內部執行
  ↳ modules 這欄填的是一個檔案的位置。那個檔用 TypeScript（一種常見的程式語言）寫成，改裝的邏輯都在裡面，會在 Claude Code 內部執行。
• 00:31 Claude Code 有幾十個內部事件，例如 tool call、權限檢查、執行訊息、送出 prompt，函式要註冊在其中一個事件上
  ↳ 事件是 Claude Code 運作中的各個時間點，像要動用工具、要問你准不准、你按下送出。你的程式要指定掛在哪個時間點上。
• 00:31 註冊的函式每次事件觸發時都會執行，時間點在 Claude Code 做自己的處理之前
  ↳ 掛上去後，那個時間點每發生一次，你的程式就跑一次，而且搶在 Claude Code 自己動手之前，所以才有機會插手。
• 01:02 用過 Express 的話，這基本上就是內建在 Claude Code 裡的 middleware
  ↳ Express 是工程師架網站常用的工具，middleware 指請求送達前先經過的關卡。沒用過沒關係，意思就是 mod 像中途攔截的關卡。
• 01:02 函式一定會拿到三個值；第一個是錢字號（$）物件，用來和 Claude Code 溝通，渲染 UI、呼叫模型、讀檔都在這上面
  ↳ 程式每次被叫到，手上固定有三樣東西。第一樣寫成 $ 符號，是對 Claude Code 的窗口，要畫介面、叫 AI、讀檔都透過它。
• 01:02 第二個值是事件本身，也就是當下發生的事的實際資料，可以在函式裡先修改這些資料再交回給 Claude Code
  ↳ 第二樣是「現在發生了什麼」的具體內容，例如 AI 正要跑的那行指令。你可以先改掉，再交還給 Claude Code。
• 01:33 第三個值是 next：傳給 next 的內容就是 Claude Code 實際會去做的事，例如改了指令，執行的就是改過的指令
  ↳ 第三樣 next 是「放行」的動作。你交給 next 什麼，Claude Code 就照那個做，所以改過指令再放行，跑的就是你改的版本。
• 01:33 也可以不呼叫 next，直接自己 return 結果，這時由你處理這個事件，Claude Code 會採用你的答案而不做自己的處理
  ↳ 你也可以不放行，直接交回結果（return，程式裡「交出答案」的意思）。這樣 Claude Code 會跳過自己那一步，用你的答案。
• 01:33 三者總結：$ 物件連接 Claude Code，事件告訴你發生什麼事，next 決定 Claude Code 最後怎麼做
  ↳ 記三件事就夠：$ 是跟 Claude Code 講話的窗口，事件是現在發生的事，next 決定最後讓它怎麼做。
• 01:33 載入方式：啟動 Claude Code 時對該資料夾加上 plugin dir 旗標
  ↳ 旗標是啟動程式時附在指令後面的選項。開 Claude Code 時加上 plugin dir 這個旗標並指向 mod 資料夾，就會載入。
• 02:04 桌面版 app 不吃旗標，可以改成把資料夾加進全域設定檔
  ↳ 桌面版加旗標沒有用，所以改成把 mod 資料夾寫進全域設定檔，也就是不分專案都會套用的那份設定。
• 02:04 資料夾會被監看，存檔後目前所在的 session 會馬上套用變更
  ↳ session 是你目前開著的這段對話。Claude Code 會盯著 mod 資料夾，你一存檔就生效，不用關掉重開，可以邊改邊試。
• 02:04 實作隱藏 email 的 mod：註冊在 Claude Code 內部的 render 事件上，事件資料是回覆上畫面前的文字
  ↳ render 是把內容畫到螢幕上。影片的實作把程式掛在這個時間點，拿到的是 AI 的回覆文字，還沒顯示出來，正好可以先改。
• 02:35 透過 $ 物件把每個 email 地址做成只在 hover 時顯示文字的小區塊，不呼叫 next 而是 return 它，讓 Claude Code 渲染這個版本
  ↳ 做法是用 $ 把文字裡每個 email 換成「游標移上去才顯示」的小區塊，然後不放行、直接交回這個版本，畫面就照它顯示。
• 02:35 結果：問 Sam 的 email 時，地址只有 hover 才看得到
  ↳ 實際效果：問 AI「Sam 的 email 是什麼」，答案有出來但被遮住，游標移上去才看得到。
• 02:35 再請 Claude 寫訊息時仍會用真正的 email，因為 render 只改變畫面顯示，模型從沒看到改過的版本
  ↳ 被遮住的只有螢幕上的顯示。AI 手上的資料沒被動過，所以接著請它寫訊息，還是會填正確的 email。
• 02:35 mod 只看得到 Claude Code 開放出來的事件，而且在自己的 sandbox 裡執行，所以一切都要透過 $ 物件
  ↳ sandbox 是隔離的執行空間，程式在裡面碰不到外面。mod 只看得到 Claude Code 開放的時間點，要做事只能透過 $。
• 03:05 mod 就是 plugin，所以也能當 plugin 分享：放進 marketplace repo，別人就能像安裝其他 plugin 一樣安裝
  ↳ marketplace repo 是放 plugin 供人安裝的程式碼倉庫。mod 既然是 plugin，放上去後別人用平常裝 plugin 的方式就能裝。

在 mod 的函式中，如果不呼叫 next，而是自己 return 一個結果，會發生什麼事？