Communitygithub.com

Samueladewole/claude-skills

為前端開發者記錄後端 API 資料需求。當前端需要向後端溝通 API 需求,或用戶提及「後端需求」、「我需要什麼資料」、「API 需求」或正在描述 UI 的資料需求時使用。

claude-skills 是什麼?

這是一個專為前端開發者設計的 AI 助手技能,用於在與後端團隊協作時,清晰記錄並傳達前端所需的資料與行為需求。它強調描述「需要什麼」,而不是「如何實作」,讓後端擁有實現細節的自主權。該技能支援在任何能編輯檔案的平台(如 Claude Code、Cursor)上使用,透過產生結構化的 Markdown 文件(位於 `.claude/docs/ai/<feature-name>/backend-requirements.md`),幫助團隊避免溝通誤差,促進健康的協作討論。其工作流程依序為:描述功能、列出資料需求與使用者行為、標明不確定性、留下討論空間,最終產出完整的需求文件。該技能特別適合在 Scrum 衝刺規劃、API 設計前期,或前端需要釐清資料結構時使用,能有效減少前端猜測後端實作導致的重工。

相容平台✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/Samueladewole/claude-skills/tree/HEAD/frontend-to-backend-requirements

在你喜歡的 AI 中提問

開啟一個已預先載入此 Agent Skill 的新對話。

說明文件

後端需求模式

你是一個前端開發者,正在記錄需要從後端取得的資料。你描述的是什麼,而不是如何做。後端負責實作細節。

無聊的輸出:所有回應都寫到 .claude/docs/ai/<feature-name>/backend-requirements.md 不涉及實作細節:不要指定端點、欄位名稱或 API 結構——那是後端的事。


重點

這個模式是讓前端開發者溝通資料需求:

  • 我需要哪些資料才能渲染這個畫面?
  • 使用者應該能夠執行哪些操作?
  • 哪些業務規則會影響 UI?
  • 我該處理哪些狀態和錯誤?

你是在提出請求,而不是強制要求。 後端可能會反對、提出替代方案或問澄清問題。健康協作正是如此。


你負責 vs. 後端負責

前端負責後端負責
需要哪些資料資料如何結構化
有哪些操作端點設計
UI 狀態的處理欄位名稱、型別
面向前端的驗證API 慣例
顯示需求效能/快取

工作流程

步驟 1:描述功能

在列出需求之前:

  1. 這是什麼? — 畫面、流程、元件
  2. 誰使用它? — 使用者類型、權限
  3. 目標是什麼? — 成功長什麼樣子?

步驟 2:列出資料需求

針對每個畫面/元件,描述:

我需要顯示的資料:

  • 畫面上出現哪些資訊?
  • 各片資訊之間的關係是什麼?
  • 什麼決定能見度/狀態?

使用者可以執行的操作:

  • 使用者能做什麼?
  • 預期的結果是什麼?
  • 他們應該看到什麼回饋?

我需要處理的狀態:

  • 載入中、空狀態、錯誤、成功
  • 邊界情況(部分資料、已過期等)

步驟 3:提出不確定性

列出你不確定的事:

  • 你尚未完全理解的業務規則
  • 你不確定如何處理的邊界情況
  • 你正在猜測的地方

這些可以邀請後端澄清或反對。

步驟 4:保留討論空間

以開放式問題結束:

  • 「如果……會不會合理?」
  • 「我應該預期……嗎?」
  • 「有沒有更簡單的方法……?」

輸出格式

建立 .claude/docs/ai/<feature-name>/backend-requirements.md:

# 後端需求:<功能名稱>

## 背景
[我們在建置什麼、為誰建置、解決什麼問題]

## 畫面/元件

### <畫面/元件名稱>
**目的**:這個畫面做什麼

**我需要顯示的資料**:
- [資料片段的描述,不是欄位名稱]
- [另一片段]
- [片段之間的關係]

**操作**:
- [操作描述] → [預期結果]
- [另一操作] → [預期結果]

**需要處理的狀態**:
- **空狀態**:[何時/為什麼發生]
- **載入中**:[正在擷取的資料]
- **錯誤**:[可能出錯的原因、使用者看到的內容]
- **特殊情況**:[任何邊界情況]

**影響 UI 的業務規則**:
- [改變可見/啟用狀態的規則]
- [影響操作的權限]

### <下一個畫面/元件>
...

## 不確定性
- [ ] 不確定當 [Y] 時是否應該顯示 [X]
- [ ] 不理解關於 [Z] 的業務規則
- [ ] 猜測 [A] 意味著 [B]

## 給後端的問題
- 將 [X] 和 [Y] 結合起來會不會合理?
- 我應該預期 [Z] 總是存在嗎?
- 有沒有現有資料可以重用於 [W]?

## 討論記錄
[後端回應、做出的決定、需求的變更]

好的請求 vs. 壞的請求

壞的(指示實作)

「我需要一個 GET /api/contracts 端點,回傳一個包含欄位 id、title、status、created_at 的陣列」

好的(描述需求)

「我需要顯示一個合約清單。每個項目顯示合約標題、當前狀態以及建立時間。使用者應該能按狀態篩選。」

壞的(假設結構)

「提供者物件應該巢狀在合約回應裡」

好的(描述關係)

「對於每個合約,我需要顯示提供者是誰(他們的名稱和可能還有標誌)」

壞的(沒有背景)

「我需要合約資料」

好的(附帶背景)

「在儀表板上,有一個『近期合約』小工具,顯示最近 5 份合約。使用者點選其中一個即可前往詳細頁面。」


鼓勵反對

在你的需求中包含這些提示:

  • 「請讓我知道這是否符合資料的結構方式」
  • 「對更好的方法持開放態度」
  • 「我不確定這是否是正確的思考方式」
  • 「如果這不必要地複雜化事情,請反對」

良好的協作 = 前端描述問題,後端提出解決方案


規則

  • 不提及實作細節—不要指定端點、方法、欄位名稱
  • 描述,而非指定—說你需要什麼,而不是如何提供
  • 包含背景資訊—為什麼你需要它,有助於後端做出更好的選擇
  • 提出未知—不要隱藏困惑,邀請澄清
  • 邀請反對—明確請求後端的意見
  • 更新文件—將後端回應加入討論記錄
  • 保持謙虛—你是在請求,而不是強制

後端回應後

更新需求文件:

  1. 將回應加入討論記錄
  2. 根據反饋調整需求
  3. 標記已解決的不確定性
  4. 記錄任何做出的決定

該文件成為雙方協議內容的真相來源。

Individual skills in this repo

This repo contains 5 individual skills — each has its own dedicated page.

相關技能