AI个人学习
和实操指南

为Cursor配置three.js编程提示词指令

本指南旨在帮助您使用 React、Vite、Tailwind CSS、Three.js、React Three Fiber 和 Next UI 进行高效开发。以下是关键要点和最佳实践:

  1. 编码风格
  • 使用简洁、技术性的代码,提供准确的 React 示例
  • 采用函数式、声明式编程,避免使用类
  • 优先使用迭代和模块化,而非重复代码
  • 使用描述性变量名,包含辅助动词(如 isLoading)
  • 目录命名使用小写字母加横杠(如 components/auth-wizard)
  • 组件优先使用命名导出
  1. JavaScript/TypeScript
  • 纯函数使用 "function" 关键字,省略分号
  • 所有代码使用 TypeScript,优先使用接口而非类型,避免枚举,使用映射
  • 文件结构:导出组件、子组件、辅助函数、静态内容、类型
  • 条件语句中避免不必要的大括号,单行语句可省略大括号
  • 使用简洁的单行语法表达简单条件语句
  1. 错误处理和验证
  • 在函数开始处理错误和边缘情况
  • 使用提前返回处理错误条件,避免深层嵌套的 if 语句
  • 将正常执行路径放在函数末尾,提高可读性
  • 避免不必要的 else 语句,使用 if-return 模式
  • 使用守卫子句提前处理前置条件和无效状态
  • 实现适当的错误日志和用户友好的错误消息
  • 考虑使用自定义错误类型或错误工厂以实现一致的错误处理
  1. React 开发
  • 使用函数组件和接口
  • 使用声明式 JSX
  • 组件使用 function 关键字,而非 const
  • 使用 Next UI 和 Tailwind CSS 进行组件开发和样式设计
  • 实现响应式设计
  • 将静态内容和接口放在文件末尾
  • 使用内容变量存储静态内容,置于渲染函数外
  • 使用 Suspense 包装客户端组件,提供 fallback
  • 对非关键组件使用动态加载
  • 优化图片:使用 WebP 格式,指定尺寸数据,实现懒加载
  • 将预期错误建模为返回值,避免在服务器操作中使用 try/catch
  • 使用 useActionState 管理错误并返回给客户端
  • 使用错误边界处理意外错误,实现 error.tsx 和 global-error.tsx 文件
  • 结合 react-hook-form 使用 useActionState 进行表单验证
  • 始终抛出用户友好的错误,以便 tanStackQuery 捕获并展示给用户

 

 

three.js

You are an expert in React, Vite, Tailwind CSS, three.js, React three fiber and Next UI.

Key Principles
- 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.

JavaScript
- 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()).

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.
- Consider using custom error types or error factories for consistent error handling.

React
- 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.

AI轻松学

普通人的AI入门指南

帮助你以低成本、零基础学会如何利用AI工具。AI就像办公软件一样,是每个人的必备技能。 掌握AI会让你在求职中占据优势,在未来的工作和学习中事半功倍。

查看详情>
未经允许不得转载:首席AI分享圈 » 为Cursor配置three.js编程提示词指令
分享到

首席AI分享圈

首席AI分享圈专注于人工智能学习,提供全面的AI学习内容、AI工具和实操指导。我们的目标是通过高质量的内容和实践经验分享,帮助用户掌握AI技术,一起挖掘AI的无限潜能。无论您是AI初学者还是资深专家,这里都是您获取知识、提升技能、实现创新的理想之地。

联系我们