モダンウェブ開発

Brandon Fernandez によるモダンウェブ開発のための包括的なカーソルルール。TypeScript、Node.js、Next.js 14、React、Supabase、GraphQL、Tailwind CSS、Radix UI、Shadcn UI に対応。

開発の主要原則

コードスタイルとアーキテクチャ

• 正確な TypeScript の例を含む簡潔で技術的なレスポンスを作成する
• 関数型で宣言的なプログラミングを採用し、クラスベースのアプローチを避ける
• コードの重複よりも反復とモジュール化を優先する
• 補助動詞を含む説明的な変数名を使用する（isLoading、hasError）
• RORO パターン（オブジェクトを受け取り、オブジェクトを返す）を実装する

JavaScript/TypeScript 標準

• 純粋な関数には function キーワードを使用する
• セミコロンを省略する
• TypeScript を排他的に活用し、型よりもインターフェースを優先する
• ファイルの構成：エクスポートされたコンポーネント、サブコンポーネント、ヘルパー、静的コンテンツ、型
• 条件分岐の不要な中括弧を最小化する

エラーハンドリング

• 関数のエントリーポイントでエラーとエッジケースに対処する
• エラー条件に対して早期リターンを適用し、深いネストを避ける
• 成功パスを最後に配置して可読性を向上させる
• 前提条件の検証にガード句を使用する
• ユーザーフレンドリーなエラーメッセージを実装する

React と Next.js ガイドライン

• TypeScript インターフェースを備えた関数型コンポーネントを使用する
• function 宣言を使用して宣言的な JSX を記述する
• Shadcn UI、Radix、Tailwind CSS でスタイリングする
• モバイルファーストのレスポンシブデザインを実装する
• use client、useEffect、setState を最小化し、React Server Components を優先する
• フォーム検証に Zod を採用する
• クライアントコンポーネントを Suspense でラップしフォールバックを用意する
• 非クリティカルなコンポーネントに動的読み込みを使用する
• 画像を最適化する（WebP 形式、サイズデータ、遅延読み込み）

データと状態管理

• データ取得に React Server Components を活用する
• 予読み込みパターンを実装してウォーターフォール を防止する
• リアルタイム同期と状態管理に Supabase を使用する
• チャット履歴、レート制限、セッションに Vercel KV を検討する

Supabase と GraphQL

• データベース操作とサブスクリプションに Supabase クライアントを使用する
• Row Level Security（RLS）ポリシーを実装する
• Supabase Auth、Storage、Edge Functions を活用する
• タイプセーフな GraphQL API の操作に Genql を使用する
• 必要なデータのみを取得するように GraphQL クエリを最適化する

スタイリングとテスト

スタイリング

• Tailwind CSS のユーティリティファーストアプローチを適用する
• コンポーネントバリアント に Class Variance Authority（CVA）を使用する

テスト

• ユーティリティとフック向けのユニットテストを実装する
• 複雑なコンポーネント向けの統合テストを作成する
• 重要なユーザーフロー向けのエンドツーエンドテストを開発する

アクセシビリティとドキュメンテーション

アクセシビリティ

• インターフェース全体でキーボードナビゲーションを確保する
• 適切な ARIA ラベルとセマンティックロールを実装する
• WCAG 準拠の色コントラスト比を維持する

ドキュメンテーション

• IDE の intellisense 用に明確な JSDoc コメントを提供する
• Supabase スキーマ、RLS ポリシー、Edge Functions をドキュメント化する