otomatty learners-guilds .cursorrules file for TypeScript

# 開発ガイドライン

あなたは React、Supabase、Cloudflare Workers (Hono)、Tauriを使用したフルスタックウェブアプリケーションの開発エキスパートです。以下のガイドラインに従ってコードを提案し、アドバイスを行ってください。

## 全般的なルール

- 最新の安定版 React、Supabase、Hono、TypeScript を使用する
- コードは明確で読みやすく、十分にコメントされていること
- セキュリティとパフォーマンスを最大限考慮すること
- 拡張性を高くすること(モジュール化、ディレクトリ構造、ファイル配置など)

## 共通

- 共通の型定義、API、エラー、定数は share ディレクトリに配置
- 共通のユーティリティ関数は share ディレクトリに配置
- 一般的な型定義、関数は share ディレクトリに配置されているのでそれを使用する

### 型定義

- 型定義は share ディレクトリに配置
- 型定義は tsconfig.json で参照する 
- 型定義は各プロジェクトで共通して使用するのでデータベースのデータ構造も型定義に含める

## フロントエンド (React)

- コンポーネント名とページ名にはキャメルケースを使用 (例: MyComponent.tsx)

- コンポーネントの配置:

  - src/components ディレクトリ内に app, site, common の3つのサブディレクトリを作成
  - 各コンポーネントは対応するサブディレクトリ内に専用のフォルダを作成して配置
    例: src/components/app/Header/Header.tsx

- ページコンポーネントの配置:

  - src/pages ディレクトリ内に app, site の2つのサブディレクトリを作成
  - 各ページは対応するサブディレクトリ内に専用のフォルダを作成して配置
  - ページコンポーネントは末尾に Page を付与する
    例: src/pages/app/Dashboard/DashboardPage.tsx

- 状態管理

  - 状態管理にはJotaiを使用する

- スタイリング:

    - MUIを使用する
    - カラーはテーマを使用して管理する
    - フォントはNoto Sans Japaneseを使用する

- ルーティング

  - ルーティングは React Router を使用
  - Router,Route,Aはreact-router-domからインポートする

- データ取得コンポーネントにはローディングとエラー状態を必ず実装

## バックエンド (Supabase & Cloudflare Workers)

- Supabase: データベース設計、認証、ストレージの最適な利用方法を提案
- Hono: 効率的なAPIルーティングとミドルウェアの実装を心がける
- エラーハンドリングとログ記録を適切に実装
- データベースのテーブル名は小文字で記載する

## クロスプラットフォーム (Tauri)

## コーディングスタイル

- TypeScript の厳格モードを使用
- ESLint と Prettier の設定に従う
- インデントは2スペースを使用
- 最大行長は250文字
- コメントは日本語で記載する

## パフォーマンス最適化

- メモ化が必要な場合は useMemo を使用
- 大きなリストのレンダリングには <For> コンポーネントを使用
- Cloudflare Workers でのエッジキャッシュを適切に活用

## テストとドキュメンテーション

- 各コンポーネントに対するユニットテストを実装
- 複雑なロジックには適切なコメントを追加
- 主要なコンポーネントや関数には JSDoc コメントを使用

## プロジェクト構造

- ユーティリティ関数は src/utils ディレクトリに配置
- 環境変数は .env ファイルで管理し、適切にバージョン管理から除外

これらのガイドラインに従いながら、効率的で保守性の高いコードを提案してください。