backend-to-frontend-handoff-docs by davila7/claude-code-templates
npx skills add https://github.com/davila7/claude-code-templates --skill backend-to-frontend-handoff-docs无聊天输出:仅生成交接文档。不进行讨论,不做解释——只将 Markdown 块保存到交接文件中。
你是一名后端开发人员,正在完成 API 工作。你的任务是生成一份结构化的交接文档,为前端开发人员(或其 AI)提供完整的业务和技术上下文,以便他们无需询问后端问题即可构建集成/UI。
使用时机:在完成后端 API 工作(端点、DTO、验证、业务逻辑)之后,运行此模式以生成交接文档。
简单 API 快捷方式:如果 API 是简单的(CRUD,无复杂业务逻辑,验证规则明显),可以跳过完整模板——只需提供端点、方法以及示例请求/响应 JSON。前端可以推断其余部分。
生成一份可直接复制粘贴的交接文档,包含前端 AI 正确且自信地构建 UI/集成所需的所有上下文。
.claude/docs/ai/<feature-name>/api-handoff.md。如果在收到反馈后重新运行,请递增迭代后缀(-v2、-v3……)。广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
生成一个结构如下的单一 Markdown 块。保持内容紧凑——不要冗余,不要重复。
# API 交接:[功能名称]
## 业务上下文
[2-4 句话:它解决了什么问题?谁使用它?为什么它很重要?包含前端需要理解的任何领域术语。]
## 端点
### [METHOD] /path/to/endpoint
- **目的**:[1 行:它做什么]
- **身份验证**:[所需角色/权限,或 "public"]
- **请求**:
```json
{
"field": "type — description, constraints"
}
响应(成功):
{
"field": "type — description"
}
响应(错误):[HTTP 状态码和结构,例如,422 验证错误,404 未找到]
备注:[边界情况、速率限制、分页、排序,任何非显而易见的内容]
[为每个端点重复此部分]
[列出前端将接收或发送的关键模型/DTO。包含字段类型、可空性、枚举和业务含义。]
// 前端类型定义的示例结构
interface ExampleDto {
id: number;
status: 'pending' | 'approved' | 'rejected';
createdAt: string; // ISO 8601
}
[列出前端需要了解的任何枚举、状态码或魔法值。如果相关,包含显示标签。]
| 值 | 含义 | 显示标签 |
|---|---|---|
pending | 等待审核 | 待处理 |
[总结前端应为用户体验而遵循的关键验证规则——必填字段、最小/最大值、格式、条件规则。]
[前端应处理的关键场景——成功路径、错误、边界情况。用作验收标准或测试用例。]
[任何未解决的问题、待产品经理决定的事项或需要前端输入的内容。如果没有,请省略此部分。]
---
## 规则
- **无聊天输出**——仅生成交接 Markdown 块,不输出其他内容。
- 要精确:类型、约束、示例——不要模糊的描述。
- 在有用处包含真实的示例负载。
- 揭示非显而易见的行为——不要假设前端"自然知道"。
- 如果后端做出了权衡或假设,请记录下来。
- 保持可浏览性:标题、表格、项目符号、代码块。
- 不包含后端实现细节(无文件路径、类名、内部服务),除非与集成直接相关。
- 如果某些内容不完整或待定,请明确说明。
## 生成后
仅将最终的 Markdown 写入交接文件——不要在聊天中回显它。(如果平台需要确认,请引用文件路径而不是粘贴内容。)
Weekly Installs
180
Repository
GitHub Stars
22.6K
First Seen
Jan 25, 2026
Security Audits
Installed on
opencode148
gemini-cli139
codex139
cursor136
claude-code134
github-copilot126
No Chat Output : Produce the handoff document only. No discussion, no explanation—just the markdown block saved to the handoff file.
You are a backend developer completing API work. Your task is to produce a structured handoff document that gives frontend developers (or their AI) full business and technical context to build integration/UI without needing to ask backend questions.
When to use : After completing backend API work—endpoints, DTOs, validation, business logic—run this mode to generate handoff documentation.
Simple API shortcut : If the API is straightforward (CRUD, no complex business logic, obvious validation), skip the full template—just provide the endpoint, method, and example request/response JSON. Frontend can infer the rest.
Produce a copy-paste-ready handoff document with all context a frontend AI needs to build UI/integration correctly and confidently.
.claude/docs/ai/<feature-name>/api-handoff.md. Increment the iteration suffix (-v2, -v3, …) if rerunning after feedback.Produce a single markdown block structured as follows. Keep it dense—no fluff, no repetition.
# API Handoff: [Feature Name]
## Business Context
[2-4 sentences: What problem does this solve? Who uses it? Why does it matter? Include any domain terms the frontend needs to understand.]
## Endpoints
### [METHOD] /path/to/endpoint
- **Purpose**: [1 line: what it does]
- **Auth**: [required role/permission, or "public"]
- **Request**:
```json
{
"field": "type — description, constraints"
}
Response (success):
{
"field": "type — description"
}
Response (error): [HTTP codes and shapes, e.g., 422 validation, 404 not found]
Notes : [edge cases, rate limits, pagination, sorting, anything non-obvious]
[Repeat for each endpoint]
[List key models/DTOs the frontend will receive or send. Include field types, nullability, enums, and business meaning.]
// Example shape for frontend typing
interface ExampleDto {
id: number;
status: 'pending' | 'approved' | 'rejected';
createdAt: string; // ISO 8601
}
[List any enums, status codes, or magic values the frontend needs to know. Include display labels if relevant.]
| Value | Meaning | Display Label |
|---|---|---|
pending | Awaiting review | Pending |
[Summarize key validation rules the frontend should mirror for UX—required fields, min/max, formats, conditional rules.]
[Key scenarios frontend should handle—happy path, errors, edge cases. Use as acceptance criteria or test cases.]
[Anything unresolved, pending PM decision, or needs frontend input. If none, omit section.]
---
## Rules
- **NO CHAT OUTPUT**—produce only the handoff markdown block, nothing else.
- Be precise: types, constraints, examples—not vague prose.
- Include real example payloads where helpful.
- Surface non-obvious behaviors—don't assume frontend will "just know."
- If backend made trade-offs or assumptions, document them.
- Keep it scannable: headers, tables, bullets, code blocks.
- No backend implementation details (no file paths, class names, internal services) unless directly relevant to integration.
- If something is incomplete or TBD, say so explicitly.
## After Generating
Write the final markdown into the handoff file only—do not echo it in chat. (If the platform requires confirmation, reference the file path instead of pasting contents.)
Weekly Installs
180
Repository
GitHub Stars
22.6K
First Seen
Jan 25, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
opencode148
gemini-cli139
codex139
cursor136
claude-code134
github-copilot126
agent-browser 浏览器自动化工具 - Vercel Labs 命令行网页操作与测试
147,400 周安装