延續我們使用 Claude Code 設計了 my-refrigerator 的資料庫 Schema，並決定使用 Supabase + PostgreSQL 作為後端資料服務。現在資料庫已經有了基本的結構，下一個問題就是：Vue 前端要怎麼安全、清楚地讀取與修改這些資料？

如果所有資料庫操作都直接寫在 Vue Component 裡，剛開始可能看起來很方便，但隨著功能增加，程式碼很容易變得混亂。例如「我的冰箱」頁面需要查詢食材，「採買清單」需要新增與修改資料，「食譜」又需要另外查詢資料。如果每個頁面都直接處理 Supabase Query，未來要修改資料庫結構或 API 邏輯時，就必須到很多地方修改。

因此，今天要建立的就是一層清楚的資料存取層，讓 UI、商業邏輯與資料庫操作彼此分開。

這一次，我們會使用 Backend/Data Skill。

如果說 Database Skill 負責「資料庫應該怎麼設計」，那麼 Backend/Data Skill 則可以進一步規範「程式應該如何與資料庫溝通」。例如資料存取程式放在哪裡、Repository 如何命名、錯誤如何處理、Supabase Client 如何使用，以及哪些資料庫操作不應該直接出現在 Vue Component 中。

因此，可以先讓 Claude Code 閱讀：

CLAUDE.md
Database Skill
Backend/Data Skill
目前的 Supabase Schema

接著提出需求：

「請根據目前的專案架構與 Backend/Data Skill，建立 Refrigerator Item 的 Repository 與 Service，負責處理冰箱食材的查詢、新增、修改與刪除。請先提出架構，再進行實作。」

這裡有一個值得注意的地方。

傳統後端框架，例如 Spring Boot，經常會看到：

Controller
   ↓
Service
   ↓
Repository
   ↓
Database

但我們這次使用的是 Vue + Supabase，因此不需要為了「看起來像後端專案」而硬建立一套 Spring Boot 式的架構。

可以根據前端專案的需求，設計成：

Vue Component
      ↓
Service
      ↓
Repository
      ↓
Supabase Client
      ↓
PostgreSQL

其中，Repository 負責資料存取，例如查詢冰箱食材、新增食材、更新數量或刪除資料。

例如：

refrigeratorRepository
├── getItems()
├── getItemById()
├── createItem()
├── updateItem()
└── deleteItem()

而 Service 則可以處理比較接近應用程式需求的邏輯。

例如使用者新增一項食材時，Service 可以負責確認資料是否完整、整理輸入格式，甚至在未來加入「自動計算保存期限」等邏輯。

如此一來，Vue Component 就不需要知道 Supabase Query 的細節。

例如頁面只需要處理：

取得冰箱食材
新增食材
修改食材
刪除食材

至於這些動作到底如何與 PostgreSQL 溝通，就交給 Repository 處理。

這樣的分層還有一個很大的好處：未來更換資料來源時，影響會比較小。

例如現在使用 Supabase，Repository 裡面可能直接使用 Supabase Client。未來如果因為需求改變而改成其他 API 或後端服務，主要需要調整的就是資料存取層，而不是把所有 Vue Component 全部重新修改。

這就是我們在 AI Native 開發中很重要的一個觀念：

不要只叫 Claude Code 寫出「可以動」的程式，而是要求它按照專案規範建立「可以持續維護」的程式。

這時候 Backend/Data Skill 就不只是文件，而是真正影響 Claude Code 寫程式方式的開發規範。

完成 Repository 與 Service 後，可以再請 Claude Code 幫忙檢查：

「請檢查目前的資料存取層，確認 Vue Component 是否有直接操作 Supabase 的程式碼，並確認 Repository 與 Service 的責任是否清楚。」

這種做法也再次呼應前面學到的工作流程：

先理解 → 提出方案 → Review → 實作 → 檢查。

而不是把所有工作一次交給 AI。

今天完成後，my-refrigerator 的架構就會更完整：

Vue UI
  ↓
Service
  ↓
Repository
  ↓
Supabase
  ↓
PostgreSQL

同時，我們也真正開始讓 Backend/Data Skill 參與專案開發。

下一步，就可以把這些資料存取能力真正用在使用者看得到的功能上。

Day22，我們將開始打造 my-refrigerator 的第一個核心功能：「我的冰箱」——讓使用者可以查看、新增、修改與刪除冰箱裡的食材。