Communitygithub.com

marnixGeerkens/rocketlauncher-claude-code

為前端開發人員建立 API 交接文件。在後端工作完成、需要記錄以便前端整合時使用,或當使用者說「建立交接」、「記錄 API」、「前端交接」或「API 文件」時啟用。

rocketlauncher-claude-code 是什麼?

此技能用於在後端 API 開發完成後,自動產生一份結構化的交接文件,讓前端開發人員(或其 AI 代理)無需詢問後端問題即可順利建構整合與使用者介面。它要求不輸出任何對話內容,直接將標準化的 Markdown 交接文件寫入 `.claude/docs/ai/<feature-name>/api-handoff.md`。支援的內容包括端點列表、資料模型 DTO、列舉與常數、驗證規則、商業邏輯與邊界案例、整合注意事項以及測試情境。若 API 很單純(如 CRUD),可跳過完整範本,僅提供端點、方法與範例請求/回應 JSON。此技能主要適用於 Claude Code,但產生之文件可供任何開發環境或 AI 輔助工具使用。

相容平台✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/marnixGeerkens/rocketlauncher-claude-code/tree/HEAD/components/skills/enterprise-communication/backend-to-frontend-handoff-docs

在你喜歡的 AI 中提問

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

說明文件

API 交接模式

不輸出對話:僅產出交接文件。無需討論、無需說明——只需將 Markdown 區塊儲存至交接檔案。

您是一位完成 API 工作的後端開發人員。您的任務是產出一份結構化的交接文件,為前端開發人員(或其 AI)提供完整的商業與技術背景,使其無需詢問後端問題即可建構整合/使用者介面。

使用時機:完成後端 API 工作(端點、DTO、驗證、商業邏輯)後,執行此模式以產生交接文件。

簡單 API 捷徑:若 API 很直接(CRUD、無複雜商業邏輯、驗證明顯),可跳過完整範本——僅提供端點、方法及範例請求/回應 JSON。前端可自行推斷其餘部分。

目標

產出可供直接複製貼上的交接文件,提供前端 AI 正確且有信心地建構 UI/整合所需的所有背景資訊。

輸入

  • 已完成的 API 程式碼(端點、控制器、服務、DTO、驗證)。
  • 來自任務/使用者故事的相關商業背景。
  • 實作過程中發現的任何限制、邊界案例或陷阱。

工作流程

  1. 收集背景資訊 — 確認功能名稱、相關端點、DTO、驗證規則及邊界案例。
  2. 建立/更新交接檔案 — 將文件寫入 .claude/docs/ai/<feature-name>/api-handoff.md。若在收到反饋後重新執行,請遞增迭代後綴(-v2、-v3,依此類推)。
  3. 貼上範本 — 用具體資料填寫下方每個章節。僅在確實不適用時省略子章節(並說明原因)。
  4. 再次確認 — 確保負載與實際 API 行為相符、驗證範圍準確,且列舉/驗證反映後端邏輯。

輸出格式

產出單一 Markdown 區塊,結構如下。保持精簡——無廢話、無重複。


# API 交接:[功能名稱]

## 商業背景
[2-4 句話:此功能解決什麼問題?誰會使用它?為什麼重要?包含前端需要理解的任何領域術語。]

## 端點

### [METHOD] /path/to/endpoint
- **用途**:[1 行:作用說明]
- **驗證**:[所需角色/權限,或「公開」]
- **請求**:
  ```json
  {
    "field": "型別 — 描述、限制"
  }
  • 回應(成功):
    {
      "field": "型別 — 描述"
    }
    
  • 回應(錯誤):[HTTP 狀態碼及格式,例如 422 驗證錯誤、404 找不到]
  • 備註:[邊界案例、速率限制、分頁、排序、任何非明顯事項]

[對每個端點重複]

資料模型 / DTO

[列出前端將接收或傳送的主要模型/DTO。包含欄位型別、可空性、列舉及商業含義。]

// 前端型別定義範例形狀
interface ExampleDto {
  id: number;
  status: 'pending' | 'approved' | 'rejected';
  createdAt: string; // ISO 8601
}

列舉與常數

[列出前端需要知道的任何列舉、狀態碼或魔術值。如相關,包含顯示標籤。]

值含義顯示標籤
pending等待審查待處理

驗證規則

[摘要前端應反映在 UX 中的關鍵驗證規則——必填欄位、最小值/最大值、格式、條件規則。]

商業邏輯與邊界案例

  • [每個非明顯行為、限制或陷阱以項目符號列出]
  • [例如:「使用者每天只能提交一次」、「預設排除軟刪除項目」]

整合注意事項

  • 建議流程:[例如:「取得列表 → 選取項目 → 提交表單 → 輪詢狀態」]
  • 樂觀更新 UI:[安全或不安全,原因]
  • 快取:[任何快取標頭、失效觸發條件]
  • 即時更新:[WebSocket 事件、輪詢間隔(如適用)]

測試情境

[前端應處理的主要情境——快樂路徑、錯誤、邊界案例。可作為驗收標準或測試案例。]

  1. 快樂路徑:[簡短描述]
  2. 驗證錯誤:[觸發條件、預期回應]
  3. 找不到:[何時回傳 404]
  4. 權限拒絕:[何時回傳 403]

未解決問題 / 待辦事項

[任何未解決事項、待 PM 決定,或需要前端意見。若無,省略本節。]


---

## 規則

- **不輸出對話**——僅產出交接的 Markdown 區塊,無其他內容。
- 精確:型別、限制、範例——而非模糊的描述。
- 在有用時包含真實的範例負載。
- 揭露非明顯的行為——不要假設前端會「自然知道」。
- 若後端做出了取捨或假設,請記錄下來。
- 保持可掃讀性:標題、表格、項目符號、程式碼區塊。
- 不含後端實作細節(無檔案路徑、類別名稱、內部服務),除非直接與整合相關。
- 若某事項尚未完成或待確認,請明確說明。

## 產生後

僅將最終 Markdown 寫入交接檔案——不要在對話中回顯。
(若平台要求確認,請參考檔案路徑而非貼上內容。)

Individual skills in this repo

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

marnixGeerkens/rocketlauncher-claude-code

When the user wants to optimize, improve, or increase conversions on any marketing page — including homepage, landing pages, pricing pages, feature pages, or blog posts. Also use when the user says "CRO," "conversion rate optimization," "this page isn't converting," "improve conversions," or "why isn't this page working." For signup/registration flows, see signup-flow-cro. For post-signup activation, see onboarding-cro. For forms outside of signup, see form-cro. For popups/modals, see popup-cro.

marnixGeerkens/rocketlauncher-claude-code

Balance visual design with ATS compatibility for creative roles. Use when the user is in design, art, writing, marketing creative, or any visual/creative field and needs a resume that looks distinctive but still parses.

marnixGeerkens/rocketlauncher-claude-code

Transform resume bullets into detailed portfolio case studies with context, action, and outcome. Use when the user mentions portfolio, case study, project write-up, or expanding a resume bullet into a longer narrative.

marnixGeerkens/rocketlauncher-claude-code

Expert in building portfolios that actually land jobs and clients - not just showing work, but creating memorable experiences. Covers developer portfolios, designer portfolios, creative portfolios, and portfolios that convert visitors into opportunities. Use when: portfolio, personal website, showcase work, developer portfolio, designer portfolio.

marnixGeerkens/rocketlauncher-claude-code

Tailwind CSS v4 principles. CSS-first configuration, container queries, modern patterns, design token architecture.

marnixGeerkens/rocketlauncher-claude-code

Frontend development patterns for React, Next.js, state management, performance optimization, and UI best practices.

marnixGeerkens/rocketlauncher-claude-code

Frontend development guidelines for React/TypeScript applications. Modern patterns including Suspense, lazy loading, useSuspenseQuery, file organization with features directory, MUI v7 styling, TanStack Router, performance optimization, and TypeScript best practices. Use when creating components, pages, features, fetching data, styling, routing, or working with frontend code.

marnixGeerkens/rocketlauncher-claude-code

Next.js App Router principles. Server Components, data fetching, routing patterns.

marnixGeerkens/rocketlauncher-claude-code

Expert integration of Supabase Auth with Next.js App Router Use when: supabase auth next, authentication next.js, login supabase, auth middleware, protected route.

marnixGeerkens/rocketlauncher-claude-code

Comprehensive frontend development skill for building modern, performant web applications using ReactJS, NextJS, TypeScript, Tailwind CSS. Includes component scaffolding, performance optimization, bundle analysis, and UI best practices. Use when developing frontend features, optimizing performance, implementing UI/UX designs, managing state, or reviewing frontend code.

marnixGeerkens/rocketlauncher-claude-code

Document frontend data needs for backend developers. Use when frontend needs to communicate API requirements to backend, or user says 'backend requirements', 'what data do I need', 'API requirements', or is describing data needs for a UI.

marnixGeerkens/rocketlauncher-claude-code

Comprehensive Python library for astronomy and astrophysics. This skill should be used when working with astronomical data including celestial coordinates, physical units, FITS files, cosmological calculations, time systems, tables, world coordinate systems (WCS), and astronomical data analysis. Use when tasks involve coordinate transformations, unit conversions, FITS file manipulation, cosmological distance calculations, time scale conversions, or astronomical data processing.

marnixGeerkens/rocketlauncher-claude-code

Comprehensive patterns for Next.js 14+ App Router architecture, Server Components, and modern full-stack React development.

相關技能