利用 Claude 建置自己各種興趣的 Side Project

Day10 結尾給了四句起步順序，今天把它展開成可以照做的版本。CLAUDE.md 201 行逐段盤完之後最反直覺的一筆是：行為準則只佔 14 行，路由與結構佔掉一半。skill 從 9 個開始，現在 15 個，中間有 10 個名字已經退場。這篇講五步起手式、每步配一個我實際付過的代價，12 條寫進 skill 才會生效的使用習慣，加上我實際的 routines（半年只有 42 個活躍天，斷過兩次一整個月）。文末附一段可以直接複製給 AI 的建置 prompt，它會先訪談你 12 個問題，再照你的答案長出你自己的骨架。

Day5 到 Day7 的 coffee-review 跑在 GitHub Pages + Supabase 上，今天整套搬到 Cloudflare。改變最大的不是資料庫，是登入——原本 Google OAuth 是 app 的一部分，跑在瀏覽器裡、要處理 PKCE 與回跳；搬完之後 app.js 裡一行 OAuth 程式碼都沒有，登入被推到 Cloudflare Access，在請求碰到 Worker 之前就結束了。記錄兩個取捨、既有的 Google OAuth client 怎麼直接接上 Zero Trust、首次部署失敗與 AUD 只能靠一個 302 驗證的過程，以及 service worker 怎麼讓 Access 過期後回不去登入頁。

vault 從 iCloud 搬到 git 時，防的是兩台機器互相覆蓋；但實際用法已經變成同一台電腦同時開好幾個 Claude session。共用一個工作目錄時 git 不會產生 merge conflict，只會靜默覆蓋。記錄一次真實撞車、一份八條的協定和它第一版建立在錯誤前提上的地方、log 月檔改用 merge=union 之後合併仍然出錯的兩種情況，以及接下來可能遇到的問題和走法。

搬到 Cloudflare 之後回頭清 issue，關掉 5 張過時的，挑了列表排序與分組來做。記錄日期該照哪個欄位排、杯測場次在分組時怎麼算，以及 code review 抓到的兩個 bug：沒有杯的場次在分組時整個消失，和改排序時重新打 API 造成的舊畫面覆蓋。

做 #97，把杯測表單拆成「設定、評分、揭曉」三個階段。方案在 plan mode 裡被推翻了五六次：解鎖按鈕拿掉、返回鍵拿掉、按鈕從底部搬到頂端、揭曉頁從表格改成杯卡、頒獎台畫了又撤。實作上把唯一一組評分元件搬到點開的杯卡下面，並用凍結順序避免改分數時卡片跳走；另外記錄 service worker 快取讓新 CSS 看不到、以及兩次 code review 抓到的 bug。

拿一份附了檔案位置與 diff 的設計 handoff 修部落格，照做前先驗證，發現三處跟實際不符：layouts/blogs/list.html 會套到所有分類頁、水平捲動掃了 121 頁都重現不出來、閱讀時間到不了預期的 5–7 分鐘。另外記錄上一篇／下一篇怎麼定義「同分類」、Series 總覽頁怎麼做到英文網址配中文名稱，以及三個坑：Claude 把截圖時機誤判成 overflow 弄壞 image-zoom、html/template 把 var() 預設值轉成 ZgotmplZ、全站連結色的優先權把實心按鈕的字蓋成深色，而對比掃描用 3:1 當門檻漏抓了一顆。

Day11 列過 llm-wiki 的 15 個 skill，但只有名字、一句話用途和行數。今天附上 inbox-triage、wiki-query、wiki-build、note-enrich、note-explore、vault-maintain 的範本，拿掉個人資訊和我這個 vault 特有的部分。每個 skill 附上什麼時候用、自己客製化時要注意哪幾條。把 llm-wiki 看成一台引擎：wiki-build 是核心，inbox-triage 負責加燃料，wiki-query 產出答案，vault-maintain 定期檢修，note-enrich 和 note-explore 分別顧思考的廣度與深度。另外說明其他 skill 為什麼不放，以及一個容易誤解的地方：這六個不是各自獨立的指令，它們共用 index.md、log、TODO.md 幾個慣例，也會互相呼叫。

用 git 同步 vault 十天後的四個觀察：log 和 TODO 這種每個動作都會碰的檔一直衝突、手機能互動很實用、本機所有 session 都踩在 main 上互相卡住、GitHub 網頁可以直接當閱讀介面。今天一次 push 被另一個 session 沒 commit 的變更擋下來，於是把「每個 session 都開 worktree、不分任務大小」寫成規則，並用 SessionStart 與 PreToolUse 兩層 hook 擋住在主目錄寫檔。記錄過程中的取捨（為什麼不是看情況才開、為什麼保留 Obsidian 自動 pull、規則之外要不要用 hook 硬擋、收件重複要查 git 歷史還是另記一本帳、過期的決策檔怎麼刪），四個坑（hook 擋到自己要寫的另一個 repo、剛開的 worktree 被判成可清、log 同一個 hunk 混著兩個 session 的條目、在 worktree 裡長指令被拒），以及接下來要觀察的九件事。

新專案 travel-storage：跟 Claude 一起排行程，每趟旅行做成一個自含式 HTML，放成一個私人網站。這篇記錄旅行頁怎麼設計成「一頁走完一趟旅行」：模板照行前指南還是回來後的全紀錄、行程項目用 done/plan/skip 等狀態從計畫走到實際、行前指南原樣內嵌而不是拆掉重寫、總覽頁對還沒結束的旅行只給出發日期（網址也不帶地名）、旅途中「先在對話回選項，挑了才寫進頁面」的更新流程，以及離線快取的代價。

/projects/ 的卡片明明寫了 aspect-ratio，Art-Tracking 還是被一張直式截圖撐到 985px：封面是 column flex 的子項目，圖片的 height 100% 對不到確定的高度，修法是把圖片改成絕對定位。另外記錄封面比例選 4:3、手動 weight 排序、Archived 分區、自動連到最新一篇開發紀錄、為了漢堡選單複製一份 PaperMod header，以及上線後第二輪把小卡精簡、封面從截圖換成 icon。坑包括只讀 CSS 就誤判、漏一行 project 讓最新一篇指錯、背景分頁量到 0×0、拿掉一層包裝後標題被主題蓋成 24px。