chibataku0815 saas-widget .cursorrules file for TypeScript

このリポジトリはプロジェクトのウィジェット機能とダッシュボードを提供するプロジェクトのウィジェット機能を提供しているリポジトリです。
以下のガイドラインに従って開発を進めてください：

1. 技術スタック：
  - ウィジェット：TypeScript、React、Vite、Web Components, 、Shadcn UI、Radix UI、Tailwind CSS, Supabaseを使用します。

2. コードスタイル：
  - 簡潔で技術的なTypeScriptコードを書き、正確な例を提供します。
  - 関数型と宣言型のプログラミングパターンを使用し、クラスは避けます（ウィジェットのWeb Components除く）。
  - 反復処理とモジュール化を優先し、コードの重複を避けます。
  - 説明的な変数名を使用し、補助動詞を含めます（例：isLoading、hasError）。
  - ファイル構造：エクスポートされるコンポーネント、サブコンポーネント、ヘルパー、静的コンテンツ、型の順に構成します。
  - forEach、for-ofループの代わりに、map、filter、find、reduceなどを使用します。

3. コメント：
  - コードの先頭にJSDocコメントを追加し、@fileを使用します。
  - スクリプトの概要、主な仕様、制限事項を小学生でも理解できるように記述します。
  - 複雑な処理がある場合は、処理の流れを説明します。重複を避け、@returns {JSX.Element}は記載しません。
  - @path,@expampleを記載します。

4. 命名規則：
  - ディレクトリ名は小文字とダッシュを使用します（例：components/auth-wizard）。
  - コンポーネントには名前付きエクスポートを使用します。

5. TypeScript：
  - すべてのコードでTypeScriptを使用し、型よりもインターフェースを優先します。
  - enumの代わりにマップを使用します。
  - TypeScriptインターフェースを持つ関数コンポーネントを使用します。

6. 構文とフォーマット：
  - 条件文では不要な中括弧を避け、簡潔な構文を使用します。
  - 宣言的なJSXを使用します。

7. UIとスタイリング：
  - Shadcn UI、Radix、Tailwindを使用します。
  - レスポンシブデザインを実装し、モバイルファーストアプローチを取ります。

8. パフォーマンス最適化：
  - ダッシュボード：
    - 'use client'、useEffect、setStateの使用を最小限に抑え、React Server Components（RSC）を優先します。
    - クライアントコンポーネントはSuspenseでラップし、フォールバックを提供します。
  - ウィジェット：
    - バンドルサイズを最小限に抑え、パフォーマンスを最適化します。
  - 共通：
    - 重要でないコンポーネントには動的ロードを使用します。
    - 画像最適化：WebP形式を使用し、サイズデータを含め、遅延ロードを実装します。

9. 主要な規約：
  - ダッシュボード：URL検索パラメータの状態管理には'nuqs'を使用します。
  - Web Vitals（LCP、CLS、FID）を最適化します。

10. アプリケーション開発ガイドライン：
    - Supabaseをデータベースとストレージ管理に使用し、認証には使用しません。
    - ウィジェット：React ViteでWeb Componentsを作成し、クラスベースアプローチとShadow DOMを採用します。
    - ダッシュボード：Next.jsのServer ComponentsとServer Actionsを実装してパフォーマンスを向上させます。
    - データフェッチとテーブル管理にはTanStack QueryとTanStack Tableを使用します。
    - クライアントとサーバー両側で適切なエラーハンドリングを行い、ユーザーフレンドリーなメッセージを提供します。
    - 最低限、英語と日本語の国際化（i18n）サポートを実装します。
    - ユーザーが複数のプロジェクトを作成、表示、管理できるプロジェクト管理システムを実装します。
    - 各プロジェクトに固有のウィジェットコードを生成し、外部サイトへの簡単な埋め込みを可能にします。
    - 環境変数を使用して機密情報とAPIキーを管理します。
    - 入力のサニタイズやContent Security Policy（CSP）など、適切なセキュリティ対策を実装します。
    - ダッシュボードとウィジェットコンポーネントの両方でレスプンシブデザインを確保します。
    - 認証フローを含む包括的なユニットテストと統合テストを作成します。
    - スケーラビリティと保守性を確保するためにモジュラーアーキテクチャを使用します。

これらのガイドラインは、プロジェクトの進化に合わせて定期的に見直し、更新してください。

ダッシュボードのデータフェッチ、レンダリング、ルーティングについては、Next.jsのドキュメントに従ってください。ウィジェットについては、React ViteとWeb Componentsのベストプラクティスに従ってください。