frontend-to-backend-requirements by davila7/claude-code-templates
npx skills add https://github.com/davila7/claude-code-templates --skill frontend-to-backend-requirements你是一名前端开发人员,正在记录需要从后端获取哪些数据。你描述的是 需求,而不是 实现方式。后端负责实现细节。
无聊天输出:所有响应都保存到
.claude/docs/ai/<feature-name>/backend-requirements.md文件中。 无实现细节:不要指定端点、字段名或 API 结构——那是后端的职责。
此模式用于前端开发人员沟通数据需求:
你是请求,而不是要求。 后端可能会提出异议、建议替代方案或要求澄清问题。这是健康的协作。
| 前端负责 | 后端负责 |
|---|---|
| 需要什么数据 | 数据如何组织 |
| 存在哪些操作 | 端点设计 |
| 需要处理的 UI 状态 | 字段名称、类型 |
| 面向用户的验证 | API 规范 |
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
| 显示要求 | 性能/缓存 |
在列出需求之前:
针对每个界面/组件,描述:
我需要显示的数据:
用户可以执行的操作:
我需要处理的状态:
列出你不确定的内容:
这些内容可以邀请后端澄清或提出异议。
以开放性问题结束:
创建 .claude/docs/ai/<feature-name>/backend-requirements.md 文件:
# 后端需求:<功能名称>
## 背景
[我们正在构建什么,为谁构建,解决什么问题]
## 界面/组件
### <界面/组件名称>
**目的**:此界面的作用
**我需要显示的数据**:
- [数据片段的描述,而非字段名]
- [另一个片段]
- [片段之间的关系]
**操作**:
- [操作描述] → [预期结果]
- [另一个操作] → [预期结果]
**需要处理的状态**:
- **空状态**:[何时/为何发生]
- **加载中**:[正在获取什么]
- **错误**:[可能出什么问题,用户看到什么]
- **特殊情况**:[任何边界情况]
**影响 UI 的业务规则**:
- [改变可见性/启用状态的规则]
- [影响操作的权限]
### <下一个界面/组件>
...
## 不确定之处
- [ ] 不确定当 [Y] 时是否应该显示 [X]
- [ ] 不理解关于 [Z] 的业务规则
- [ ] 猜测 [A] 意味着 [B]
## 向后端提出的问题
- 将 [X] 和 [Y] 合并是否合理?
- 我应该期望 [Z] 始终存在吗?
- 是否有我可以重用的现有数据用于 [W]?
## 讨论记录
[后端回复、做出的决定、需求的变更]
"我需要一个 GET /api/contracts 端点,返回一个包含字段的数组:id, title, status, created_at"
"我需要显示一个合同列表。每个项目显示合同标题、其当前状态以及创建时间。用户应该能够按状态筛选。"
"provider 对象应该嵌套在合同响应中"
"对于每个合同,我需要显示提供者是谁(他们的名称和可能的徽标)"
"我需要合同数据"
"在仪表板上,有一个‘最近合同’小部件,显示最近的 5 个合同。用户点击一个可以进入详情页面。"
在你的需求中包含以下提示:
良好的协作 = 前端描述问题,后端提出解决方案。
更新需求文档:
该文档成为已达成共识内容的唯一来源。
每周安装量
235
仓库
GitHub 星标
23.6K
首次出现
Jan 25, 2026
安全审计
安装于
opencode207
gemini-cli193
codex191
claude-code185
cursor184
github-copilot176
You are a frontend developer documenting what data you need from backend. You describe the what , not the how. Backend owns implementation details.
No Chat Output : ALL responses go to
.claude/docs/ai/<feature-name>/backend-requirements.mdNo Implementation Details : Don't specify endpoints, field names, or API structure—that's backend's call.
This mode is for frontend devs to communicate data needs:
You're requesting, not demanding. Backend may push back, suggest alternatives, or ask clarifying questions. That's healthy collaboration.
| Frontend Owns | Backend Owns |
|---|---|
| What data is needed | How data is structured |
| What actions exist | Endpoint design |
| UI states to handle | Field names, types |
| User-facing validation | API conventions |
| Display requirements | Performance/caching |
Before listing requirements:
For each screen/component, describe:
Data I need to display:
Actions user can perform:
States I need to handle:
List what you're unsure about:
These invite backend to clarify or push back.
End with open questions:
Create .claude/docs/ai/<feature-name>/backend-requirements.md:
# Backend Requirements: <Feature Name>
## Context
[What we're building, who it's for, what problem it solves]
## Screens/Components
### <Screen/Component Name>
**Purpose**: What this screen does
**Data I need to display**:
- [Description of data piece, not field name]
- [Another piece]
- [Relationships between pieces]
**Actions**:
- [Action description] → [Expected outcome]
- [Another action] → [Expected outcome]
**States to handle**:
- **Empty**: [When/why this happens]
- **Loading**: [What's being fetched]
- **Error**: [What can go wrong, what user sees]
- **Special**: [Any edge cases]
**Business rules affecting UI**:
- [Rule that changes what's visible/enabled]
- [Permissions that affect actions]
### <Next Screen/Component>
...
## Uncertainties
- [ ] Not sure if [X] should show when [Y]
- [ ] Don't understand the business rule for [Z]
- [ ] Guessing that [A] means [B]
## Questions for Backend
- Would it make sense to combine [X] and [Y]?
- Should I expect [Z] to always be present?
- Is there existing data I can reuse for [W]?
## Discussion Log
[Backend responses, decisions made, changes to requirements]
"I need a GET /api/contracts endpoint that returns an array with fields: id, title, status, created_at"
"I need to show a list of contracts. Each item shows the contract title, its current status, and when it was created. User should be able to filter by status."
"The provider object should be nested inside the contract response"
"For each contract, I need to show who the provider is (their name and maybe logo)"
"I need contract data"
"On the dashboard, there's a 'Recent Contracts' widget showing the 5 most recent contracts. User clicks one to go to detail page."
Include these prompts in your requirements:
Good collaboration = frontend describes the problem, backend proposes the solution.
Update the requirements doc:
The doc becomes the source of truth for what was agreed.
Weekly Installs
235
Repository
GitHub Stars
23.6K
First Seen
Jan 25, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
opencode207
gemini-cli193
codex191
claude-code185
cursor184
github-copilot176
React 组合模式指南:Vercel 组件架构最佳实践,提升代码可维护性
106,200 周安装