隨著「我的冰箱」、「採買清單」、「食譜與最愛食譜」，到 AI 食材辨識、全聯特價食材與 AI 食譜推薦，系統的功能越來越完整，但是～～

「這些功能真的可靠嗎？」

程式可以正常執行，不代表程式沒有問題。可能某個按鈕偶爾失效、資料刪除後畫面沒有更新、AI 回傳異常格式時造成錯誤，甚至只是修改了一個功能，卻不小心讓原本正常的功能壞掉。

因此，今天我們不再急著增加新功能，而是使用 Claude Code 對目前的 my-refrigerator 進行一次完整的 Test、Debug 與 Refactoring。

這一次，我們會建立並使用新的 Testing Skill。

如果前面的 Feature Skill 告訴 Claude Code「一個功能應該怎麼開發」，那麼 Testing Skill 就可以告訴 Claude Code：

「完成一個功能之後，應該怎麼確認它真的可以正常運作。」

Testing Skill 可以定義專案的測試規範，例如：

測試命名方式
測試檔案位置
Unit Test 規則
Component Test 規則
測試資料建立方式
Mock / Stub 使用方式
錯誤情境測試
測試覆蓋率要求

開始之前，可以先讓 Claude Code 閱讀：

CLAUDE.md
Feature Skill
Testing Skill
目前專案程式碼

接著不要直接說：

「幫我把所有程式測試寫好。」

而是可以先要求 Claude Code 分析：

「請閱讀目前專案與 Testing Skill，檢查 my-refrigerator 現有功能的測試狀況，列出重要功能、目前缺少的測試，以及建議的測試優先順序。先不要修改任何檔案。」

這樣可以先得到一份 Testing Plan。

例如目前最重要的功能可能包括：

我的冰箱
├── 新增食材
├── 修改食材
├── 刪除食材
└── 查詢食材

採買清單
├── 新增項目
├── 完成項目
└── 刪除項目

食譜
├── 查看食譜
└── 加入最愛

AI 功能
├── 食材辨識
└── 食譜推薦

接著，就可以讓 Claude Code 按照 Testing Skill 開始補充測試。

例如「我的冰箱」新增食材時，至少應該測試正常情況：

輸入雞蛋
→ 儲存成功
→ 資料出現在冰箱列表

也要測試異常情況：

沒有輸入食材名稱
→ 不允許送出

Supabase 發生錯誤
→ 顯示錯誤訊息

資料載入中
→ 顯示 Loading State

這些測試可以幫助我們確認程式不只是「正常情況可以跑」，而是遇到問題時也能有合理的行為。

接下來就是 Debug。

如果測試失敗，可以把錯誤訊息與相關程式碼交給 Claude Code：

「以下測試失敗，請分析失敗原因，不要直接修改。先說明問題發生在哪裡，以及可能的解決方式。」

這個流程非常重要。

因為我們不希望 Claude Code 一看到 Error 就直接修改程式，結果雖然讓某個測試變成綠色，卻可能引入新的問題。

比較好的流程是：

Error → 分析原因 → 提出方案 → 確認 → 修正 → 重新測試。

這也延續了前面幾天一直強調的 AI Native 開發方式。

當測試全部通過後，還可以進行第三個階段：

Refactoring。

隨著 my-refrigerator 功能越來越多，很可能會發現不同頁面有重複的程式碼，例如重複的 API 呼叫、重複的錯誤處理、重複的表單驗證，甚至某些 Component 已經變得非常巨大。

這時候可以請 Claude Code：

「請依照目前專案的 Skill 檢查重複程式碼與過於複雜的 Component，提出 Refactoring 建議。請先列出問題，不要直接修改。」

例如可能發現：

Recipe.vue
    ↓
資料查詢
錯誤處理
表單邏輯
UI
收藏邏輯

全部混在同一個檔案裡。

Claude Code 就可以協助我們拆成：

Recipe.vue
RecipeCard.vue
RecipeForm.vue
recipeService.ts
recipeRepository.ts

讓每個檔案的責任更加清楚。

但 Refactoring 有一個非常重要的前提：

先有測試，再進行重構。

因為如果沒有測試，我們很難確認「重構之後，原本的功能是不是還正常」。

所以今天的完整流程會變成：

Test
 ↓
發現問題
 ↓
Debug
 ↓
修正
 ↓
Test
 ↓
Refactoring
 ↓
Test
 ↓
完成

這也是 Testing Skill 最重要的價值。

它不只是幫我們「寫測試」，而是建立一套可以反覆執行的品質流程。

完成 Day28 後，my-refrigerator 的重點也從「功能越做越多」，開始轉向「功能越做越穩」。

我們現在已經有：

Frontend Skill → 前端開發

Database Skill → 資料庫設計

Backend Skill → 後端存取

AI Vision Skill → AI 圖像辨識

Data Skill → 資料整合

AI Recommendation Skill → AI 推薦

Testing Skill → 測試、除錯與重構

這些 Skill 最後會逐漸形成一套屬於 my-refrigerator 的 AI Native 開發規範。

下一步，我們要把這些能力真正串進開發流程。

再來，將使用 Claude Code 整合 MCP、Hooks 與 CI/CD，讓 AI 不只會寫程式，也能參與整個軟體開發流程。