ralph-tui-prd

Ralph TUI PRD Generator

ralph-tui を使った AI エージェントによる実行に最適化された、詳細なプロダクト要件定義書（PRD）を作成します。

---

このツールの役割

1. ユーザーから機能の説明を受け取ります
2. 必須の確認質問を 3〜5 件、選択肢に文字を付けて尋ねます。一度に提示するのは 1 セットです
3. 必ず品質ゲートについて尋ねます（合格が必須のコマンド）
4. 回答を受け取るたびに、必要に応じて追加の質問をします（適応的な掘り下げ）
5. 十分な情報が集まったら、構造化された PRD を生成します
6. TUI による解析のため、PRD を [PRD]...[/PRD] マーカーで囲んで出力します

---

ステップ 1：確認質問（反復）

質問は一度に 1 セットずつ尋ねます。それぞれの回答を次の質問に反映します。以下の点に焦点を当てます。

• 問題／目標： どのような問題を解決しますか？
• 主要な機能： 主な操作は何ですか？
• 範囲／境界： 何を対象外としますか？
• 成功基準： どのような状態になれば完了ですか？
• 統合： 既存の機能とどのように連携しますか？
• 品質ゲート： 各ストーリーで合格が必須のコマンドは何ですか？（必須）

質問の形式：

1. What is the primary goal of this feature?
   A. Improve user onboarding experience
   B. Increase user retention
   C. Reduce support burden
   D. Other: [please specify]

2. Who is the target user?
   A. New users only
   B. Existing users only
   C. All users
   D. Admin users only

これにより、ユーザーは「1A, 2C」のように回答して、すばやくやり取りを進められます。

Claude Code を対話セッションで使用している場合は、代わりに AskUserQuestion ツールを使って質問を提示してもかまいません。質問と選択肢は同じものを、一度に 1 セットずつ提示してください。このスキルを ralph-tui create-prd で実行する場合、エージェントは非対話モードで動作し、ツール呼び出しに回答できる人はいません。そのため、上記のように選択肢に文字を付けた質問をプレーンテキストで尋ねてください。

品質ゲートに関する質問（必須）

必ず品質ゲートについて尋ねてください。品質ゲートはプロジェクトごとに異なります。

What quality commands must pass for each user story?
   A. pnpm typecheck && pnpm lint
   B. npm run typecheck && npm run lint
   C. bun run typecheck && bun run lint
   D. Other: [specify your commands]

For UI stories, should we include browser verification?
   A. Yes, use dev-browser skill to verify visually
   B. No, automated tests are sufficient

適応的な質問

回答を受け取るたびに、次のいずれかを判断します。

• 追加の質問をする（回答から複雑さが明らかになった場合）
• 新しい側面について尋ねる（現在の領域が明確になった場合）
• PRD を生成する（十分な情報が集まった場合）

通常、質問は 2〜4 ラウンド必要です。

---

ステップ 2：PRD の構成

以下のセクションで PRD を生成します。

1. はじめに／概要

機能と、それが解決する問題の簡潔な説明です。

2. 目標

具体的かつ測定可能な目標を箇条書きで記載します。

3. 品質ゲート

重要： すべてのユーザーストーリーで合格が必須のコマンドを記載します。

## Quality Gates

These commands must pass for every user story:
- `pnpm typecheck` - Type checking
- `pnpm lint` - Linting

For UI stories, also include:
- Verify in browser using dev-browser skill

このセクションは変換ツール（ralph-tui-create-json、ralph-tui-create-beads）によって抽出され、各ストーリーの受け入れ基準に追加されます。

4. ユーザーストーリー

各ストーリーには、以下が必要です。

• タイトル： 内容がわかる短い名前
• 説明： 「[ユーザー]として、[メリット]を得るために[機能]がほしい」
• 受け入れ基準： 「完了」の条件を確認できるチェックリスト

各ストーリーは、AI エージェントによる 1 回の集中したセッションで実装できる規模にします。

形式：

### US-001: [Title]
**Description:** As a [user], I want [feature] so that [benefit].

**Acceptance Criteria:**
- [ ] Specific verifiable criterion
- [ ] Another criterion

注： 個々のストーリーの基準に品質ゲートのコマンドを含めないでください。品質ゲートは「品質ゲート」セクションに一度だけ定義され、変換時に自動で適用されます。

重要：

• 受け入れ基準は曖昧ではなく、検証可能なものにしてください
• 「正しく動作する」は不適切です
• 「削除前にボタンで確認ダイアログを表示する」は適切です
• 各ストーリーは単独で完了できるようにしてください

5. 機能要件

具体的な機能を番号付きリストで記載します。

• 「FR-1：システムは、ユーザーが……できるようにする必要があります」
• 「FR-2：ユーザーが X をクリックしたとき、システムは……する必要があります」

明確かつ曖昧さのない記述にしてください。

6. 非目標（対象外）

この機能に含めない内容です。範囲を管理するうえで重要です。

7. 技術的な考慮事項（任意）

• 既知の制約や依存関係
• 既存システムとの統合ポイント
• パフォーマンス要件

8. 成功指標

成功をどのように測定するかを記載します。

9. 未解決の質問

引き続き確認が必要な質問や項目を記載します。

---

AI エージェント向けの記述

PRD は ralph-tui を通じて AI コーディングエージェントによって実行されます。そのため、次の点に注意してください。

• 明示的で曖昧さのない記述にします
• ユーザーストーリーは小さくし、1 回のセッションで完了できるようにします
• 可能な場合は、受け入れ条件を機械で検証できるようにします
• 分かる場合は、具体的なファイルパスを含めます
• プロジェクト内の既存のコードパターンを参照します

---

出力形式

重要： TUI で解析できるよう、最終的な PRD をマーカーで囲んでください。

[PRD]
# PRD: Feature Name

## Overview
...

## Quality Gates
...

## User Stories
...
[/PRD]

ファイル名： TUI は ./tasks/prd-[feature-name].md に保存します

---

会話の流れの例

ユーザー： TUI にダークモードを追加する PRD を作成してください

アシスタント： ダークモードの PRD 作成をお手伝いします。いくつか質問させてください。

1. 主な目的は何ですか？ A. 長時間のセッションで目の疲れを軽減する B. システムのテーマ設定に合わせる C. 外観をカスタマイズできるようにする D. その他

2. 設定を保存しますか？ A. はい、設定ファイルに保存する B. いいえ、セッション中のみ C. システムの設定に従う

ユーザー： 1A、2A

アシスタント： 分かりました。もう少し質問させてください。

3. どのコンポーネントでダークモードをサポートする必要がありますか？ A. すべての TUI コンポーネント B. メインの実行画面のみ C. メイン画面と設定 D. その他

4. 各ストーリーで合格する必要がある品質チェック用コマンドは何ですか？ A. pnpm typecheck && pnpm lint B. npm run typecheck && npm run lint C. bun run typecheck D. その他：[指定してください]

5. UI ストーリーでは、ブラウザーでの検証も含めますか？ A. はい、dev-browser スキルを使う B. いいえ、自動テストで十分

ユーザー： 3A、4A、5A

アシスタント： 完璧です。PRD を作成するための情報がそろいました。

[PRD]

PRD：Ralph TUI のダークモード

概要

ralph-tui にダークモードのサポートを追加し、長時間のオーケストレーションセッションで目の疲れを軽減します。この機能はすべての TUI コンポーネントに適用され、ユーザーの設定を設定ファイルに保存します。

目標

• 暗い環境でも快適に表示できるようにする
• セッションをまたいでテーマ設定を保持する
• すべての TUI コンポーネントに一貫したスタイルを適用する

品質ゲート

各ユーザーストーリーで、次のコマンドに合格する必要があります。

• pnpm typecheck - 型チェック
• pnpm lint - リント

UI ストーリーでは、さらに次の項目も含めます。

• dev-browser スキルを使用してブラウザーで検証する

ユーザーストーリー

US-001：テーマ設定の追加

説明： ユーザーとして、好みのテーマ（ライト／ダーク）を設定し、セッションをまたいで保持したいです。

受け入れ条件：

• .ralph-tui.yaml のスキーマに theme フィールドを追加する
• 設定値として「light」、「dark」、「system」をサポートする
• 下位互換性のため、デフォルトを「light」にする

US-002：ダークテーマのカラーパレットを作成

説明： ユーザーとして、目に優しい、コントラストが穏やかなダークテーマを使いたいです。

受け入れ条件：

• 純粋な黒ではなく、グレー系の色調でダークパレットを定義する
• 十分なコントラスト比（WCAG AA）を確保する
• 選択、ホバー、無効など、すべての UI 状態で色が適切に機能する

US-003：TUI コンポーネントにテーマを適用

説明： ユーザーとして、すべての TUI コンポーネントにテーマ設定を反映したいです。

受け入れ条件：

• ヘッダーコンポーネントにテーマカラーを適用する
• タスクリストにテーマカラーを適用する
• 詳細パネルにテーマカラーを適用する
• 進捗バーにテーマカラーを適用する
• ダイアログにテーマカラーを適用する

US-004：設定画面にテーマ切り替えを追加

説明： ユーザーとして、TUI の設定画面からテーマを切り替えたいです。

受け入れ条件：

• 設定画面にテーマの項目が表示される
• 再起動せずに変更がすぐに反映される
• 変更が設定ファイルに保存される

機能要件

• FR-1：テーマ設定を .ralph-tui.yaml から読み取れること
• FR-2：TUI の起動時にテーマが適用されること
• FR-3：設定画面でのテーマ変更がすぐに反映されること
• FR-4：どちらのテーマでも、すべてのテキストが読みやすいこと

非目標

• システムテーマの自動検出（今後の拡張）
• ライト／ダーク以外のカスタム配色
• コンポーネントごとのテーマ上書き

技術的な考慮事項

• 利用可能であれば、既存の OpenTUI のテーマ設定機能を使用します
• React コンポーネント向けの ThemeContext の作成を検討します
• テーマ変更時の再レンダリングを最小限に抑えます

成功指標

• すべてのコンポーネントがダークモードで正しくレンダリングされます
• アクセシビリティのコントラストに問題がありません
• テーマがセッションをまたいで保持されます

未解決の質問

• v2 ではシステムのテーマ設定を自動検出するべきでしょうか？ [/PRD]

---

チェックリスト

PRD を出力する前に：

• 文字付きの選択肢を提示して明確化の質問をした
• 品質ゲートについて質問した（必須）
• 必要に応じて追加の質問をした
• プロジェクト固有のコマンドを記載した品質ゲートのセクションを含めた
• ユーザーストーリーが小さく、個別に完了できる
• ユーザーストーリーに品質ゲートのコマンドを含めていない（コマンドは品質ゲートのセクションに記載）
• 機能要件に番号を付け、曖昧さのないものにした
• 非目標のセクションで明確な境界を定義した
• PRD を [PRD]...[/PRD] マーカーで囲んだ