TDD フロー

Use when

• ロジック・ユーティリティ・リポジトリ層の実装
• テストで品質を担保すべき機能追加・変更

Don't use when

• UI のみの変更（→ /implement）
• テスト不要な設定変更（→ /implement）
• コードレビューのみ（→ /review）

進捗管理

スキル開始時に全フェーズを TaskCreate で登録し、各フェーズの開始・完了時に TaskUpdate で状態を更新すること。

タスク一覧:

1. Phase 1: 分析（activeForm: "要件を分析中"）
2. Phase 2: 設計（activeForm: "設計中"）
3. Phase 3: テスト設計（activeForm: "テストケースを設計中"）
4. Phase 4: Red（activeForm: "テストを実装中"）
5. Phase 5: Green（activeForm: "本番コードを実装中"）
6. Phase 6: レビュー（activeForm: "レビュー中"）

以下の 6 フェーズを順に実行する。各フェーズを飛ばさないこと。 小規模タスクでは各フェーズを簡潔にまとめてよいが、省略はしない。

前提

• テストフレームワーク: Vitest
• テスト配置: 対象ファイルと同階層の __tests__/ ディレクトリ
• プロジェクト規約: CLAUDE.md に従う
• テスト実行: pnpm --filter web test:run
• Lint: pnpm --filter web lint
• 型チェック: pnpm --filter web typecheck

タスク

$ARGUMENTS

Phase 1: 分析

タスクの要件を整理する。

1. 要件・制約・非要件を明確にする
2. 対象ファイル・関数を特定する
3. 影響範囲を確認する

※ 小規模タスクは箇条書き数行でよい。

完了報告

## Phase 1 完了: 分析
- 要件: {要件の要約}
- 対象: {ファイルパス}
- 影響範囲: {影響するファイル・機能}

Phase 2: 設計

実装の構造を決定する。

1. 責務の分割とインターフェースを決める
2. データの流れを整理する
3. 既存コードとの統合方針を決める

※ 単機能なら関数シグネチャだけでよい。

完了報告

## Phase 2 完了: 設計
- 構造: {関数・モジュール構成}
- インターフェース: {主要な型・シグネチャ}

Phase 3: テスト設計

テストケースを設計する。

1. 以下の観点でテストケースを列挙する:
   • 正常系: 基本的な入出力
   • 異常系: 無効な入力、エラー処理
   • 境界値: 空配列、0、null/undefined、最大値など
2. 各ケースの期待値を先に決める

完了報告

## Phase 3 完了: テスト設計
- テストファイル: {テストファイルパス}
- ケース数: {N}件（正常系: {n1} / 異常系: {n2} / 境界値: {n3}）

Phase 4: Red（テスト実装）

設計したテストケースをコードに落とす。この時点ではテストは失敗する。

1. テストファイルを作成する
2. 全テストケースを実装する
3. pnpm --filter web test:run を実行し、テストが失敗することを確認する

テストが失敗しない場合は、テストの書き方を見直す。

完了報告

## Phase 4 完了: Red
- テストファイル: {パス}
- テスト数: {N}
- 結果: 全テスト失敗を確認

Phase 5: Green（実装）

テストをパスする最小限の本番コードを実装する。

1. 本番コードを実装する
2. テスト通過後、必要に応じてリファクタリングする（重複排除、命名改善など）
3. 以下を全てパスすることを確認する:
   • pnpm --filter web test:run
   • pnpm --filter web lint
   • pnpm --filter web typecheck
4. 失敗する場合は修正を繰り返す

完了報告

## Phase 5 完了: Green
- 実装ファイル: {パス}
- test: PASS
- lint: PASS
- typecheck: PASS

Phase 6: レビュー

実装したコードをレビューする。

仕様準拠

• Phase 1 の要件を満たしている
• Phase 2 の設計との整合が取れている
• 全テストケースが実装されている
• エッジケースがカバーされている

危険フラグ

以下が含まれていないことを確認する:

• ハードコードされた秘密情報
• デバッグ用 console.log
• コメントアウトされたコード
• 放置された TODO / FIXME
• any 型の乱用

コード品質

• CLAUDE.md の規約に準拠している
• レイヤー設計（依存の方向）を守っている
• 不要な変更が含まれていない
• 影響範囲に問題がない

検証

• pnpm --filter web test:run PASS
• pnpm --filter web lint PASS
• pnpm --filter web typecheck PASS

完了報告

## Phase 6 完了: レビュー
- 仕様準拠: OK / NG（詳細）
- 危険フラグ: なし / あり（詳細）
- コード品質: OK / NG（詳細）
- 総評: {一言コメント}

問題がある場合は Phase 5 に戻って修正する。