diegosouzapw Review Docs Skill
設計書を参照し、実装に必要な情報を抽出するスキル。
使い方
/review-docs <機能名またはコンポーネント名>
例
/review-docs Dial
/review-docs 日記作成機能
/review-docs 自動保存
/review-docs DateRange値オブジェクト
このスキルが行うこと
- 該当する設計書の特定: 機能名から関連する設計書を自動的に特定
- 関連箇所の抽出: 設計書から実装に必要な情報を抽出
- MVP版の確認: MVP版とPhase 2の区別を明確化
- 実装ガイドの提供: 具体的な実装方針を提示
対象設計書
docs/00_INDEX.md: プロジェクト概要docs/01_REQUIREMENTS.md: 要件定義docs/02_ARCHITECTURE.md: システムアーキテクチャdocs/03_DATA_MODEL.md: データモデル設計docs/04_UI_UX_DESIGN.md: UI/UX設計docs/05_FEATURES.md: 機能仕様docs/06_SECURITY.md: セキュリティ設計docs/07_PERFORMANCE.md: パフォーマンス設計
作業手順
1. 機能名の特定
ユーザーから指定された機能名を確認し、関連する設計書を特定する。
機能名の例:
- Dial（日付選択Dial）
- 日記作成機能
- 自動保存
- DiaryEntryエンティティ
- DateValue値オブジェクト
- PastEntriesList
2. 関連設計書の読み込み
特定した設計書を読み込む。必要に応じて複数の設計書を並列で読み込む。
例:
機能名: Dial
→ 関連設計書:
- 01_REQUIREMENTS.md (FR-01: 日付選択機能)
- 04_UI_UX_DESIGN.md (セクション3.1: Dial)
- 05_FEATURES.md (セクション1: Dial操作による日付選択)
3. MVP版の仕様を抽出
重要: MVP版とPhase 2を必ず区別する。
MVP版の特徴:
- LocalStorageのみ
- Client Componentsのみ（'use client'）
- 認証なし
- 自動保存のみ（保存ボタンなし）
- カレンダーUIによる日付選択（Dialは補助）
4. 実装方針を提示
以下の観点から実装方針を提示する:
アーキテクチャ
- データ保存方法（LocalStorage / Prisma）
- コンポーネントタイプ（Client / Server）
- 状態管理（useState / Context）
データモデル
- 使用するエンティティ・値オブジェクト
- バリデーションルール（Zodスキーマ）
- リポジトリインターフェース
UI設計
- Atomic Design階層（atoms / molecules / organisms）
- レスポンシブ対応（モバイル / タブレット / デスクトップ）
- アクセシビリティ（ARIA属性、キーボード操作）
テスト
- テストファースト（TDD）
- テストケース（正常系 / 異常系）
5. チェックリストの提供
実装時に確認すべきチェックリストを提供する。
6. コード例の抽出
設計書から関連するコード例を抽出する。
出力フォーマット
# 設計書レビュー: <機能名>
## 📚 関連設計書
- **01_REQUIREMENTS.md**: FR-XX セクション名
- **05_FEATURES.md**: セクションY「機能名」
- **04_UI_UX_DESIGN.md**: セクションZ「コンポーネント名」
## 🎯 MVP版の仕様
### 必須要件（Must）
1. 要件1の詳細
2. 要件2の詳細
### 任意要件（Should）
1. 任意要件1
2. 任意要件2
### 制約（Constraint）
1. 制約1
2. 制約2
### Phase 2での実装（将来）
- 将来実装する機能
## 🏗️ 実装方針
### アーキテクチャ
- **データ保存**: LocalStorageDiaryRepository
- **コンポーネント**: Client Component（'use client'）
- **状態管理**: useState, useEffect
### データモデル
- **エンティティ**: DiaryEntry
- **値オブジェクト**: DateValue（使用する場合）
- **バリデーション**: DiaryEntrySchema (Zod)
### UI設計
- **Atomic Design階層**: organisms / molecules / atoms
- **主要コンポーネント**: コンポーネント名
- **依存コンポーネント**: 下位コンポーネントのリスト
### レスポンシブ対応
- **モバイル（〜767px）**: 仕様
- **タブレット（768px〜1023px）**: 仕様
- **デスクトップ（1024px〜）**: 仕様
### アクセシビリティ
- **ARIA属性**: aria-label, aria-describedby など
- **キーボード操作**: Tab, Enter, Escape など
- **フォーカス管理**: focus-visible など
## 📝 実装チェックリスト
### 開始前
- [ ] 関連する設計書を全て確認した
- [ ] MVP版とPhase 2の区別を理解した
- [ ] Atomic Designの階層を確認した
### 実装時
- [ ] テストを先に書いた（TDD）
- [ ] エンティティ・値オブジェクトを使用した
- [ ] バリデーションを実装した
- [ ] Clean Architectureの依存関係を守った
### 完了時
- [ ] テストが全て通る
- [ ] アクセシビリティを確認した
- [ ] レスポンシブデザインを確認した
- [ ] 設計書との整合性を再確認した
## 💡 実装のポイント
- ポイント1
- ポイント2
## ⚠️ 注意事項
- 注意事項1
- 注意事項2
## 🔗 関連コード例
（設計書から抽出したコード例）
重要な注意事項
MVP版とPhase 2を混同しない
- MVP版: LocalStorage + Client Components
- Phase 2: Prisma + Server Components
設計書の内容を正確に抽出する
- 推測や追加の提案はしない
- 設計書に記載されている内容のみを抽出
最新の設計書を参照する
- FINAL_REVIEW_RESULT.md を確認済み
- すべての修正が反映されている
複数の設計書を横断的に参照する
- 機能仕様（05）だけでなく、要件（01）、UI設計（04）も確認
- アーキテクチャ（02）、データモデル（03）との整合性も確認
実装可能な具体的な情報を提供する
- 抽象的な説明ではなく、具体的なコード例を提示
- チェックリストは実際にチェックできる項目にする