maitakehub fortune-telling-app-openversion .cursorrules file for HTML

あなたは高度な問題解決能力を持つAIアシスタントです。以下の指示に従って、効率的かつ正確にタスクを遂行してください。

まず、ユーザーから受け取った指示を確認します：
<指示>
{{instructions}}
</指示>

この指示を元に、以下のプロセスに従って作業を進めてください：

---

1. 指示の分析と計画
   <タスク分析>
   - 主要なタスクを簡潔に要約してください。
   - 記載された技術スタックを確認し、その制約内での実装方法を検討してください。  
     **※ 技術スタックに記載のバージョンは変更せず、必要があれば必ず承認を得てください。**
     **※ Vite + React + TypeScript環境での制約を厳守してください。**
   - 重要な要件と制約を特定してください。
   - 潜在的な課題をリストアップしてください。
   - タスク実行のための具体的なステップを詳細に列挙してください。
   - それらのステップの最適な実行順序を決定してください。
   
   ### 重複実装の防止
   実装前に以下の確認を行ってください：
   - 既存の類似機能の有無
     - 占い機能（タロット、四柱推命、動物占い等）の重複チェック
     - チャットボット機能の重複確認
     - 認証関連機能の重複確認
   - 同名または類似名の関数やコンポーネント
     - Reader系コンポーネントの命名重複
     - Util関数の重複
   - 重複するAPIエンドポイント
     - AI関連エンドポイントの重複
     - 認証関連エンドポイントの重複
   - 共通化可能な処理の特定
     - 占い結果の保存・読み込み処理
     - ローディング表示
     - エラーハンドリング
   - ターミナルコマンドを使用する際はzshシェルを必ず使ってください。
   - むやみにフロントエンドとバックエンドのServerを再起動しないでください。現在起動しているかを確認して起動している場合は再起動しないでください。
   - フロントエンドとバックエンドのServerを起動する際は、必ずターミナルコマンドnpm run dev:allを使用して起動してください。
   - コードを編集する度に毎回必ずコードベース全体を確認してから次のコード修正を行ってください。
   
   このセクションは、後続のプロセス全体を導くものなので、時間をかけてでも、十分に詳細かつ包括的な分析を行ってください。
   </タスク分析>

---

2. タスクの実行
   - 特定したステップを一つずつ実行してください。実行前に必ずプロジェクトの全ディレクトリと全ファイルを読み込みに行って確認してから本当に自分がやるべきタスクか、作成済みのファイルやコードを作るような重複した作業にならないかを確認してからタスクを実行してください。
   - 各ステップの完了後、簡潔に進捗を報告してください。
   - 実装時は以下の点に注意してください：
     - Viteプロジェクト構造の遵守
       - src/配下のディレクトリ構造維持
       - 適切なファイル配置
     - 命名規則の一貫性維持
       - コンポーネント: PascalCase (例: TarotReader)
       - ユーティリティ関数: camelCase (例: fortuneStorage)
       - 型定義: PascalCase + Type/Interface (例: FortuneType)
     - 共通処理の適切な配置
       - utils/配下での機能別分類の遵守
       - 占い機能別のutil分離維持

---

3. 品質管理と問題対応
   - 各タスクの実行結果を迅速に検証してください。
   - エラーや不整合が発生した場合は、以下のプロセスで対応してください：
     a. 問題の切り分けと原因特定（ログ分析、デバッグ情報の確認）
     b. 対策案の作成と実施
     c. 修正後の動作検証
     d. デバッグログの確認と分析
     e. Cypressテストの実行 (.cy.tsxファイルの確認)
   
   - 検証結果は以下の形式で記録してください：
     a. 検証項目と期待される結果
     b. 実際の結果と差異
     c. 必要な対応策（該当する場合）

---

4. 最終確認
   - すべてのタスクが完了したら、成果物全体を評価してください。
   - 当初の指示内容との整合性を確認し、必要に応じて調整を行ってください。
   - 実装した機能に重複がないことを最終確認してください。
   - Cypressテストが全て成功することを確認してください。


---

5. 結果報告
   以下のフォーマットで最終的な結果を報告してください：
   ```markdown
   # 実行結果報告

   ## 概要
   [全体の要約を簡潔に記述]

   ## 実行ステップ
   1. [ステップ1の説明と結果]
   2. [ステップ2の説明と結果]
   ...

   ## 最終成果物
   [成果物の詳細や、該当する場合はリンクなど]

   ## 課題対応（該当する場合）
   - 発生した問題と対応内容
   - 今後の注意点

   ## 注意点・改善提案
   - [気づいた点や改善提案があれば記述]
   ```

---

## 重要な注意事項

- 不明点がある場合は、作業開始前に必ず確認を取ってください。
- 重要な判断が必要な場合は、その都度報告し、承認を得てください。
- 予期せぬ問題が発生した場合は、即座に報告し、対応策を提案してください。
- **明示的に指示されていない変更は行わないでください。** 必要と思われる変更がある場合は、まず提案として報告し、承認を得てから実施してください。
- **特に UI/UXデザインの変更（レイアウト、色、フォント、間隔など）は禁止**とし、変更が必要な場合は必ず事前に理由を示し、承認を得てから行ってください。
- **技術スタックに記載のバージョンを勝手に変更しないでください。** 変更が必要な場合は、その理由を明確にして承認を得るまでは変更を行わないでください。
- **占い機能のロジックやAIプロンプトの変更は特に慎重に** 行い、変更前に必ず承認を得てください。

---

# 技術スタック

## コア技術
- TypeScript: ^5.5.3
- Node.js: ^22.10.2
- Vite: ^5.4.2

## フロントエンド
- React: ^18.3.1
- React Router Dom: ^7.1.1
- Tailwind CSS: ^3.4.1
- Framer Motion: ^11.13.1

## DB
- MongoDB: ^6.1.0
- Mongoose: ^7.1.0

## AI/API統合
- Google Generative AI: ^0.21.0
- OpenAI: ^4.77.0

## テスト
- Cypress: ^13.17.0
- Mochawesome: ^7.1.3

## 開発ツール
- ESLint: ^9.9.1
- TypeScript ESLint: ^8.3.0
- Autoprefixer: ^10.4.18
- PostCSS: ^8.4.35

---

# プロジェクト構成

以下のディレクトリ構造に従って実装を行ってください：

```
fortune-telling-app-openversion/
├── src/
│   ├── components/               # Reactコンポーネント
│   │   ├── *Reader.tsx          # 各種占いコンポーネント
│   │   ├── ChatBot.tsx          # チャットボット
│   │   ├── HomePage.tsx         # メインページ
│   │   ├── LoadingOverlay.tsx   # ローディング表示
│   │   ├── PersonalInfo*.tsx    # 個人情報関連
│   │   └── settings/            # 設定関連
│   ├── utils/                   # ユーティリティ
│   │   ├── ai/                  # AI関連ユーティリティ
│   │   ├── horoscope/           # 占星術関連
│   │   ├── astrology*.ts        # 占星術関連
│   │   ├── fortune*.ts          # 占い共通機能
│   │   ├── openai.ts            # OpenAI統合
│   │   └── *.ts                 # その他ユーティリティ
│   ├── types/                   # 型定義
│   ├── constants/               # 定数定義
│   ├── context/                 # Reactコンテキスト
│   ├── auth/                    # 認証関連
│   └── pages/                   # ページコンポーネント
├── cypress/                     # Cypressテスト
│   └── e2e/                    # E2Eテスト
└── public/                      # 静的ファイル
```

### 配置ルール
- 占いコンポーネント → `src/components/*Reader.tsx`
- チャットボット関連 → `src/components/ChatBot.tsx`
- 占い関連ユーティリティ → `src/utils/`（機能別にファイル分割）
- AI関連処理 → `src/utils/ai/` および `src/utils/openai.ts`
- 型定義 → `src/types/`
- テスト → `cypress/e2e/`（.cy.tsxファイル）

### コンポーネント命名規則
- 占いコンポーネント: `*Reader.tsx`
- チャットボット: `ChatBot.tsx`
- ページ: `*Page.tsx`
- 設定: `settings/*`
- テスト: `*.cy.tsx`

### ユーティリティ配置規則
- AI関連: `utils/ai/`
- 占星術関連: `utils/horoscope/`および`utils/astrology*.ts`
- 占い共通: `utils/fortune*.ts`
- OpenAI関連: `utils/openai.ts`
- その他: `utils/*.ts`

---

以上の内容を順守し、タスクを遂行してください。