mhn-leaerboardの.clinerules
あなたは高度な問題解決能力を持つAIアシスタントです。以下の指示に従って、効率的かつ正確にタスクを遂行してください。
まず、ユーザーから受け取った指示を確認します：
<指示>
{{instructions}}
</指示>
この指示を元に、以下のプロセスに従って作業を進めてください：
---
1. 指示の分析と計画
<タスク分析>
- 主要なタスクを簡潔に要約してください。
- 記載された技術スタックを確認し、その制約内での実装方法を検討してください。
- 重要な要件と制約を特定してください。
- 潜在的な課題をリストアップしてください。
- タスク実行のための具体的なステップを詳細に列挙してください。
- それらのステップの最適な実行順序を決定してください。
### 重複実装の防止
実装前に以下の確認を行ってください：
- src/components/ 内の既存コンポーネントの再利用可能性
- src/lib/ 内のユーティリティ関数の活用
- 共通のスタイル定義（src/styles/global.ts）の利用
- 多言語対応コンポーネントの統一的な実装方法
このセクションは、後続のプロセス全体を導くものなので、時間をかけてでも、十分に詳細かつ包括的な分析を行ってください。
</タスク分析>
---
2. タスクの実行
- 特定したステップを一つずつ実行してください。
- 各ステップの完了後、簡潔に進捗を報告してください。
- 実装時は以下の点に注意してください：
- src/components/ 内のコンポーネント構造の一貫性維持
- TypeScriptの型定義の厳密な管理
- ランキングロジックの整合性確保
- 多言語対応の一貫性維持
---
3. 品質管理と問題対応
- 各タスクの実行結果を迅速に検証してください。
- エラーや不整合が発生した場合は、以下のプロセスで対応してください：
a. TypeScriptコンパイルエラーの確認と修正
b. Viteビルドエラーの解決
c. コンポーネントのレンダリング検証
d. ランキング計算ロジックの正確性確認
- 検証結果は以下の形式で記録してください：
a. 検証項目と期待される結果
b. 実際の結果と差異
c. 必要な対応策（該当する場合）
---
4. 最終確認
- すべてのタスクが完了したら、成果物全体を評価してください。
- 当初の指示内容との整合性を確認し、必要に応じて調整を行ってください。
- 実装した機能に重複がないことを最終確認してください。
- 多言語対応の完全性を確認してください。
---
5. 結果報告
以下のフォーマットで最終的な結果を報告してください：
`markdown
# 実行結果報告
## 概要
## 実行ステップ
...
## 最終成果物
## 課題対応（該当する場合）
- 発生した問題と対応内容
- 今後の注意点
## 注意点・改善提案
`
---
## 重要な注意事項
- 必ず日本語で回答してください。
- Honoのドキュメントはhono_docs.mdに記載しています
- node_modulesの内容は読み込まずに無視すること
- .gitignoreに含まれるファイルの内容は読み込まずに無視すること
- 不明点がある場合は、作業開始前に必ず確認を取ってください。
- 重要な判断が必要な場合は、その都度報告し、承認を得てください。
- 予期せぬ問題が発生した場合は、即座に報告し、対応策を提案してください。
- 一定のタスクが完了した場合はgitコミットを行ってください。
- .envは読まないこと
- 秘匿情報はgitにコミットしないこと
- プロンプトを必ず含めること
- 実装した内容をリスト形式で書き記すこと
- **明示的に指示されていない変更は行わないでください。**
- **特にランキングロジックの変更は慎重に行い、必ず承認を得てください。**
- **多言語対応の一貫性を維持してください。**
---
# 技術スタック
## コア技術
- TypeScript
- Vite
- Hono
- JSX
## フロントエンド
- React Components
- Global Styles
## 開発ツール
- Biome (コード整形)
- npm
- bun
---
# プロジェクト構成
以下のディレクトリ構造に従って実装を行ってください：
`
mhn-leaderboard/
├── src/
│ ├── global.d.ts # グローバル型定義
│ ├── index.tsx # エントリーポイント
│ ├── components/ # Reactコンポーネント
│ │ ├── Archives.tsx # アーカイブ表示
│ │ ├── Changelogs.tsx # 変更履歴
│ │ ├── Guideline.tsx # ガイドライン（日本語）
│ │ ├── GuidelineEn.tsx # ガイドライン（英語）
│ │ ├── Header.tsx # ヘッダー
│ │ ├── History.tsx # 履歴表示
│ │ ├── Home.tsx # ホーム画面
│ │ ├── Layout.tsx # レイアウト
│ │ ├── LinkLists.tsx # リンクリスト
│ │ ├── LinkMonsterLists.tsx # モンスターリンクリスト
│ │ ├── MonsterTable.tsx # モンスター一覧
│ │ ├── RankerTable.tsx # ランキング表示
│ │ ├── RankerTitle.tsx # ランキングタイトル
│ │ ├── SupportUs.tsx # サポート情報（日本語）
│ │ ├── SupportUsEn.tsx # サポート情報（英語）
│ │ ├── TableTitle.tsx # テーブルタイトル
│ │ ├── UpdateHistory.tsx # 更新履歴
│ │ └── UpdateInfo.tsx # 更新情報
│ ├── lib/ # ユーティリティ
│ │ ├── constans.ts # 定数定義
│ │ ├── ranking.ts # ランキングロジック
│ │ └── utils.ts # 共通関数
│ └── styles/ # スタイル定義
│ └── global.ts # グローバルスタイル
`
### 配置ルール
- グローバル型定義 → src/global.d.ts
- エントリーポイント → src/index.tsx
- Reactコンポーネント → src/components/
- ユーティリティ関数 → src/lib/utils.ts
- 定数定義 → src/lib/constans.ts
- ランキングロジック → src/lib/ranking.ts
- スタイル定義 → src/styles/global.ts
---
# テスト規則
## テストファイルの配置
- コンポーネントのテスト → src/components/__tests__/
- ユーティリティのテスト → src/lib/__tests__/
## テストの実装規則
1. テストファイルの命名
- コンポーネント: [ComponentName].test.tsx
- ユーティリティ: [utilityName].test.ts
2. テストの構造
- describeブロックでテストをグループ化
- itブロックで個別のテストケースを記述
- 期待される結果を明確にコメントで記述
3. モック化の規則
- 外部APIやデータベースアクセスは必ずモック化
- モックデータは現実的なデータ構造を反映
- beforeEach/afterEachでモックのセットアップとクリーンアップを行う
- vitest の vi.spyOn を使用してモック関数を作成
4. テストの実行と検証
- 各テストファイル作成後は必ずテストを実行
- すべてのテストが成功することを確認
- TypeScriptのエラーがないことを確認
- テストカバレッジの確認
5. コンポーネントテストの注意点
- Honoのhtmlヘルパーを使用してレンダリング
- レンダリング結果を文字列として取得し検証
- クラス名、テキスト、属性値などの存在を確認
- 多言語対応のテキストが正しく表示されることを確認
6. ユーティリティテストの注意点
- 関数の入出力を厳密にテスト
- エッジケースを考慮したテストケースを作成
- 日付や時刻に依存するテストは固定値を使用
7. テストメンテナンス
- コンポーネントやユーティリティの変更時は対応するテストも更新
- テストが失敗した場合は原因を特定し修正
- テストコードの重複を避け、必要に応じてヘルパー関数を作成