我們一步一步建立了 my-refrigerator 的開發基礎：先建立 Vue 專案架構，再設計 Supabase PostgreSQL Schema，接著完成 Repository 與 Service 資料存取層。到了今天，終於可以把這些基礎串在一起，打造第一個真正能讓使用者操作的核心功能——「我的冰箱」。

my-refrigerator 最重要的功能，就是讓使用者知道「我的冰箱裡到底有什麼」。因此，今天的目標不是單純建立一個頁面，而是完成一套完整的食材管理流程，包含查看、新增、修改與刪除食材，也就是最基本的 CRUD。

這一次，我們會使用新的 Feature Skill。

前面的 Frontend Skill 主要規範 Vue 前端怎麼寫，Database Skill 負責資料庫設計，Backend/Data Skill 則規範資料存取方式。而 Feature Skill 的角色則更接近「一個完整功能應該怎麼被實作」。

例如在 Feature Skill 中，可以規定一個功能需要包含哪些部分：

Feature
├── View
├── Components
├── Store
├── Service
├── Repository
├── Types
└── Test

也可以加入功能開發流程，例如：

1. 先確認需求
2. 分析資料結構
3. 設計 UI
4. 建立 TypeScript Types
5. 建立 Repository / Service
6. 建立 Vue Component
7. 加入錯誤與 Loading 狀態
8. 執行測試

如此一來，Claude Code 每次開發新的功能時，就可以依照相同的方式進行。

接著，我們可以對 Claude Code 提出今天的主要 Prompt：

「請閱讀 CLAUDE.md、Frontend Skill、Database Skill、Backend/Data Skill 與 Feature Skill，建立 my-refrigerator 的『我的冰箱』功能。使用者可以查看、新增、修改與刪除冰箱食材。請先分析實作計畫，確認後再修改檔案。」

這個 Prompt 和前幾天最大的不同，就是我們不再只要求 Claude Code 完成某一個檔案，而是要求它按照一套完整的 Feature Workflow 開發。

「我的冰箱」可以先提供一個簡單的食材列表，每筆食材顯示名稱、數量、單位、分類與保存期限。例如：

🥚 雞蛋       6 顆
🥬 高麗菜     1 顆
🥛 牛奶       1 瓶
🥕 胡蘿蔔     2 根
🍅 番茄       3 顆

使用者可以透過「新增食材」按鈕加入新的食材，也可以點擊既有食材進行修改或刪除。

在這個階段，我們也可以讓 Claude Code 特別注意 Loading、Error 與 Empty State。

例如第一次打開冰箱時，如果還沒有任何資料，不應該只顯示一個空白畫面，而是可以提示：

「你的冰箱目前是空的，先加入第一樣食材吧！」

如果資料載入失敗，也應該顯示適當的錯誤訊息，而不是讓使用者看到程式錯誤。

這些細節看似不重要，卻是 AI 產生程式碼時很容易忽略的地方。因此，可以把這些規則寫進 Feature Skill，讓 Claude Code 未來建立「採買清單」或「食譜」時，也能遵循相同的 UX 原則。

另外，今天也可以開始加入 Mobile First 的概念。因為 my-refrigerator 最終希望在手機上使用，使用者可能正在超市、廚房或打開冰箱時操作。因此食材卡片、按鈕與表單都應該考慮手機螢幕大小，而不是只針對桌面瀏覽器設計。

完成後，可以讓 Claude Code 再進行一次 Review：

「請檢查我的冰箱功能是否符合 Feature Skill，確認 CRUD 流程、Loading、Error、Empty State 與 Mobile First 設計是否完整。」

這就是 Feature Skill 最有價值的地方。

它不是告訴 Claude Code「某一行程式怎麼寫」，而是告訴 AI：

「一個完整的功能，應該用什麼方式被建立與驗證。」

今天完成後，my-refrigerator 終於有了第一個真正可以使用的功能：

Vue UI → Feature → Service → Repository → Supabase → PostgreSQL

而且我們也完成了從「建立開發規範」到「使用開發規範」的第一次完整實戰。

更重要的是，從今天開始，我們不需要每次重新教 Claude Code 怎麼做一個功能。只要 Feature Skill 越來越完整，AI 就能逐漸按照我們累積的開發方法工作。

下一步，我們要處理另一個非常實用的生活情境：

冰箱裡沒有的東西，要買什麼？

明天，我們將使用 Claude Code 建立 「採買清單」功能，讓 my-refrigerator 從單純的冰箱紀錄工具，開始變成真正的生活助手。