Communitygithub.com

API Handoff 模式

为前端开发者生成 API 交接文档。在后端工作完成并需要为前端集成进行文档编写时使用,或当用户说“创建交接”、“文档 API”、“前端交接”或“API 文档”时触发。

API Handoff 模式 是什么?

本技能旨在为后端开发者完成 API 工作后,自动生成结构化、可直接使用的交接文档,供前端开发者或其 AI 代理在构建 UI/集成时使用。它通过从已完成的 API 代码(端点、DTO、验证逻辑)及相关业务上下文中提取信息,填充固定模板,生成一份包含业务上下文、端点详情、数据模型、枚举、验证规则、业务逻辑和测试场景的 Markdown 文档。该技能特别强调无对话输出,仅生成文档块,并直接写入 `.claude/docs/ai/<feature-name>/api-handoff.md` 文件,避免在聊天中回显内容。对于简单的 CRUD API,支持使用简化模板,直接提供端点、方法和示例请求/响应 JSON,让前端自行推断其余内容。此技能适用于 Claude Code、Cursor 等支持技能文件的 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)提供完整的业务和技术上下文,使其无需向后端提问即可构建集成/UI。

何时使用:完成后端 API 工作后——端点、DTO、验证、业务逻辑——运行此模式以生成交接文档。

简单 API 快捷方式:如果 API 很简单(CRUD,无复杂业务逻辑,验证显而易见),可跳过完整模板——只需提供端点、方法和示例请求/响应 JSON。前端可以自行推断其余部分。

目标

生成一份可直接复制使用的交接文档,其中包含前端 AI 正确且自信地构建 UI/集成所需的所有上下文。

输入

  • 完成的 API 代码(端点、控制器、服务、DTO、验证)。
  • 来自任务/用户故事的相关业务上下文。
  • 实施过程中发现的任何约束、边界情况或注意事项。

工作流程

  1. 收集上下文 — 确认功能名称、相关端点、DTO、认证规则和边界情况。
  2. 创建/更新交接文件 — 将文档写入 .claude/docs/ai/<功能名称>/api-handoff.md。如果根据反馈重新运行,则增加迭代后缀(-v2、-v3,……)。
  3. 粘贴模板 — 用具体数据填写以下每个部分。仅当确实不适用时才省略子部分(并注明原因)。
  4. 仔细核对 — 确保负载与实际 API 行为一致,认证范围准确,枚举/验证反映后端逻辑。

输出格式

生成一个结构如下所示的单个 markdown 块。保持紧凑——不废话,不重复。


# API 交接:[功能名称]

## 业务上下文
[2-4 句话:此功能解决什么问题?谁使用它?为什么重要?包含前端需要理解的任何领域术语。]

## 端点

### [方法] /路径/至/端点
- **目的**:[1 行:它做什么]
- **认证**:[所需角色/权限,或“公开”]
- **请求**:
  ```json
  {
    "字段": "类型 — 描述,约束"
  }
  • 响应(成功):
    {
      "字段": "类型 — 描述"
    }
    
  • 响应(错误):[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]

未解决的问题 / 待办事项

[任何未解决的、待产品经理决策的、或需要前端输入的内容。如果没有,则省略该部分。]


---

## 规则

- **无聊天输出**——仅生成交接 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.

相关技能