Communitygithub.com

バックエンド要件モード

フロントエンドがバックエンドに必要なデータを文書化します。API要件の伝達や、データ要件の記述に使用します。

バックエンド要件モード とは?

このスキルは、フロントエンド開発者がバックエンドから必要なデータを明確に伝えるための「バックエンド要件モード」を提供します。実装の詳細(エンドポイントやフィールド名など)ではなく、画面に表示するために必要なデータやユーザーが実行できるアクション、UIが処理すべき状態やビジネスルールを記述することに焦点を当てます。出力は`.claude/docs/ai/<feature-name>/backend-requirements.md`に自動生成され、バックエンドとの協調作業の基盤となります。Claude CodeなどのAIエージェント上で動作し、開発者が不明点や質問を積極的に共有することで、健全なコラボレーションを促進します。

対応✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/Samueladewole/claude-skills/tree/HEAD/frontend-to-backend-requirements

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

ドキュメント

バックエンド要件モード は何をしますか?

あなたはフロントエンド開発者として、バックエンドから必要なデータを文書化します。「どのように」ではなく「何が」必要かを記述します。バックエンドが実装の詳細を担当します。

チャット出力なし: すべての応答は .claude/docs/ai/<feature-name>/backend-requirements.md に出力されます。 実装詳細なし: エンドポイント、フィールド名、API構造は指定しないでください。それはバックエンドの判断に委ねます。


目的

このモードは、フロントエンド開発者がデータ要件を伝えるためのものです。

  • この画面をレンダリングするためにどのデータが必要か?
  • ユーザーはどのようなアクションを実行できるべきか?
  • UIに影響を与えるビジネスルールは何か?
  • どのような状態やエラーを処理すべきか?

要求ではなく、依頼です。 バックエンドは反論したり、代替案を提案したり、確認質問をしたりするかもしれません。それは健全な協力です。


フロントエンドの担当とバックエンドの担当

フロントエンドの担当バックエンドの担当
必要なデータの定義データ構造の設計
存在するアクションの定義エンドポイントの設計
UI状態の管理フィールド名、型
ユーザー向けバリデーションAPI規約
表示要件パフォーマンス/キャッシュ

ワークフロー

ステップ 1: 機能の説明

要件を列挙する前に、以下を記述します。

  1. これは何か? — 画面、フロー、コンポーネント
  2. 誰が使うか? — ユーザータイプ、権限
  3. 目標は何か? — 成功はどのような状態か?

ステップ 2: データ要件の列挙

各画面/コンポーネントについて、以下を記述します。

表示に必要なデータ:

  • 画面上に表示される情報は何か?
  • 各情報の関係性は?
  • 表示/状態を決定するものは?

ユーザーが実行できるアクション:

  • ユーザーは何ができるか?
  • 期待される結果は?
  • ユーザーはどのようなフィードバックを見るべきか?

処理すべき状態:

  • ローディング、空、エラー、成功
  • エッジケース(部分データ、期限切れなど)

ステップ 3: 不明点の洗い出し

不確かなことをリストアップします。

  • 十分に理解していないビジネスルール
  • 対処方法がわからないエッジケース
  • 推測している部分

これらはバックエンドが明確化したり反論するきっかけになります。

ステップ 4: 議論の余地を残す

最後にオープンクエスチョンを残します。

  • 「~するのは理にかなっていますか?」
  • 「~を期待すべきですか?」
  • 「もっと簡単な方法はありますか?」

出力形式

.claude/docs/ai/<feature-name>/backend-requirements.md を作成します。

# バックエンド要件: <機能名>

## コンテキスト
[何を構築しているか、誰のためか、どのような問題を解決するか]

## 画面/コンポーネント

### <画面/コンポーネント名>
**目的**: この画面が行うこと

**表示に必要なデータ**:
- [データの説明(フィールド名ではなく)]
- [別のデータ]
- [データ間の関係]

**アクション**:
- [アクションの説明] → [期待される結果]
- [別のアクション] → [期待される結果]

**処理すべき状態**:
- **空**: [これが発生するタイミング/理由]
- **ローディング**: [取得中のデータ]
- **エラー**: [起こりうる問題とユーザーに表示される内容]
- **特殊**: [エッジケース]

**UIに影響するビジネスルール**:
- [表示/有効状態を変更するルール]
- [アクションに影響する権限]

### <次の画面/コンポーネント>
...

## 不明点
- [ ] [X]が[Y]の場合に表示されるべきか不明
- [ ] [Z]のビジネスルールを理解していない
- [ ] [A]は[B]を意味すると推測している

## バックエンドへの質問
- [X]と[Y]を組み合わせるのは理にかなっていますか?
- [Z]は常に存在することを期待すべきですか?
- [W]に再利用できる既存データはありますか?

## 議論ログ
[バックエンドの応答、決定事項、要件の変更]

良いリクエストと悪いリクエスト

悪い(実装の詳細を指定)

「GET /api/contracts エンドポイントが必要です。id, title, status, created_at フィールドを持つ配列を返してください」

良い(必要なものを記述)

「契約書のリストを表示する必要があります。各項目には契約書のタイトル、現在のステータス、作成日時を表示します。ユーザーはステータスでフィルタリングできる必要があります。」

悪い(構造を仮定)

「プロバイダオブジェクトは契約書レスポンス内にネストされるべきです」

良い(関係性を記述)

「各契約書について、プロバイダの情報(名前とロゴ)を表示する必要があります。」

悪い(コンテキストなし)

「契約データが必要です」

良い(コンテキストあり)

「ダッシュボードに「最近の契約書」ウィジェットがあります。最新の5件の契約書を表示し、ユーザーがクリックすると詳細ページに移動します。」


反論を促す

要件に以下のプロンプトを含めてください。

  • 「データ構造に合わない場合は教えてください」
  • 「より良いアプローチがあれば提案してください」
  • 「これが正しい考え方かどうか確信がありません」
  • 「不必要に複雑になる場合は反論してください」

良い協力 = フロントエンドが問題を記述し、バックエンドが解決策を提案する


ルール

  • 実装詳細の禁止 — エンドポイント、メソッド、フィールド名を指定しない
  • 記述し、指示しない — 「何が必要か」を伝え、「どのように提供するか」は伝えない
  • コンテキストを含める — なぜ必要かがバックエンドの意思決定を助ける
  • 不明点を表面化する — 混乱を隠さず、明確化を促す
  • 反論を促す — 積極的にバックエンドの意見を求める
  • ドキュメントを更新する — バックエンドの応答を議論ログに追加する
  • 謙虚でいる — 要求ではなく、依頼であることを忘れない

バックエンドからの応答後

要件ドキュメントを更新します。

  1. 議論ログに応答を追加する
  2. フィードバックに基づいて要件を調整する
  3. 解決した不明点にチェックを入れる
  4. 決定事項を記録する

このドキュメントは、合意事項の真実の情報源となります。

Individual skills in this repo

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

関連スキル