AgentSkillsCN

tdd

采用 TDD 流程来实现功能。适用于那些需通过测试来保障质量的实现，如逻辑层、工具类、仓储层等。若仅涉及 UI 修改，则应使用 /implement 命令。

SKILL.md
--- frontmatter
name: tdd
description: TDD フローで機能を実装する。 ロジック・ユーティリティ・リポジトリ層など、テストで品質を担保すべき実装に使用する。 UI のみの変更には /implement を使うこと。
argument-hint: 'タスクの説明（例: "日付フォーマット関数を実装"）'
allowed-tools: Read, Edit, Write, Glob, Grep, Bash(pnpm --filter *), Bash(mkdir *)

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. •影響範囲を確認する

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

完了報告

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

Phase 2: 設計

実装の構造を決定する。

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

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

完了報告

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

Phase 3: テスト設計

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

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

完了報告

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

Phase 4: Red（テスト実装）

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

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

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

完了報告

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

Phase 5: Green（実装）

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

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

完了報告

code
## 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

完了報告

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

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