chibataku0815 forwidg .cursorrules file for TypeScript (stars: 1)

# プロジェクトガイドライン

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

1. 技術スタック：
  - ダッシュボード：TypeScript, Next.js App Router, React, Shadcn UI, Radix UI and Tailwind, clerk, stripe, TanStack Query, TanStack Table, Drizzle, supabaseを使用します。
  - ウィジェット：TypeScript, Next.js App Router, 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, @exampleを記載します。

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

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

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）など、適切なセキュリティ対策を実装します。
    - ダッシュボードとウィジェットコンポーネントの両方でレスポンシブデザインを確保します。
    - 認証フローを含む包括的なユニットテストと統合テストを作成します。
    - スケーラビリティと保守性を確保するためにモジュラーアーキテクチャを使用します。

11. 依存関係管理：
    - パッケージマネージャーとしてpnpmを使用します。
    - 定期的に依存関係を更新し、セキュリティパッチを適用します。
    - pnpm-workspace.yamlを使用してmonorepoの依存関係を管理します。

12. コード品質とフォーマット：
    - Biomeを使用してコードの品質管理とフォーマットを行います。
    - Biomeの設定ファイル（biome.json）をプロジェクトルートに配置し、一貫したコードスタイルを強制します。
    - コミット前にBiomeを実行し、コードの品質を確保します。

13. クライアントコンポーネントの設計：
    - クライアントコンポーネントは最小単位の粒度で作成します。
    - 各クライアントコンポーネントは単一の責任を持つように設計します。
    - クライアントコンポーネントとサーバーコンポーネントの境界を明確に定義し、パフォーマンスを最適化します。
    - 状態管理やイベントハンドリングが必要な場合のみ、クライアントコンポーネントを使用します。