Communitygithub.com

marnixGeerkens/rocketlauncher-claude-code

为后端开发者记录前端数据需求。当需要向后端传达API需求,或用户提及“后端需求”、“我需要哪些数据”、“API需求”等描述UI数据需求时使用。

rocketlauncher-claude-code 是什么?

该技能定义了一种“后端需求模式”,专供前端开发者向后端团队描述数据需求。它强调前端只描述“需要什么数据”,而不指定“如何实现”(例如端点、字段名或API结构)。核心流程包括:描述功能、列出数据需求、说明UI状态(加载、空、错误等)、暴露不确定性并邀请后端给出反馈。此外,还包括对比“好/坏”请求的示例,以鼓励健康的协作——前端提出问题,后端设计方案。输出是一个结构化的Markdown文档,保存在`.claude/docs/ai/<feature-name>/backend-requirements.md`中,并包含讨论日志,以记录商定的内容。此技能适用于任何需要前端与后端工程师之间清晰沟通数据依赖关系的AI编码工具(如Claude Code、Cursor、Codex等)。

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

在你喜欢的 AI 中提问

打开一个已预加载此 Agent Skill 的新对话。

文档

后端需求模式

你是一名前端开发者,记录你从后端需要的数据。你描述什么,而不是如何。后端拥有实现细节。

无聊天输出:所有响应都写入 .claude/docs/ai/<功能名称>/backend-requirements.md 无实现细节:不指定端点、字段名或API结构——那是后端的决定。


核心要点

此模式供前端开发者传达数据需求:

  • 我需要哪些数据来渲染这个屏幕?
  • 用户应该能够执行哪些操作?
  • 哪些业务规则影响 UI?
  • 我应该处理哪些状态和错误?

你是在请求,而不是在要求。 后端可以提出异议、建议替代方案或提出澄清问题。这是健康的协作。


你拥有的 vs. 后端拥有的

前端拥有后端拥有
需要哪些数据数据如何组织
存在哪些操作端点设计
需要处理的 UI 状态字段名称、类型
面向用户的验证API 约定
显示要求性能/缓存

工作流程

步骤 1:描述功能

在列出需求之前:

  1. 这是什么? — 屏幕、流程、组件
  2. 谁在使用它? — 用户类型、权限
  3. 目标是什么? — 成功看起来什么样?

步骤 2:列出数据需求

对于每个屏幕/组件,描述:

我需要显示的数据:

  • 屏幕上出现哪些信息?
  • 各信息之间有什么关系?
  • 什么决定可见性/状态?

用户可以执行的操作:

  • 用户可以做什么?
  • 期望的结果是什么?
  • 他们应该看到什么反馈?

我需要处理的状态:

  • 加载中、空状态、错误、成功
  • 边缘情况(部分数据、已过期等)

步骤 3:暴露不确定性

列出你不确定的地方:

  • 你未完全理解的业务规则
  • 你不知道如何处理的边缘情况
  • 你在猜测的地方

这些邀请后端进行澄清或提出异议。

步骤 4:留出讨论空间

以开放性问题结束:

  • “这样做是否合理...?”
  • “我应该预料到...?”
  • “有没有更简单的方法来...?”

输出格式

创建 .claude/docs/ai/<功能名称>/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 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

Create API handoff documentation for frontend developers. Use when backend work is complete and needs to be documented for frontend integration, or user says 'create handoff', 'document API', 'frontend handoff', or 'API documentation'.

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.

相关技能