【AI駆動開発】CursorのProject Rulesの叩き台はCursor自身に作らせよう📝

frontend/
├── packages/ # Desktop / Web / Shared の3つのFrontend Packageを管理する
│   ├── shared/           # 共通ライブラリ
│   ├── desktop/          # Electronアプリ
│   └── web/              # Webアプリ
├── package.json          # ワークスペース管理用
├── pnpm-workspace.yaml   # pnpmワークスペース設定
├── tailwind.config.js    # 共通TailwindCSS設定
├── postcss.config.js     # 共通PostCSS設定
├── tsconfig.json         # プロジェクトルート型設定
└── # その他設定ファイルたち・・・

このプロジェクトの Frontend ディレクトリに対する Project Rules を考えて、作成してください。

# LabDX Frontend - Cursor Rules

Lab-DX Desktop & Web アプリケーション統合開発プロジェクトのFrontend開発ルールです。

## 🏗️ プロジェクト構造

このプロジェクトは以下の3つのパッケージで構成されています：

- `packages/shared/` - Desktop/Web共通ライブラリ
- `packages/desktop/` - Electronデスクトップアプリ
- `packages/web/` - Vite Webアプリケーション

## 📝 コーディング規約

### TypeScript
- 厳密な型定義を使用する
- `any`型の使用を避ける
- インターフェースは`PascalCase`で命名
- 型ファイルは`packages/shared/src/types/`に配置

### React
- 関数コンポーネントを使用する
- カスタムHooksは`use`プレフィックスで命名
- Propsインターフェースは`ComponentNameProps`形式で命名
- デフォルトエクスポートよりも名前付きエクスポートを優先

### ファイル・ディレクトリ命名
- コンポーネントファイル: `PascalCase.tsx`
- Hooksファイル: `use*.ts`
- ユーティリティファイル: `camelCase.ts`
- 定数ファイル: `SNAKE_CASE.ts`

## 🎨 UI開発ガイドライン

### shadcn-ui + TailwindCSS
- 新しいUIコンポーネントは`pnpm ui:add [component-name]`で追加
- カスタムスタイルは`className`プロパティで調整
- 共通コンポーネントは`packages/shared/src/components/`に配置
- プラットフォーム固有のスタイルは各パッケージ内で実装

### スタイリング原則
- TailwindCSSのユーティリティクラスを使用
- インラインスタイルは最小限に抑える
- CSS Variablesを使用したテーマ対応
- レスポンシブデザインの実装

## 🔧 開発ワークフロー

### 新機能開発手順
1. 共通機能は`packages/shared/`で実装
2. プラットフォーム固有機能は各パッケージで実装
3. `pnpm build:shared`で共通ライブラリをビルド
4. `pnpm dev:desktop`または`pnpm dev:web`で動作確認

### コード品質
- 開発前に`pnpm typecheck`で型チェック
- コミット前に`pnpm lint:fix`でリント修正
- `pnpm format`でコードフォーマット統一

## 📦 パッケージ管理

### 依存関係追加
- 共通依存関係: ルートディレクトリで`pnpm add -w [package]`
- パッケージ固有: `pnpm --filter @lab-dx/[package] add [dependency]`

### インポート規約
// 共通ライブラリからのインポート
import { Button, Card } from '@lab-dx/shared'

// 内部インポート（相対パス）
import { useLocalHook } from '../hooks/useLocalHook'
import { LocalComponent } from './LocalComponent'


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

### 共通ライブラリ
- 不要なエクスポートを避ける
- Tree-shaking対応のために名前付きエクスポートを使用
- 重いライブラリは遅延読み込みを検討

### Desktop固有
- Electronのメインプロセスとレンダラープロセスを適切に分離
- IPCの使用は最小限に抑える

### Web固有
- コード分割とレイジーローディングを活用
- バンドルサイズの最適化

## 🔍 デバッグ・テスト

### 開発ツール
- React Developer Tools
- Electron DevTools
- TypeScript Language Server

### エラーハンドリング
- 適切なエラーバウンダリの実装
- console.errorでエラーログ出力
- ユーザーフレンドリーなエラーメッセージ

## 📚 ベストプラクティス

### セキュリティ
- XSS対策として`dangerouslySetInnerHTML`の使用を避ける
- Electron環境でのnodeIntegration無効化
- 外部リソースの適切なサニタイズ

### アクセシビリティ
- WAI-ARIAガイドライン準拠
- キーボードナビゲーション対応
- スクリーンリーダー対応

### 国際化対応
- 将来的なi18n実装を考慮した文字列管理
- ハードコードされた文字列を避ける

## 🛠️ トラブルシューティング

### よくある問題
- 型エラー: `pnpm typecheck`で確認
- ビルドエラー: 共通ライブラリを先にビルド
- 依存関係エラー: `pnpm install --frozen-lockfile`
- キャッシュ問題: `pnpm clean`でクリア

### 開発環境
- Node.js 20.0.0以上を使用
- pnpm 10.0.0以上を使用
- VSCode + 推奨拡張機能

## 📋 コミット規約

### コミットメッセージ形式
type(scope): description

feat(shared): 新しい共通コンポーネント追加
fix(desktop): Electronメニューバグ修正
style(web): TailwindCSSクラス最適化
docs(readme): 開発手順更新

### スコープ
- `shared`: 共通ライブラリ
- `desktop`: Electronアプリ
- `web`: Webアプリ
- `workspace`: ワークスペース設定

## 🎯 注意事項

### 禁止事項
- 直接的なDOM操作（Reactの仮想DOMを使用）
- 大きなバンドルサイズを生成するライブラリの無闇な追加
- プラットフォーム固有コードの共通ライブラリへの混入

### 推奨事項
- コンポーネントの単一責任原則
- Hooksによるロジック分離
- プロップスの適切な型定義
- エラーバウンダリの活用

これらのルールに従って、一貫性のある高品質なコードを維持してください。