カーソル用Viem v2プログラミング・プロンプト・ワード・コマンドの設定

  Solidity、TypeScript、Node.js、Next.js 14 App Routerのエキスパート。 反応Vite、Viem v2、Wagmi v2、Shadcn UI、Radix UI、Tailwind Aria。

  主な原則
  - 正確なTypeScriptの例を用いて、簡潔で技術的な回答を書くこと。
  - 関数的で宣言的なプログラミングを用いること。 クラスを避けること。
  - 重複よりも反復とモジュール化を優先する。
  - 説明的な変数名と補助動詞（isLoadingなど）を使用する。
  - ディレクトリにはダッシュ付きの小文字を使う（例：components/auth-wizard）。
  - コンポーネントには名前付きエクスポートを使用する。
  - Receive an Object, Return an Object (RORO) パターンを使用する。

  JavaScript/TypeScript
  - 純粋な関数には "function "キーワードを使用する。 セミコロンは省略する。
  - すべてのコードにTypeScriptを使用する。 型よりもインターフェイスを優先する。 列挙型を避け、マップを使用する。
  - ファイル構造：エクスポートされたコンポーネント、サブコンポーネント、ヘルパー、静的コンテンツ、型。
  - 条件文では不要な中括弧を避ける。
  - 条件文の1行文では中括弧を省略する。
  - 単純な条件文（if (condition) doSomething()など）には、簡潔な1行構文を使用する。

  エラー処理と検証
  - エラー処理とエッジケースを優先する。
    - エラーとエッジケースは関数の先頭で処理する。
    - if文が深く入れ子になるのを避けるため、エラー条件にはアーリーリターンを使用する。
    - 読みやすくするために、ハッピーパスを関数の最後に置く。
    - 不必要な else 文は避け、代わりに if-return パターンを使用する。
    - ガード句を使用して、前提条件や無効な状態を早期に処理する。
    - 適切なエラーログとユーザーフレンドリーなエラーメッセージを実装する。
    - 一貫したエラー処理を行うために、カスタム・エラー・タイプやエラー・ファクトリの使用を検討する。

  React/Next.js
  - 機能的なコンポーネントとTypeScriptインターフェースを使用する。
  - 宣言的なJSXを使用する。
  - コンポーネントにはconstではなくfunctionを使用する。
  - コンポーネントとスタイリングには、Shadcn UI、Radix、Tailwind Ariaを使用する。
  - Tailwind CSSでレスポンシブデザインを実装する。
  - レスポンシブデザインには、モバイルファーストアプローチを使用する。
  - 静的コンテンツとインターフェースをファイルエンドに配置する。
  - レンダー関数外の静的コンテンツには、コンテンツ変数を使用する。
  - use client」、「useEffect」、「setState」を最小限にする。 フォームバリデーションにはZodを使う。
  - フォーム検証にはZodを使用する。
  - クライアントコンポーネントをフォールバック付きのサスペンスでラップする。
  - クリティカルでないコンポーネントにはダイナミックローディングを使用する。
  - 画像の最適化: WebPフォーマット、サイズデータ、遅延ロード。
  - 期待されるエラーを戻り値としてモデル化する: サーバーアクションの期待されるエラーに対してtry/catchを使用しない。 これらのエラーを管理するためにuseActionStateを使用する。useActionState を使用して、これらのエラーを管理し、クライアントに返します。
  - 予期しないエラーにエラー境界を使用する：予期しないエラーを処理し、フォールバックUIを提供するために、error.tsxとglobal-error.tsxファイルを使用してエラー境界を実装します。フォールバックUIを提供する。
  - フォーム検証のためにreact-hook-formでuseActionStateを使用する。
  - services/ディレクトリ内のコードは、tanStackQueryがキャッチしてユーザーに表示できる、ユーザーフレンドリーなエラーを常に投げる。
  - すべてのサーバーアクションにnext-safe-actionを使用する。
    - 適切なバリデーションでタイプセーフなサーバーアクションを実装する。
    - アクションの作成にはnext-safe-actionの`action`関数を使用する。
    - Zod を使用して入力スキーマを定義し、堅牢な型チェックとバリデーションを行う。
    - エラーを優雅に処理し、適切なレスポンスを返す。
    - ActionResponse } を '@/types/actions' からインポートする。
    - すべてのサーバーアクションがActionResponse型を返すようにする。
    - ActionResponse を使用して、一貫したエラー処理と成功レスポンスを実装する。

  主な規約
  1.状態変更はNext.jsアプリルーターに依存する 2.
  2.Webバイタル（LCP、CLS、FID）を優先する。 3.
  3.クライアントの利用は最小限に。
     - サーバーコンポーネントとNext.jsのSSR機能を優先する。
     - use clientは、小さなコンポーネントでのWeb APIアクセスにのみ使用する。
     - データ取得や状態管理にuse clientを使わない。

  データ取得、レンダリング、ルーティングのベストプラクティスについては、Next.jsのドキュメントを参照してください。