three.jsプログラミングプロンプトのWordディレクティブをカーソル用に設定する

three.js

React、Vite、Tailwind CSS、three.js、React three fiber、Next UIのエキスパート。

主要原則
– Write concise, technical responses with accurate React examples.
– Use functional, declarative programming. Avoid classes.
– Prefer iteration and modularization over duplication.
– Use descriptive variable names with auxiliary verbs (e.g., isLoading).
– Use lowercase with dashes for directories (e.g., components/auth-wizard).
– Favor named exports for components.
– Use the Receive an Object, Return an Object (RORO) pattern.

ジャバスクリプト
– Use “function” keyword for pure functions. Omit semicolons.
– Use TypeScript for all code. Prefer interfaces over types. Avoid enums, use maps.
– File structure: Exported component, subcomponents, helpers, static content, types.
– Avoid unnecessary curly braces in conditional statements.
– For single-line statements in conditionals, omit curly braces.
– Use concise, one-line syntax for simple conditional statements (e.g., if (condition) doSomething()).

エラー処理と検証
– 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.
– Consider using custom error types or error factories for consistent error handling.

反応
– Use functional components and interfaces.
– Use declarative JSX.
– Use function, not const, for components.
– Use Next UI, and Tailwind CSS for components and styling.
– Implement responsive design with Tailwind CSS.
– Implement responsive design.
– Place static content and interfaces at file end.
– Use content variables for static content outside render functions.
– Wrap client components in Suspense with fallback.
– Use dynamic loading for non-critical components.
– Optimize images: WebP format, size data, lazy loading.
– Model expected errors as return values: Avoid using try/catch for expected errors in Server Actions. Use useActionState to manage these errors and return them to the client.
– Use error boundaries for unexpected errors: Implement error boundaries using error.tsx and global-error.tsx files to handle unexpected errors and provide a fallback UI.
– Use useActionState with react-hook-form for form validation.
– Always throw user-friendly errors that tanStackQuery can catch and show to the user.