recipe-front-plan について
recipe-front-planは、設計ドキュメントに基づいてフロントエンドの計画を作成するワークフロースキルです。テストの骨格を生成し、作業計画の作成とレビューを行い、承認後に完了します。
主な機能
- 01設計文書と参照先のUI Specを選択
- 02受け入れテストの骨格を生成
- 03設計文書に基づく作業計画の作成
- 04計画のタスクと依存関係をレビュー
- 05計画承認後に終了
活用シーン
- 01フロントエンド機能の実装タスク計画
- 02設計文書からのテスト骨格生成
- 03計画内のタスク順序と検証方法の確認
インストール
コマンドをコピーしてターミナルで実行します。
npx skills add https:/ / github.com/ shinpr/ claude-code-workflows --skill recipe-front-planインストール後、Claude Code で/recipe-front-planを入力して読み込まれたか確認します。
詳細
明示的なユーザー指示:ユーザーは、このレシピで名前が指定されたすべてのサブエージェント呼び出しを明示的に指示し、承認しています。前提条件が満たされたら、該当する各呼び出しを実行してください。
Agent プロンプト、引き継ぎ、生成物を作成する前に、Skill:llm-friendly-context を実行してください。 ワークフローの判断、エージェントの呼び出し、指摘事項の解決を行う前に、Skill:subagents-orchestration-guide を実行してください。
コンテキスト:フロントエンドの計画フェーズ専用です。
オーケストレーターの定義
中核となるアイデンティティ:「私はオーケストレーターです。」(subagents-orchestration-guide スキルを参照)
ローカル権限ゲート:このレシピのワークフローに関する判断を行い、返された各結果を直接検証してください。意味的な成果物の作成は、指定された専門家に委任してください。
レビュー解決ゲート[必須]:修正または次の段階への進行に先立ち、成果物レビューで指摘された対応可能な事項をすべて、subagents-orchestration-guide の Review Resolution を通じて解決してください。
最初の指摘事項の処置を決定する前に、読み込まれた subagents-orchestration-guide スキルの references/review-resolution.md を読んでください。
実行プロトコル:
- 成果物の作成には指定された専門家を呼び出す — 専門家間でデータを引き渡し、結果を検証してください
- subagents-orchestration-guide スキルの計画フローに従う:
- 以下に定義された手順を実行します
- 完了前に計画内容の承認を得てください
- スコープ:以下の「スコープの境界」を参照してください
以下の各 Agent 呼び出しでは、機械的な抽出によってプロンプトを作成してください。指定された値をそのまま正確なフィールドに転記し、宣言されたシリアライズのみを適用したら、直ちに呼び出してください。
acceptance-test-generator はこの計画フローの一部であり、Design Doc に妥当な統合テスト/E2E テストの検証境界がない場合、選択されるレーンがないことがあります。
スコープの境界
このスキルに含まれるもの:
- Design Doc の選択
- acceptance-test-generator によるテストのスケルトン生成
- work-planner による作業計画の作成
- document-reviewer による作業計画のレビュー
- 計画の承認取得
責任の境界:このスキルは、レビュー済みの計画についてユーザーが実装を承認した時点で完了します。
以下の計画プロセスに従ってください:
実行プロセス
ステップ 1:Design Doc の選択
$ARGUMENTSで Design Doc が明示的に指定されている場合は、それを使用します- そうでない場合は、
docs/design/に Design Doc がちょうど 1 つだけ存在する場合に、それを使用します - UI Spec は、選択した Design Doc の
Referenced UI Specパスからのみ解決します - Design Doc が存在しない場合は、その旨を報告します。複数存在する場合は、選択できるよう一覧を提示します
ステップ 2:テストのスケルトン生成
- Agent ツールを使用して、該当するすべてのレーンを対象に acceptance-test-generator を呼び出します:
subagent_type: "dev-workflows-frontend:acceptance-test-generator"description: "Test skeleton generation"design_docs: [Design Doc path]- 存在する場合は
ui_spec: [UI Spec path] confirmed_requirement_context: Design Doc に記載された承認済み PRD のパス。または PRD がない場合は、変更されていない Requirement Convergence レコードvalue_input_requiredと、その不明値に関する継続処理について、subagents-orchestration-guide の HC-06 に従ってください
- 生成されたすべての null 以外のスケルトンパスを work-planner に渡します。証拠に裏付けられた空のレーンは、そのレーンの完了として扱い、work-planner に進みます
ステップ 3:作業計画の作成
Agent ツールを使用して work-planner を呼び出します:
subagent_type: "dev-workflows-frontend:work-planner"description: "Work plan creation"mode: createdesignDoc: [selected Design Doc path]- 存在する場合は
uiSpec: [UI Spec path] - 存在する場合は
prd: [approved PRD path] testSkeletons: [non-null generatedFiles paths]
ステップ 4:作業計画のレビュー
document-reviewer を呼び出して、作業計画をレビューします。
subagent_type: "dev-workflows-frontend:document-reviewer"description: "作業計画のレビュー"prompt: "doc_type: WorkPlan target: docs/plans/[plan-name].md. Work Plan 自身の Implementation Scope、タスク、Completion Criteria、依存関係、実行順序、正確なソースアンカーの存在、実行可能な検証、Review Scope をレビューしてください。Governing Documents のパスは引用元としてのみ扱い、指摘事項は引用された義務への違反に限定してください。"- 修正後の再レビュー、親要件または権限による終了、収束まで、Review Resolution Gate を実施します。差し戻された修正には、update mode の work-planner を使用してください。収束条件を満たした場合にのみ、計画を承認に提示してください。
ステップ 5:承認のための提示
- レビュー済みの作業計画を、まとめて承認してもらうためにユーザーに提示します。ユーザーが変更を求めた場合は、ユーザーが依頼した変更をそのまま work-planner に渡して再実行し、ステップ 4 を再度実施してください。
- 未解決の技術的根拠や外部依存関係は、影響を受けるタスクと検証範囲を明記して計画に記録します。確認済みの成果、望ましい将来要件、非目標をすべて同時に満たせず、ユーザーの選択が必要な場合にのみ、要件ゲートに戻ります。
完了時の応答
推奨:計画内容の承認後、以下の標準応答で締めくくります。
Frontend planning phase completed.
- Work plan: docs/plans/[plan-name].md
- Implementation authorization: granted for this task set
Please provide separate instructions for implementation.
Work Plan のレビューで指摘事項が却下された場合は、完了時の応答にそれらの ID、根拠となる理由、証拠を追記してください。