mcpField
C
cs-build-create-prd

cs-build-create-prd

github.com/codespringapp開発153 回インストール3 週間前に更新
リポジトリ

cs-build-create-prd について

cs-build-create-prdは、実際のコードベースを基にフロントエンド、バックエンド、または両方の機能PRDを作成するCodeSpringスキルです。共有契約や既存システムを記録し、コードベースを変更せずにPRDを機能のマインドマップへ関連付けます。

主な機能

  1. 01作成前に機能のコードを調査
  2. 02フロントエンドまたはバックエンドのPRD生成
  3. 03共有APIとバックエンドシステムの記録
  4. 04フロントエンド設計とナビゲーションの記述
  5. 05PRDを機能のマインドマップに関連付け

活用シーン

  1. 01既存のコード規約に沿った機能計画
  2. 02APIルートと共有バックエンド依存関係の記録
  3. 03フロントエンドのナビゲーションと設計パターンの整理
  4. 04生成したPRDをCodeSpringプロジェクトのキャンバスに追加

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/codespringapp/codespring-skills --skill cs-build-create-prd

インストール後、Claude Code で/cs-build-create-prdを入力して読み込まれたか確認します。

詳細

CodeSpring で PRD を作成する

PRD によって、CodeSpring は機能を完全かつ正確に理解できるため、新機能はバックエンドを重複して実装したり、共有 API ルートを再作成したり、デザインシステムを一から作り直したりするのではなく、既存の機能を土台に構築されます。このスキルでは、実際のコードに基づいて、選択した機能のフロントエンドおよび/またはバックエンドの PRD を作成します。

これは PRD の作成方法に関する唯一の信頼できる情報源です。他のスキル(例:cs-build-import-codebase)は再実装するのではなく、これを呼び出します。

共通のナレッジは、codespring スキルの参照ファイルにあります:references/analyze-codebase.md、references/mindmap-structure.md、references/prd-management.md、references/pitfalls.md、references/codespring-docs.md。

0. 最初に接続する

codespring auth status(必要に応じてログイン)と codespring status を実行します。ローカルの .codespring/config.json にある projectId を使用し、表示します。コードベースがまだ CodeSpring にない場合は、先に cs-build-import-codebase を実行します。このスキルはコードを読み取り、CodeSpring にのみ書き込みます。コードベースは決して変更しません。

1. 何を生成するか尋ねる(対話形式)

ユーザーのコア機能(codespring features またはマインドマップの node-features 項目から)を表示し、次の点を尋ねます:

  1. どの機能ですか?(1つ、複数、またはすべて)
  2. フロントエンド、バックエンド、または両方ですか? すでに回答されている場合を除き、選択を待ちます。

2. 実際のコードを詳しく調べる

機能の実際のコードを読み取ります(推測しないでください)。analyze-codebase.md §8–9 の詳細を取り込みます。次の内容を網羅します:

バックエンド PRD — 共有コントラクトを記録する(新機能追加時に最もリスクが高い部分です)
  • アーキテクチャと構成 — 機能のコードがどのように構成され、どの規約に従っているか。
  • ルーター/API ルート/エンドポイント — パス、メソッド、リクエスト/レスポンス、および複数の機能で共有されているすべてのルートを明記します。
  • データモデル — テーブルと列挙型、主要なカラム、リレーションシップ、読み取りと書き込み。
  • 再利用可能なサーバーコード — すでに存在し、再実装せずに再利用すべきアクション/サービス/クエリ/フック。
  • 共有バックエンドシステム — 新機能と競合する可能性があるため、次の点を明確に記載します:
    • ホスティング/デプロイ先(AWS、Vercel、Fly など)とプラットフォームの制限
    • クレジット付与/使用量計測システム、決済、サブスクリプション、および返金システム
    • バックグラウンドのジョブ/パイプライン/キュー/cron、長時間実行または非同期の生成ジョブ
    • ストレージ:S3 の規約/バケット、ファイルパス、署名付き URL のパターン
    • メディア/レンダリングパイプライン(Remotion/動画コンポジションなど)が存在する場合
    • データベース、マイグレーション
    • 認証と行レベルセキュリティ(RLS)
    • 使用または再利用すべき環境変数名
    • Webhook(および署名検証)
  • セキュリティ — 認可、所有権チェック、バリデーション、シークレット、RLS、Webhook の署名。
  • 再利用と依存関係のマップ — 「再構築せずに再利用するもの」の一覧に加え、将来の変更によって他の機能が気付かないうちに壊れることを防ぐため、この機能に依存するものも記載します。
フロントエンド PRD — デザインシステムとナビゲーションを記録する
  • デザイントークン — 色/ブランディング、角丸、スペーシングのスケール、タイポグラフィ、シャドウ(Tailwind の設定/CSS 変数/テーマから取得)。
  • コンポーネントと UI のスタイル — UI ライブラリ、およびボタン/カード/入力欄/モーダルのスタイルと状態。
  • レイアウト、配置、スペーシング — グリッド/フレックス、カラム、ブレークポイント、間隔、それぞれの相対的な配置。具体的に記載します。
  • ユーザーに表示される内容 — ヘッダー、セクション、カード、テーブル、空の状態/読み込み状態、トースト。
  • ナビゲーション/インタラクションマップ — 具体的な経路:どのナビゲーション項目/ボタンが開くか → ルート → 表示内容 → 各インタラクションの動作。さらに、他の機能へのリンクと他の機能からのリンクも記載します。
まず機能のノートに書き込む(ノートはジェネレーターのコンテキストです)
codespring mindmap note <coreFeatureId> --title "How it works — <Feature>" --text "$(cat note.txt)"   # redirect output to /dev/null

3. 生成する(prd-management.mdを参照)

POST /prds/generate  { projectId, bridgeNodeId: "bridge-feature-<featureId>", prdType: "frontend" | "backend" }

タイムアウトは120秒以上に設定してください(クライアントが中断してもレコードは作成されるため、重複が発生します)。「Both」の場合は、2回呼び出してください。生成後、PRDを読み返し(codespring prd <id>)、上記の共有システムの詳細が実際に反映されていることを確認してください。内容が不十分な場合は、メモを補足して再生成するか、より良いバージョンでprd syncを実行してください。

4. キャンバスに添付する(mindmap-structure.mdを参照)

prdBridge → prdFrontend/prdBackendノードを追加し、PUT /mindmaps/project/<projectId>を実行してください。コア機能の場合はprdBridge.data.featureId = "node-features"、サブ機能の場合はその機能のサブ機能グループノードIDを設定します。itemIdには選択した機能IDを設定します。その機能のprdBridgeがすでに存在する場合は、2つ目のブリッジを作成せず、そこにPRDノードを追加してください。

ユーザーはCodeSpring WebアプリでもPRDを生成できます(機能のPRDブリッジを右クリック → 追加 + 生成)。そちらを希望する場合は、references/codespring-docs.mdを案内してください。

5. 必要に応じて重複を整理し、検証する

タイムアウトによる重複がある場合は、チェックポイントを作成してから余分なものを削除します(prd-management.md)。検証します(pitfalls.md):PRDに実際の内容があり、共有システムの詳細が含まれていること、キャンバスに有効なprdIdを持つprdBridgeとPRDノードが表示されていること、そしてnode-featuresのコア機能数が正しいこと(平坦化されたサブ機能は適切な親に付け直します)。ユーザーにプロジェクトのリンクを渡してください。

望ましい状態

  • Backend PRDには、共有システムの契約として、ルート(共有のものには印を付ける)、データモデル、認証/RLS、ジョブ/cron、ストレージ/バケット、決済/クレジット/返金、環境変数、および「再利用するもの/壊してはいけないもの」を示す明確な依存関係マップが記載されています。
  • Frontend PRDには、デザインシステムと具体的なナビゲーション経路が記載されています。
  • 両方のPRDが機能のブリッジに添付され、実際のコードに基づいています。

コメント