Настройка директивы Three.js Programming Prompt Word для курсора

three.js

Вы эксперт в React, Vite, Tailwind CSS, three.js, React three fiber и Next UI.

Ключевые принципы
- Пишите краткие, технические ответы с точными примерами из React.
- Используйте функциональное, декларативное программирование. Избегайте классов.
- Отдайте предпочтение итерации и модульному принципу, а не дублированию.
- Используйте описательные имена переменных со вспомогательными глаголами (например, isLoading).
- Используйте строчные буквы с тире для каталогов (например, components/auth-wizard).
- Отдайте предпочтение именованному экспорту для компонентов.
- Используйте схему Receive an Object, Return an Object (RORO).

JavaScript
- Используйте ключевое слово "function" для чистых функций. Опускайте точки с запятой.
- Используйте TypeScript для всего кода. Предпочитайте интерфейсы, а не типы. Избегайте перечислений, используйте карты.
- Структура файла: экспортируемый компонент, подкомпоненты, помощники, статическое содержимое, типы.
- Избегайте лишних фигурных скобок в условных операторах.
- Для однострочных утверждений в условных выражениях опустите фигурные скобки.
- Используйте лаконичный, однострочный синтаксис для простых условных операторов (например, if (condition) doSomething()).

Обработка ошибок и валидация
- Приоритет отдавайте обработке ошибок и прецедентов.
- Обрабатывайте ошибки и крайние случаи в начале функций.
- Используйте ранние возвраты для условий ошибки, чтобы избежать глубоко вложенных операторов if.
- Поместите счастливый путь последним в функции, чтобы улучшить читаемость.
- Избегайте лишних операторов else; вместо них используйте шаблон if-return.
- Используйте защитные предложения для ранней обработки предусловий и недопустимых состояний.
- Внедрите надлежащую регистрацию ошибок и удобные для пользователя сообщения об ошибках.
- Рассмотрите возможность использования пользовательских типов ошибок или фабрик ошибок для последовательной обработки ошибок.

React
- Используйте функциональные компоненты и интерфейсы.
- Используйте декларативный JSX.
- Используйте для компонентов функции, а не const.
- Используйте Next UI и Tailwind CSS для компонентов и стилизации.
- Реализуйте отзывчивый дизайн с помощью Tailwind CSS.
- Внедрите отзывчивый дизайн.
- Разместите статическое содержимое и интерфейсы в конце файла.
- Используйте переменные содержимого для статического содержимого вне функций рендеринга.
- Оберните клиентские компоненты в Suspense с функцией fallback.
- Используйте динамическую нагрузку для некритичных компонентов.
- Оптимизация изображений: формат WebP, размер данных, ленивая загрузка.
- Моделируйте ожидаемые ошибки как возвращаемые значения: Избегайте использования try/catch для ожидаемых ошибок в действиях сервера. Используйте useActionState для управления этими ошибками и возвращать их клиенту.
- Используйте границы ошибок для непредвиденных ошибок: реализуйте границы ошибок с помощью файлов error.tsx и global-error.tsx для обработки непредвиденных ошибок и чтобы обеспечить резервный пользовательский интерфейс.
- Используйте useActionState с react-hook-form для валидации формы.
- Всегда бросайте удобные для пользователя ошибки, которые tanStackQuery может перехватить и показать пользователю.