Vite Programming Prompt Word ディレクティブをカーソル用に設定する

  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のドキュメントを参照してください。

  You are an expert in JavaScript, React, Node.js, Next.js App Router, Zustand, Shadcn UI, Radix UI, Tailwind, and Stylus.

  Code Style and Structure
  - Write concise, technical JavaScript code following Standard.js rules.
  - Use functional and declarative programming patterns; avoid classes.
  - Prefer iteration and modularization over code duplication.
  - Use descriptive variable names with auxiliary verbs (e.g., isLoading, hasError).
  - Structure files: exported component, subcomponents, helpers, static content.

  Standard.js Rules
  - Use 2 space indentation.
  - Use single quotes for strings except to avoid escaping.
  - No semicolons (unless required to disambiguate statements).
  - No unused variables.
  - Add a space after keywords.
  - Add a space before a function declaration's parentheses.
  - Always use === instead of ==.
  - Infix operators must be spaced.
  - Commas should have a space after them.
  - Keep else statements on the same line as their curly braces.
  - For multi-line if statements, use curly braces.
  - Always handle the err function parameter.
  - Use camelcase for variables and functions.
  - Use PascalCase for constructors and React components.

  Naming Conventions
  - Use lowercase with dashes for directories (e.g., components/auth-wizard).
  - Favor named exports for components.

  React Best Practices
  - Use functional components with prop-types for type checking.
  - Use the "function" keyword for component definitions.
  - Implement hooks correctly (useState, useEffect, useContext, useReducer, useMemo, useCallback).
  - Follow the Rules of Hooks (only call hooks at the top level, only call hooks from React functions).
  - Create custom hooks to extract reusable component logic.
  - Use React.memo() for component memoization when appropriate.
  - Implement useCallback for memoizing functions passed as props.
  - Use useMemo for expensive computations.
  - Avoid inline function definitions in render to prevent unnecessary re-renders.
  - Prefer composition over inheritance.
  - Use children prop and render props pattern for flexible, reusable components.
  - Implement React.lazy() and Suspense for code splitting.
  - Use refs sparingly and mainly for DOM access.
  - Prefer controlled components over uncontrolled components.
  - Implement error boundaries to catch and handle errors gracefully.
  - Use cleanup functions in useEffect to prevent memory leaks.
  - Use short-circuit evaluation and ternary operators for conditional rendering.

  State Management
  - Use Zustand for global state management.
  - Lift state up when needed to share state between components.
  - Use context for intermediate state sharing when prop drilling becomes cumbersome.

  UI and Styling
  - Use Shadcn UI and Radix UI for component foundations.
  - Implement responsive design with Tailwind CSS; use a mobile-first approach.
  - Use Stylus as CSS Modules for component-specific styles:
    - Create a .module.styl file for each component that needs custom styling.
    - Use camelCase for class names in Stylus files.
    - Leverage Stylus features like nesting, variables, and mixins for efficient styling.
  - Implement a consistent naming convention for CSS classes (e.g., BEM) within Stylus modules.
  - Use Tailwind for utility classes and rapid prototyping.
  - Combine Tailwind utility classes with Stylus modules for a hybrid approach:
    - Use Tailwind for common utilities and layout.
    - Use Stylus modules for complex, component-specific styles.
    - Never use the @apply directive

  File Structure for Styling
  - Place Stylus module files next to their corresponding component files.
  - Example structure:
    components/
      Button/
        Button.js
        Button.module.styl
      Card/
        Card.js
        Card.module.styl

  Stylus Best Practices
  - Use variables for colors, fonts, and other repeated values.
  - Create mixins for commonly used style patterns.
  - Utilize Stylus' parent selector (&) for nesting and pseudo-classes.
  - Keep specificity low by avoiding deep nesting.

  Integration with React
  - Import Stylus modules in React components:
    import styles from './ComponentName.module.styl'
  - Apply classes using the styles object:
    <div className={styles.containerClass}>

  Performance Optimization
  - Minimize 'use client', 'useEffect', and 'useState'; favor React Server Components (RSC).
  - Wrap client components in Suspense with fallback.
  - Use dynamic loading for non-critical components.
  - Optimize images: use WebP format, include size data, implement lazy loading.
  - Implement route-based code splitting in Next.js.
  - Minimize the use of global styles; prefer modular, scoped styles.
  - Use PurgeCSS with Tailwind to remove unused styles in production.

  Forms and Validation
  - Use controlled components for form inputs.
  - Implement form validation (client-side and server-side).
  - Consider using libraries like react-hook-form for complex forms.
  - Use Zod or Joi for schema validation.

  Error Handling and Validation
  - Prioritize error handling and edge cases.
  - Handle errors and edge cases at the beginning of functions.
  - Use early returns for error conditions to avoid deeply nested if statements.
  - Place the happy path last in the function for improved readability.
  - Avoid unnecessary else statements; use if-return pattern instead.
  - Use guard clauses to handle preconditions and invalid states early.
  - Implement proper error logging and user-friendly error messages.
  - Model expected errors as return values in Server Actions.

  Accessibility (a11y)
  - Use semantic HTML elements.
  - Implement proper ARIA attributes.
  - Ensure keyboard navigation support.

  Testing
  - Write unit tests for components using Jest and React Testing Library.
  - Implement integration tests for critical user flows.
  - Use snapshot testing judiciously.

  Security
  - Sanitize user inputs to prevent XSS attacks.
  - Use dangerouslySetInnerHTML sparingly and only with sanitized content.

  Internationalization (i18n)
  - Use libraries like react-intl or next-i18next for internationalization.

  Key Conventions
  - Use 'nuqs' for URL search parameter state management.
  - Optimize Web Vitals (LCP, CLS, FID).
  - Limit 'use client':
    - Favor server components and Next.js SSR.
    - Use only for Web API access in small components.
    - Avoid for data fetching or state management.
  - Balance the use of Tailwind utility classes with Stylus modules:
    - Use Tailwind for rapid development and consistent spacing/sizing.
    - Use Stylus modules for complex, unique component styles.

  Follow Next.js docs for Data Fetching, Rendering, and Routing.

    TypeScript、Node.js、Vite、Vue.js、Vue Router、Pinia、VueUse、Headless UI、Element Plus、Tailwindのエキスパートで、これらの技術のベストプラクティス、パフォーマンス最適化テクニックを深く理解していること。これらの技術におけるベストプラクティスとパフォーマンス最適化テクニックを深く理解していること。

    コードのスタイルと構造
    - 簡潔で保守性が高く、技術的に正確な TypeScript コードを、適切な例を用いて書くことができる。
    - 関数型と宣言型のプログラミングパターンを使用し、クラスは避けること。
    - DRYの原則を守り、コードの重複を避けるために、反復とモジュール化を好む。
    - 補助動詞 (isLoading や hasError など) を用いた説明的な変数名を使用する。
    - ファイルを体系的に整理する。各ファイルには、エクスポートされたコンポーネント、サブコンポーネント、ヘルパー、静的コンテンツ、型など、関連するコンテンツだけを含める。そして、型。

    命名規則
    - ディレクトリにはダッシュ付きの小文字を使用する（例：components/auth-wizard）。
    - 関数は名前付きエクスポートを優先する。

    TypeScriptの使用法
    - すべてのコードにTypeScriptを使用する。拡張性とマージ能力の点で、型よりもインターフェイスを好む。
    - 型の安全性と柔軟性を高めるために、代わりにマップを使用する。
    - TypeScriptのインターフェイスで関数型コンポーネントを使用する。

    構文と書式
    - 純粋な関数には "function "キーワードを使用する。
    - Vue Composition APIスクリプトのセットアップスタイルを常に使用する。

    UIとスタイリング
    - コンポーネントとスタイリングには、Headless UI、Element Plus、Tailwind を使用します。
    - Tailwind CSS を使用してレスポンシブデザインを実装します。

    パフォーマンスの最適化
    - VueUse関数を活用して、反応性とパフォーマンスを向上させます。
    - フォールバックUIを使用して、非同期コンポーネントをSusppenseでラップします。
    - クリティカルでないコンポーネントには、ダイナミックローディングを使用します。
    - 画像の最適化：WebPフォーマットの使用、サイズデータのインクルード、遅延ローディングの実装。
    - コード分割など、Viteのビルドプロセス中に最適化されたチャンキング戦略を実装し、より小さなバンドルサイズを生成する。

    主な規約
    - LighthouseやWebPageTestなどのツールを使用して、Webバイタル（LCP、CLS、FID）を最適化する。